Jetpack Compose：开始使用组件

接上篇

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)
            }
        }
    }
}