Функция PrimaryTabRow

Функция PrimaryTabRow рисует ряд вкладок в основном стиле Material3. Индекс выбранной вкладки передают в selectedTabIndex. Сами вкладки - дочерние элементы в лямбде content, обычно функции Tab.

Синтаксис

PrimaryTabRow(selectedTabIndex = 0) {
	Tab(...)
	Tab(...)
}

Параметры

Параметр	Описание
`selectedTabIndex`	Номер активной вкладки, считая с нуля. Должен совпадать с `selected` у одной из `Tab` внутри ряда.
`content`	Лямбда с вкладками. Приёмник - интерфейс TabRowScope, внутри вызывают `Tab`.

Пример

Давайте выведем два таба с подписями:

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(0) }
			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".

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

функция Tab,
которой рисуют одну вкладку в ряду
функция SecondaryTabRow,
которая даёт вторичный стиль вкладок
функция PrimaryScrollableTabRow,
которая прокручивает длинный список табов
функция Scaffold,
под верхней панелью которого ставят TabRow