# flutter_tabbar

**Repository Path**: syymayun/flutter_tabbar

## Basic Information

- **Project Name**: flutter_tabbar
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-16
- **Last Updated**: 2026-07-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 钉钉风格可编辑底部 TabBar

仿钉钉 App 底部导航栏编辑功能的 Flutter 项目。支持固定 Tab + 可编辑 Tab + "更多"功能池，提供点击添加/删除和长按拖拽排序等交互，配置本地持久化。

## 功能

- **固定 Tab**（3 个）：首页、消息、工作台，不可编辑
- **可编辑 Tab**（最多 2 个）：从 9 个功能池项中选择，支持添加、删除、拖拽替换
- **"更多"面板**：功能池菜单，编辑模式下可拖拽排序
- **四种拖拽方向**：TabBar 内部交换、面板→TabBar 替换、TabBar→面板移除、面板内部排序
- **编辑态动画**：抖动效果、拖拽反馈、空位占位符
- **本地持久化**：通过 SharedPreferences 保存配置，重启恢复

## 技术栈

- Flutter 3.x / Dart 3.10+
- Provider 状态管理
- SharedPreferences 本地存储

## 项目结构

```
lib/
├── app/                 # 应用入口、路由、主题
│   ├── app.dart
│   ├── routes.dart
│   └── theme.dart
├── models/              # 数据模型
│   ├── tab_item.dart    # Tab 项模型
│   └── all_tabs.dart    # 全部 Tab 静态定义
├── providers/           # 状态管理
│   └── tab_provider.dart
├── services/            # 服务层
│   ├── tab_config_service.dart   # 持久化
│   └── tab_page_registry.dart    # 页面注册中心
├── constants/           # UI 常量
│   └── tab_constants.dart
├── components/          # 可复用组件
│   ├── ding_tab_bar/    # 底部导航栏
│   ├── ding_more_panel/ # 功能池面板
│   ├── auto_scroll_mixin.dart
│   └── jiggle_widget.dart
└── pages/               # 页面
    ├── main_page.dart   # 主页面（核心）
    └── ...              # 各 Tab 对应页面
```

## 运行

```bash
flutter pub get
flutter run
```

## 参考

钉钉 App 底部导航栏交互设计。