# TabBar
#### Что такое `TabBar`
`TabBar` в Flutter — это виджет, который позволяет создавать интерфейсы с вкладками. Он обычно используется вместе с `TabController` и `TabBarView`, чтобы переключаться между различными экранами или контентом.
#### Пример использования
Вот пример создания простого интерфейса с вкладками с использованием `TabBar`:
```dart
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),
),
),
],
),
),
);
}
}
```
#### Как работает код
1. **DefaultTabController**: Устанавливает `TabController` для управления состоянием вкладок.
2. **AppBar**: Содержит `TabBar`, который отображает вкладки.
3. **TabBarView**: Отображает содержимое каждой вкладки, соответствующее выбранной вкладке.
#### Все настройки `TabBar`
1. **required List\ tabs**
* **Описание**: Список вкладок, которые вы хотите отобразить.
* **Пример**:
```dart
tabs: [
Tab(text: 'Вкладка 1'),
Tab(text: 'Вкладка 2'),
Tab(text: 'Вкладка 3'),
]
```
2. **TabController? controller**
* **Описание**: Контроллер для управления состоянием вкладок. Если вы не укажете, будет использоваться `DefaultTabController`.
* **Пример**:
```dart
controller: TabController(length: 3, vsync: this) // Указание контроллера
```
3. **bool isScrollable**
* **Описание**: Указывает, можно ли прокручивать вкладки. По умолчанию — `false`.
* **Пример**:
```dart
isScrollable: true // Прокручиваемые вкладки
```
4. **EdgeInsetsGeometry? padding**
* **Описание**: Отступы вокруг вкладок.
* **Пример**:
```dart
padding: EdgeInsets.all(8.0) // Отступы
```
5. **Color? indicatorColor**
* **Описание**: Цвет индикатора (например, линии под текущей вкладкой).
* **Пример**:
```dart
indicatorColor: Colors.blue // Синий индикатор
```
6. **bool automaticIndicatorColorAdjustment**
* **Описание**: Автоматически изменяет цвет индикатора в зависимости от цвета текста вкладки. По умолчанию — `true`.
* **Пример**:
```dart
automaticIndicatorColorAdjustment: false // Отключение автоматической настройки цвета
```
7. **double indicatorWeight**
* **Описание**: Толщина индикатора.
* **Пример**:
```dart
indicatorWeight: 4.0 // Увеличенная толщина индикатора
```
8. **EdgeInsetsGeometry indicatorPadding**
* **Описание**: Отступы вокруг индикатора.
* **Пример**:
```dart
indicatorPadding: EdgeInsets.symmetric(horizontal: 20.0) // Горизонтальные отступы
```
9. **Decoration? indicator**
* **Описание**: Декорация для индикатора, позволяющая использовать произвольные стили.
* **Пример**:
```dart
indicator: BoxDecoration(
color: Colors.green, // Цвет индикатора
borderRadius: BorderRadius.circular(10.0), // Закругленные углы
)
```
10. **TabBarIndicatorSize? indicatorSize**
* **Описание**: Размер индикатора (по ширине вкладки или по ширине текста).
* **Пример**:
```dart
indicatorSize: TabBarIndicatorSize.tab // Индикатор по ширине вкладки
```
11. **Color? dividerColor**
* **Описание**: Цвет разделителя между вкладками.
* **Пример**:
```dart
dividerColor: Colors.grey // Серый разделитель
```
12. **double? dividerHeight**
* **Описание**: Высота разделителя между вкладками.
* **Пример**:
```dart
dividerHeight: 1.0 // Высота 1 пиксель
```
13. **Color? labelColor**
* **Описание**: Цвет текста активной вкладки.
* **Пример**:
```dart
labelColor: Colors.blue // Синий цвет текста активной вкладки
```
14. **TextStyle? labelStyle**
* **Описание**: Стиль текста активной вкладки.
* **Пример**:
```dart
labelStyle: TextStyle(fontWeight: FontWeight.bold) // Жирный текст
```
15. **EdgeInsetsGeometry? labelPadding**
* **Описание**: Отступы вокруг текста активной вкладки.
* **Пример**:
```dart
labelPadding: EdgeInsets.symmetric(horizontal: 8.0) // Горизонтальные отступы
```
16. **Color? unselectedLabelColor**
* **Описание**: Цвет текста неактивных вкладок.
* **Пример**:
```dart
unselectedLabelColor: Colors.grey // Серый цвет текста неактивных вкладок
```
17. **TextStyle? unselectedLabelStyle**
* **Описание**: Стиль текста неактивных вкладок.
* **Пример**:
```dart
unselectedLabelStyle: TextStyle(fontStyle: FontStyle.italic) // Курсив
```
18. **DragStartBehavior dragStartBehavior**
* **Описание**: Поведение начала перетаскивания для вкладок. По умолчанию — `DragStartBehavior.start`.
* **Пример**:
```dart
dragStartBehavior: DragStartBehavior.down // Начало перетаскивания вниз
```
19. **WidgetStateProperty\? overlayColor**
* **Описание**: Цвет наложения при взаимодействии с вкладкой.
* **Пример**:
```dart
overlayColor: MaterialStateProperty.all(Colors.blue.withOpacity(0.2)) // Полупрозрачное наложение
```
20. **MouseCursor? mouseCursor**
* **Описание**: Указатель мыши при наведении на вкладку.
* **Пример**:
```dart
mouseCursor: SystemMouseCursors.click // Указатель "клик"
```
21. **bool? enableFeedback**
* **Описание**: Включает или отключает обратную связь при нажатии на вкладку. По умолчанию — `true`.
* **Пример**:
```dart
enableFeedback: false // Отключение обратной связи
```
22. **void Function(int)? onTap**
* **Описание**: Обработчик нажатия на вкладку.
* **Пример**:
```dart
onTap: (index) {
print('Tapped tab: $index'); // Вывод индекса нажатой вкладки
}
```
23. **ScrollPhysics? physics**
* **Описание**: Физика прокрутки для вкладок.
* **Пример**:
```dart
physics: BouncingScrollPhysics() // Эффект отскока при прокрутке
```
24. **InteractiveInkFeatureFactory? splashFactory**
* **Описание**: Фабрика для создания эффекта ряби при нажатии.
* **Пример**:
```dart
splashFactory: InkRipple.splashFactory // Эффект ряби
```
25. **BorderRadius? splashBorderRadius**
* **Описание**: Закругленные углы для эффекта ряби.
* **Пример**:
```dart
splashBorderRadius: BorderRadius.circular(10.0) // Закругление ряби
```
26. **TabAlignment? tabAlignment**
* **Описание**: Выравнивание вкладок (по центру, по левому или правому краю).
* **Пример**:
```dart
tabAlignment: TabAlignment.center // Центрированное выравнивание
```
27. **TextScaler? textScaler**
* **Описание**: Масштабирование текста для вкладок.
* **Пример**:
```dart
textScaler: TextScaler(); // Пример использования масштабирования текста
```
#### Заключение
`TabBar` — мощный инструмент для создания навигации с вкладками в приложениях Flutter. Используя его настройки, вы можете настраивать внешний вид и поведение вкладок, чтобы соответствовать требованиям вашего приложения.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://infinitys-organization-4.gitbook.io/flutter/flutter-widgets/navigaciya/tabbar.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
