Создание макета вкладок в Jetpack Compose: пошаговое руководство

В Jetpack Compose вы можете создать макет вкладок, используя компоненты TabRowи Tab. Вот пример того, как можно создать базовый макет вкладок:

import androidx.compose.foundation.layout.Column
import androidx.compose.material.Tab
import androidx.compose.material.TabRow
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@Preview
@Composable
fun TabLayoutExample() {
    val tabs = listOf("Tab 1", "Tab 2", "Tab 3")
    val selectedTabIndex = remember { mutableStateOf(0) }
    Column {
        TabRow(selectedTabIndex.value) {
            tabs.forEachIndexed { index, title ->
                Tab(
                    selected = selectedTabIndex.value == index,
                    onClick = { selectedTabIndex.value = index },
                    text = {
                        Text(
                            text = title,
                            fontSize = 16.sp
                        )
                    },
                    modifier = Modifier.padding(16.dp)
                )
            }
        }
// Content for each tab
        when (selectedTabIndex.value) {
            0 -> {
                Text(text = "Content for Tab 1")
            }
            1 -> {
                Text(text = "Content for Tab 2")
            }
            2 -> {
                Text(text = "Content for Tab 3")
            }
        }
    }
}

В этом примере у нас есть TabRow, который отображает вкладки горизонтально. Каждая вкладка представлена ​​компонентом Tab. Переменная selectedTabIndexотслеживает выбранную в данный момент вкладку.

Внутри TabRowмы перебираем список tabsи создаем компонент Tabдля каждой вкладки. Мы устанавливаем свойство selectedдля Tabна основе selectedTabIndex. При нажатии на вкладку мы обновляем selectedTabIndex, чтобы отразить новый выбор.

Под TabRowу нас есть оператор when, который отображает содержимое каждой вкладки на основе значения selectedTabIndex.

Это базовый пример макета вкладок в Jetpack Compose. Вы можете настроить внешний вид и поведение вкладок в соответствии со своими требованиями.