526互联

Jetpack Compose：开始使用组件

发布时间 2023-07-04 15:41:22作者: develon

接上篇

https://www.cnblogs.com/develon/p/17417599.html

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.material3.Tab
import androidx.compose.material3.TabRow
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun TabRowDemo() {
    val state = remember { mutableStateOf(0) }
    val titles = listOf<String>("推荐", "体育新闻", "Android软件工程师")
    Column {
        TabRow(selectedTabIndex = state.value) {
            titles.forEachIndexed { index, value ->
                Tab(
                    text = { Text(value) },
                    selected = state.value == index,
                    onClick = {
                        state.value = index
                    }
                )
            }
        }
        Spacer(modifier = Modifier.height(20.dp))
        Text(
            modifier = Modifier.align(Alignment.CenterHorizontally),
            text = "第${state.value}个Tab, ${titles[state.value]}",
            style = TextStyle(fontSize = 20.sp)
        )
    }
}