Jetpack Compose 选项卡控件实现

这里写目录标题

介绍
主体
解释

介绍

实现选项卡控件
在这里插入图片描述

主体

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Tab
import androidx.compose.material3.TabRow
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp// 定义一个 Composable 函数，用于创建带有选项卡的布局
@Composable
fun TabLayoutExample() {// 使用 remember 来记住可变状态，selectedTabIndex 表示当前选中的选项卡索引var selectedTabIndex by remember { mutableStateOf(0) }// 定义选项卡的标题列表val tabTitles = listOf("选项卡 1", "选项卡 2")// 使用 Column 布局将选项卡和内容垂直排列Column(// 让 Column 填充整个可用空间modifier = Modifier.fillMaxSize()) {// 创建一个 TabRow 用于显示选项卡TabRow(// 指定当前选中的选项卡索引selectedTabIndex = selectedTabIndex// 指定文字颜色contentColor = Color.White,// 指定背景颜色containerColor = Color(0xFF4F4F4F),) {// 遍历选项卡标题列表tabTitles.forEachIndexed { index, title ->// 创建一个 Tab 组件Tab(// 设置选项卡的文本内容text = { Text(title) },// 判断当前选项卡是否被选中selected = selectedTabIndex == index,// 当选项卡被点击时，更新 selectedTabIndex 的值onClick = { selectedTabIndex = index })}}// 根据选中的选项卡索引显示不同的内容when (selectedTabIndex) {0 -> ContentForTab1()1 -> ContentForTab2()}}
}// 定义一个 Composable 函数，用于显示选项卡 1 的内容
@Composable
fun ContentForTab1() {// 使用 Column 布局将内容垂直排列Column(// 让 Column 填充整个可用空间，并添加内边距modifier = Modifier.fillMaxSize().padding(16.dp),// 设置垂直排列方式为居中verticalArrangement = Arrangement.Center,// 设置水平排列方式为居中horizontalAlignment = Alignment.CenterHorizontally) {// 显示文本内容Text("这是选项卡 1 的内容")}
}// 定义一个 Composable 函数，用于显示选项卡 2 的内容
@Composable
fun ContentForTab2() {// 使用 Column 布局将内容垂直排列Column(// 让 Column 填充整个可用空间，并添加内边距modifier = Modifier.fillMaxSize().padding(16.dp),// 设置垂直排列方式为居中verticalArrangement = Arrangement.Center,// 设置水平排列方式为居中horizontalAlignment = Alignment.CenterHorizontally) {// 显示文本内容Text("这是选项卡 2 的内容")}
}

解释

TabLayoutExample 函数：

该函数是整个布局的核心，用于创建带有选项卡的界面。
selectedTabIndex 用于记录当前选中的选项卡索引，初始值为 0。
tabTitles 是一个包含选项卡标题的列表。
Column 用于将选项卡和内容垂直排列。
TabRow 用于显示选项卡，其中的 Tab 组件根据 selectedTabIndex 来判断是否选中，并在点击时更新 selectedTabIndex。
when 语句根据 selectedTabIndex 的值显示不同的内容。