Функция ListItem
Функция ListItem рисует одну строку
списка в стиле Material3. Заголовок передают
в лямбду headlineContent,
дополнительный текст - в supportingContent,
иконку слева - в leadingContent.
Синтаксис
ListItem(
headlineContent = { Text("abcde") },
supportingContent = { Text("12345") },
leadingContent = {
Icon(
imageVector = Icons.Filled.Add,
contentDescription = "abcde",
)
},
)
Параметры
| Параметр | Описание |
|---|---|
headlineContent |
Лямбда с главной строкой пункта. Обычно
внутри вызывают Text.
|
supportingContent |
Лямбда с второй строкой под заголовком. Можно не передавать, если подпись не нужна. |
leadingContent |
Лямбда с элементом слева от текста,
часто с Icon
из Icons.
|
Пример
Давайте выведем пункт списка с иконкой и двумя строками:
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.Text
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ListItem(
headlineContent = { Text(text = "abcde") },
supportingContent = { Text(text = "12345") },
leadingContent = {
Icon(
imageVector = Icons.Filled.Add,
contentDescription = "abcde",
)
},
)
}
}
}
На экране слева будет иконка плюса,
справа заголовок "abcde"
и под ним строка "12345".
Пример
Давайте поставим два таких пункта в столбец:
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.Text
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Column {
ListItem(
headlineContent = { Text(text = "abcde") },
supportingContent = { Text(text = "12345") },
leadingContent = {
Icon(
imageVector = Icons.Filled.Add,
contentDescription = "abcde",
)
},
)
ListItem(
headlineContent = { Text(text = "12345") },
supportingContent = { Text(text = "abcde") },
leadingContent = {
Icon(
imageVector = Icons.Filled.Add,
contentDescription = "12345",
)
},
)
}
}
}
}
На экране два пункта списка встанут один под другим с разными подписями.
