# ETabBar

**Repository Path**: qinshah/e_tab_bar

## Basic Information

- **Project Name**: ETabBar
- **Description**: 一个flutter的简单标签栏
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-19
- **Last Updated**: 2025-04-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ETabBar

一个用于Flutter的可自定义标签栏组件，支持使用任何Widget类型作为自定义指示器。轻松创建可滚动的标签，支持图标和平滑的页面过渡。

## 特性

- **自定义Widget指示器**：使用任何Widget作为标签指示器
- **可滚动标签**：支持固定和可滚动的标签布局
- **页面集成**：与PageView无缝集成，实现平滑过渡
- **图标支持**：轻松创建带有图标和文本的标签
- **灵活自定义**：控制对齐方式、方向和外观

## 安装

在项目的`pubspec.yaml`文件中添加以下依赖：

```yaml
dependencies:
  e_tab_bar: ^0.0.1
```

然后运行：

```bash
flutter pub get
```

## 使用方法

### 基本示例

```dart
import 'package:e_tab_bar/e_tab_bar.dart';
import 'package:flutter/material.dart';

// 创建一个控制器
final tabController = ETabBarCntlr();

// 创建标签栏
ETabBar(
  cntlr: tabController,
  children: [
    Container(
      width: 50,
      height: 40,
      alignment: Alignment.center,
      child: Text('标签 1'),
    ),
    Container(
      width: 50,
      height: 40,
      alignment: Alignment.center,
      child: Text('标签 2'),
    ),
    Container(
      width: 50,
      height: 40,
      alignment: Alignment.center,
      child: Text('标签 3'),
    ),
  ],
)
```

### 与PageView集成

```dart
// 创建控制器
final tabController = ETabBarCntlr();
final pageController = PageController();

Column(
  children: [
    // 标签栏
    ETabBar(
      cntlr: tabController,
      onTap: (index) {
        // 当点击标签时，切换页面
        tabController.animateChangePage(pageController, index);
      },
      children: [
        Text('页面 1'),
        Text('页面 2'),
        Text('页面 3'),
      ],
    ),
    // 页面视图
    Expanded(
      child: PageView(
        controller: pageController,
        // 当页面改变时，更新标签
        onPageChanged: tabController.onPageChanged,
        children: [
          Center(child: Text('第一页内容')),
          Center(child: Text('第二页内容')),
          Center(child: Text('第三页内容')),
        ],
      ),
    ),
  ],
)
```

### 自定义指示器

```dart
ETabBar(
  // 自定义指示器
  indicator: Container(
    height: 3,
    decoration: BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.circular(1.5),
    ),
  ),
  children: [
    Text('标签 1'),
    Text('标签 2'),
    Text('标签 3'),
  ],
)
```

## API参数说明

### ETabBar

| 参数 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| children | List<Widget> | 必填 | 要显示为标签的小部件列表 |
| cntlr | ETabBarCntlr? | null | 标签栏的控制器，如果未提供，将创建一个新的控制器 |
| indicator | Widget? | 默认蓝色指示器 | 用作指示器的小部件 |
| isScrollable | bool | false | 标签栏是否可滚动 |
| mainAxisSize | MainAxisSize | MainAxisSize.max | 主轴方向应占用的空间大小 |
| crossAxisAlignment | CrossAxisAlignment | CrossAxisAlignment.center | 子部件在交叉轴上的放置方式 |
| textDirection | TextDirection? | null | 标签栏的文本方向 |
| verticalDirection | VerticalDirection | VerticalDirection.down | 确定垂直布局子部件的顺序 |
| onTap | ValueChanged<int>? | null | 当标签被点击时调用 |
| direction | Axis | Axis.horizontal | 标签栏滚动的轴向 |

### ETabBarCntlr

| 方法/属性 | 类型 | 描述 |
|-----------|------|------|
| ETabBarCntlr({int initialIndex = 0}) | 构造函数 | 创建一个标签栏控制器，可选择初始索引 |
| index | int | 当前选中的标签索引 |
| setIndex(int value) | void | 设置当前标签索引 |
| animateChangePage(PageController pageCntlr, int index) | void | 使用提供的PageController动画切换到指定的页面索引 |
| onPageChanged(int value) | void | 当从PageView检测到页面更改时调用 |