android compose Tab 标签页使用

标签页可让您整理相关内容组。标签页有两种类型：

主要标签页：位于顶部应用栏下方的内容窗格顶部。它们会显示主要内容目标，并且仅在需要一组标签页时使用。
次要标签页：在内容区域内使用，用于进一步分隔相关内容并建立层次结构。当屏幕需要多个级别的标签页时，它们是必需的。

使用 Tab、PrimaryTabRow 和 SecondaryTabRow 可组合项来实现标签页。Tab 可组合项表示行中的单个标签页，通常在 PrimaryTabRow（用于主要指示器标签页）或 SecondaryTabRow（用于次要指示器标签页）内使用。

Tab 包含以下关键参数：

selected：确定当前标签页是否以视觉方式突出显示。
onClick()：一个必需的 lambda 函数，用于定义用户点击标签页时要执行的操作。您通常在此处处理导航事件、更新所选标签页状态或加载相应内容。
text：在标签页内显示文本。可选。
icon：在标签页内显示图标。可选。
enabled：控制标签页是否已启用且可交互。如果设置为 false，则标签页将显示为已停用状态，并且不会响应点击。

复制代码

package com.wn.androidcomposedemo1.basegoogle

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.PrimaryTabRow
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Tab
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.style.TextOverflow
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.wn.androidcomposedemo1.ui.theme.AndroidComposeDemo1Theme

/**
 * Author : wn
 * Email : maoning20080808@163.com
 * Date : 2026/6/28 19:36
 * Description : 标签页
 */
class TabActivity : ComponentActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            AndroidComposeDemo1Theme() {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    NavigationTabExample(modifier = Modifier.fillMaxSize())
                }
            }
        }
    }

    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun NavigationTabExample(modifier: Modifier){
        val navController = rememberNavController()
        val startDestination2 = Destination2.HOME
        var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination2.ordinal) }

        Scaffold(modifier = modifier) { contentPadding ->
            PrimaryTabRow(selectedTabIndex =  selectedDestination, modifier = Modifier.padding(contentPadding)) {
                Destination2.entries.forEachIndexed { index, destination2 ->
                    Tab(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination2.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(imageVector = destination2.icon,contentDescription = destination2.contentDescription,)
                        },
                        text = {
                            Text(
                                text = destination2.label,
                                maxLines = 2,
                                overflow = TextOverflow.Ellipsis
                            )
                        }
                    )
                }
            }
            AppNavHost(navController = navController, startDestination2 = startDestination2)
        }
    }

    @Composable
    fun AppNavHost(
        navController: NavHostController,
        startDestination2: Destination2
    ){
        NavHost(
            navController = navController,
            startDestination = startDestination2.route
        ){

            Destination2.entries.forEach { destination2 ->
                composable(destination2.route){
                    when(destination2){
                        Destination2.HOME -> Home2Screen()
                        Destination2.PERSON -> PersonScreen2()
                        Destination2.SETTING -> SettingScreen2()
                    }
                }
            }
        }
    }

    @Composable
    fun Home2Screen(){
        Box(modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center){
            Text("首页2")
        }
    }

    @Composable
    fun PersonScreen2(){
        Box(modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center){
            Text("个人页面2")
        }
    }

    @Composable
    fun SettingScreen2(){
        Box(modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center){
            Text("设置页面2")
        }
    }
}

enum class Destination2(
    val route : String,
    val label : String,
    val icon : ImageVector,
    val contentDescription: String
){
    HOME("home", "首页", Icons.Default.Home, "首页描述"),
    PERSON("person", "个人", Icons.Default.Person, "个人描述"),
    SETTING("setting", "设置", Icons.Default.Settings, "设置描述")
}

android compose Tab 标签页 使用

android compose Tab 标签页使用