🧩TabBar
Что такое TabBar
TabBarTabBar в Flutter — это виджет, который позволяет создавать интерфейсы с вкладками. Он обычно используется вместе с TabController и TabBarView, чтобы переключаться между различными экранами или контентом.
Пример использования
Вот пример создания простого интерфейса с вкладками с использованием TabBar:
import 'package:flutter/material.dart';
class TabBarExample extends StatelessWidget {
const TabBarExample({super.key});
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3, // Количество вкладок
child: Scaffold(
appBar: AppBar(
title: const Text('TabBar Example'),
bottom: const TabBar(
tabs: [
Tab(text: 'Вкладка 1'),
Tab(text: 'Вкладка 2'),
Tab(text: 'Вкладка 3'),
],
),
),
body: const TabBarView(
children: [
Center(
child: Text(
'Содержимое Вкладки 1',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.red),
),
),
Center(
child: Text('Содержимое Вкладки 2', style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.green),
),),
Center(
child: Text('Содержимое Вкладки 3', style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.indigo),
),
),
],
),
),
);
}
}Как работает код
DefaultTabController: Устанавливает
TabControllerдля управления состоянием вкладок.AppBar: Содержит
TabBar, который отображает вкладки.TabBarView: Отображает содержимое каждой вкладки, соответствующее выбранной вкладке.
Все настройки TabBar
TabBarrequired List<Widget> tabs
Описание: Список вкладок, которые вы хотите отобразить.
Пример:
tabs: [ Tab(text: 'Вкладка 1'), Tab(text: 'Вкладка 2'), Tab(text: 'Вкладка 3'), ]
TabController? controller
Описание: Контроллер для управления состоянием вкладок. Если вы не укажете, будет использоваться
DefaultTabController.Пример:
controller: TabController(length: 3, vsync: this) // Указание контроллера
bool isScrollable
Описание: Указывает, можно ли прокручивать вкладки. По умолчанию —
false.Пример:
isScrollable: true // Прокручиваемые вкладки
EdgeInsetsGeometry? padding
Описание: Отступы вокруг вкладок.
Пример:
padding: EdgeInsets.all(8.0) // Отступы
Color? indicatorColor
Описание: Цвет индикатора (например, линии под текущей вкладкой).
Пример:
indicatorColor: Colors.blue // Синий индикатор
bool automaticIndicatorColorAdjustment
Описание: Автоматически изменяет цвет индикатора в зависимости от цвета текста вкладки. По умолчанию —
true.Пример:
automaticIndicatorColorAdjustment: false // Отключение автоматической настройки цвета
double indicatorWeight
Описание: Толщина индикатора.
Пример:
indicatorWeight: 4.0 // Увеличенная толщина индикатора
EdgeInsetsGeometry indicatorPadding
Описание: Отступы вокруг индикатора.
Пример:
indicatorPadding: EdgeInsets.symmetric(horizontal: 20.0) // Горизонтальные отступы
Decoration? indicator
Описание: Декорация для индикатора, позволяющая использовать произвольные стили.
Пример:
indicator: BoxDecoration( color: Colors.green, // Цвет индикатора borderRadius: BorderRadius.circular(10.0), // Закругленные углы )
TabBarIndicatorSize? indicatorSize
Описание: Размер индикатора (по ширине вкладки или по ширине текста).
Пример:
indicatorSize: TabBarIndicatorSize.tab // Индикатор по ширине вкладки
Color? dividerColor
Описание: Цвет разделителя между вкладками.
Пример:
dividerColor: Colors.grey // Серый разделитель
double? dividerHeight
Описание: Высота разделителя между вкладками.
Пример:
dividerHeight: 1.0 // Высота 1 пиксель
Color? labelColor
Описание: Цвет текста активной вкладки.
Пример:
labelColor: Colors.blue // Синий цвет текста активной вкладки
TextStyle? labelStyle
Описание: Стиль текста активной вкладки.
Пример:
labelStyle: TextStyle(fontWeight: FontWeight.bold) // Жирный текст
EdgeInsetsGeometry? labelPadding
Описание: Отступы вокруг текста активной вкладки.
Пример:
labelPadding: EdgeInsets.symmetric(horizontal: 8.0) // Горизонтальные отступы
Color? unselectedLabelColor
Описание: Цвет текста неактивных вкладок.
Пример:
unselectedLabelColor: Colors.grey // Серый цвет текста неактивных вкладок
TextStyle? unselectedLabelStyle
Описание: Стиль текста неактивных вкладок.
Пример:
unselectedLabelStyle: TextStyle(fontStyle: FontStyle.italic) // Курсив
DragStartBehavior dragStartBehavior
Описание: Поведение начала перетаскивания для вкладок. По умолчанию —
DragStartBehavior.start.Пример:
dragStartBehavior: DragStartBehavior.down // Начало перетаскивания вниз
WidgetStateProperty<Color?>? overlayColor
Описание: Цвет наложения при взаимодействии с вкладкой.
Пример:
overlayColor: MaterialStateProperty.all(Colors.blue.withOpacity(0.2)) // Полупрозрачное наложение
MouseCursor? mouseCursor
Описание: Указатель мыши при наведении на вкладку.
Пример:
mouseCursor: SystemMouseCursors.click // Указатель "клик"
bool? enableFeedback
Описание: Включает или отключает обратную связь при нажатии на вкладку. По умолчанию —
true.Пример:
enableFeedback: false // Отключение обратной связи
void Function(int)? onTap
Описание: Обработчик нажатия на вкладку.
Пример:
onTap: (index) { print('Tapped tab: $index'); // Вывод индекса нажатой вкладки }
ScrollPhysics? physics
Описание: Физика прокрутки для вкладок.
Пример:
physics: BouncingScrollPhysics() // Эффект отскока при прокрутке
InteractiveInkFeatureFactory? splashFactory
Описание: Фабрика для создания эффекта ряби при нажатии.
Пример:
splashFactory: InkRipple.splashFactory // Эффект ряби
BorderRadius? splashBorderRadius
Описание: Закругленные углы для эффекта ряби.
Пример:
splashBorderRadius: BorderRadius.circular(10.0) // Закругление ряби
TabAlignment? tabAlignment
Описание: Выравнивание вкладок (по центру, по левому или правому краю).
Пример:
tabAlignment: TabAlignment.center // Центрированное выравнивание
TextScaler? textScaler
Описание: Масштабирование текста для вкладок.
Пример:
textScaler: TextScaler(); // Пример использования масштабирования текста
Заключение
TabBar — мощный инструмент для создания навигации с вкладками в приложениях Flutter. Используя его настройки, вы можете настраивать внешний вид и поведение вкладок, чтобы соответствовать требованиям вашего приложения.
Last updated