Функция SecondaryTabRow

Функция SecondaryTabRow рисует ряд вкладок во вторичном стиле Material3. Он менее акцентный, чем PrimaryTabRow. Активную вкладку задают через selectedTabIndex, вкладки передают в content функцией Tab.

Синтаксис

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

Параметры

Параметр	Описание
`selectedTabIndex`	Индекс выбранной вкладки, начиная с нуля.
`content`	Лямбда с вкладками `Tab` внутри TabRowScope.

Пример

Давайте выведем вторичный ряд из двух вкладок:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.SecondaryTabRow
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) }
			SecondaryTabRow(selectedTabIndex = tab) {
				Tab(
					selected = tab == 0,
					onClick = { tab = 0 },
					text = { Text(text = "abcde") },
				)
				Tab(
					selected = tab == 1,
					onClick = { tab = 1 },
					text = { Text(text = "12345") },
				)
			}
		}
	}
}

На экране появится вторичный ряд вкладок с более лёгким оформлением.

Пример

Давайте поставим ряд под заголовком в Column:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.SecondaryTabRow
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 {
				Text(text = "abcde")
				SecondaryTabRow(selectedTabIndex = tab) {
					Tab(
						selected = tab == 0,
						onClick = { tab = 0 },
						text = { Text(text = "abcde") },
					)
					Tab(
						selected = tab == 1,
						onClick = { tab = 1 },
						text = { Text(text = "12345") },
					)
				}
			}
		}
	}
}

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

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

функция PrimaryTabRow,
которая рисует основной стиль вкладок
функция Tab,
которой заполняют ряд
функция PrimaryScrollableTabRow,
когда вкладок больше, чем помещается на экране
функция Column,
куда ставят TabRow под заголовком