Функция Tab

Функция Tab рисует одну вкладку внутри PrimaryTabRow или похожего ряда. Параметр selected отмечает, активна ли вкладка. Нажатие обрабатывает onClick, подпись передают в лямбду text. Иконку при необходимости задают в icon.

Синтаксис

Tab(
	selected = true,
	onClick = { },
	text = { Text("abcde") },
)

Параметры

Параметр	Описание
`selected`	Если `true`, вкладка выделена как текущая.
`onClick`	Лямбда без аргументов. Срабатывает при нажатии на вкладку.
`text`	Лямбда с подписью вкладки. Обычно внутри вызывают `Text`.
`icon`	Лямбда с иконкой над или рядом с текстом. Необязательный параметр.

Пример

Давайте поставим две вкладки в PrimaryTabRow:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.PrimaryTabRow
import androidx.compose.material3.Tab
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			var tab by remember { mutableIntStateOf(0) }
			PrimaryTabRow(selectedTabIndex = tab) {
				Tab(
					selected = tab == 0,
					onClick = { tab = 0 },
					text = { Text(text = "abcde") },
				)
				Tab(
					selected = tab == 1,
					onClick = { tab = 1 },
					text = { Text(text = "12345") },
				)
			}
		}
	}
}

На экране будет ряд из двух вкладок, первая выделена как выбранная.

Пример

Давайте переключим выбор на вторую вкладку:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.PrimaryTabRow
import androidx.compose.material3.Tab
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			var tab by remember { mutableIntStateOf(1) }
			Column {
				PrimaryTabRow(selectedTabIndex = tab) {
					Tab(
						selected = tab == 0,
						onClick = { tab = 0 },
						text = { Text(text = "abcde") },
					)
					Tab(
						selected = tab == 1,
						onClick = { tab = 1 },
						text = { Text(text = "12345") },
					)
				}
				Text(
					text = if (tab == 0) "abcde" else "12345",
				)
			}
		}
	}
}

На экране вторая вкладка будет активной, ниже появится текст "12345".

Смотрите также

функция PrimaryTabRow,
куда ставят вкладки Tab
функция SecondaryTabRow,
которая рисует вторичный стиль ряда
функция PrimaryScrollableTabRow,
которая прокручивает длинный ряд вкладок
функция Text,
которой пишут подпись вкладки