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 的内容")
    }
}    

解释

1. TabLayoutExample 函数：

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

2. ContentForTab1 和 ContentForTab2 函数：

这两个函数分别用于显示选项卡 1 和选项卡 2 的内容。
它们都使用 Column 布局将内容垂直居中显示，并添加了内边距。
内容为简单的文本信息。
通过这种方式，你可以实现一个简单的选项卡布局，点击不同的选项卡可以显示不同的内容。