接上篇
https://www.cnblogs.com/develon/p/17417599.html
AndroidX Github: https://github.com/androidx/androidx
参考:https://juejin.cn/post/6965127022217543693
TabRow / ScrollableTabRow
TabRow 相当于原生View中的 TabLayout
TabRow: 包含一行 Tab, 其中的 Tab 均匀分布,每一个 Tab 占用相等的宽度
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)
)
}
}
ScrollableTabRow: 顶部的 Tab 行可以滚动的 TabRow
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material3.ScrollableTabRow
import androidx.compose.material3.Tab
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 ScrollableTabRowDemo() {
val state = remember { mutableStateOf(0) }
val titles = listOf<String>("推荐", "Kotlin 入门到精通", "Android软件工程师", "Web前端工程师")
Column {
ScrollableTabRow(
selectedTabIndex = state.value,
modifier = Modifier.fillMaxWidth(),
edgePadding = 6.dp
) {
titles.forEachIndexed { index, value ->
Tab(
text = {
Text(
value,
fontSize = if (state.value == index) 18.sp else 14.sp
)
},
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)
)
}
}
HorizontalPager / VerticalPager
HorizontalPager 可以通过滑动翻页
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HorizontalPagerDemo() {
val pagerState = rememberPagerState()
val pages = listOf(
Pair("A page", Color.Cyan),
Pair("B page", Color.Magenta),
Pair("C page", Color.DarkGray),
)
HorizontalPager(state = pagerState, pageCount = pages.size) { page ->
val (text, color) = pages[page % pages.size]
Column(modifier = Modifier.background(color = color).fillMaxSize()) {
Text(text = text)
}
}
}
HorizontalPager 与 ScrollableTabRow 结合使用(当然这种选项较少的情况最好换成TabRow):
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.ScrollableTabRow
import androidx.compose.material3.Tab
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch
val titles = listOf<String>("配置列表", "服务器列表")
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun AppUI() {
val pagerState = rememberPagerState()
val coroutineScope = rememberCoroutineScope()
Column {
ScrollableTabRow(
selectedTabIndex = pagerState.currentPage,
modifier = Modifier.fillMaxWidth(),
edgePadding = 6.dp
) {
titles.forEachIndexed { index, value ->
Tab(text = { Text(value) }, selected = pagerState.currentPage == index, onClick = {
coroutineScope.launch {
// 同步 HorizontalPager 的状态
pagerState.animateScrollToPage(index)
}
})
}
}
HorizontalPager(state = pagerState, pageCount = titles.size) { page ->
val text = titles[page % titles.size]
Column(modifier = Modifier.background(color = Color.Cyan).fillMaxSize()) {
Text(text)
}
}
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee