Функция PrimaryScrollableTabRow

Функция PrimaryScrollableTabRow работает как PrimaryTabRow, но вкладки можно листать, если они не помещаются по ширине экрана. Индекс выбранной вкладки передают в selectedTabIndex. Вкладки в лямбде content задают через Tab.

Синтаксис

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

Параметры

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

Пример

Давайте выведем три длинные вкладки:

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

На экране ряд можно сдвинуть пальцем, если вкладки шире экрана.

Пример

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

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

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

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

функция PrimaryTabRow,
когда все вкладки помещаются без прокрутки
функция SecondaryTabRow,
которая даёт вторичный стиль ряда
функция Tab,
которой заполняют прокручиваемый ряд
функция Row,
которую TabRow использует внутри себя