Виджет TabBarView

Виджет TabBarView листает экраны вкладок синхронно с TabBar. Страницы передают в children, тот же порядок, что у Tab в TabBar, контроллер - в controller. Длина children должна совпадать с length у TabController.

Синтаксис

TabBarView(
	children: [
		Center(child: Text('abcde')),
		Center(child: Text('12345')),
	],
)

Параметры

Параметр	Описание
`children`	Список виджетов, по одному на вкладку.
`controller`	`TabController`, общий с `TabBar`.
`physics`	Правила прокрутки между вкладками.

Пример

Давайте свяжем TabBar и TabBarView:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: DefaultTabController(
				length: 2,
				child: Scaffold(
					appBar: AppBar(
						bottom: TabBar(
							tabs: [
								Tab(text: 'abcde'),
								Tab(text: '12345'),
							],
						),
					),
					body: TabBarView(
						children: [
							Center(child: Text('11111')),
							Center(child: Text('22222')),
						],
					),
				),
			),
		),
	);
}

Свайп влево-вправо переключает экраны и подсветку вкладок.

Пример

Давайте положим ListView на первую вкладку:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: DefaultTabController(
				length: 2,
				child: Scaffold(
					appBar: AppBar(
						bottom: TabBar(
							tabs: [Tab(text: 'abcde'), Tab(text: '12345')],
						),
					),
					body: TabBarView(
						children: [
							ListView(children: [Text('11111'), Text('22222')]),
							Center(child: Text('abcde')),
						],
					),
				),
			),
		),
	);
}

На первой вкладке список прокручивается внутри TabBarView.

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

виджет TabBar,
который переключает индекс TabBarView
виджет DefaultTabController,
который создаёт общий TabController
класс TabController,
которым читают index текущей вкладки
виджет Tab,
который задаёт подписи вкладок