Flutter自定义TabBar视图插件customize_tabbar_view的使用

Flutter自定义TabBar视图插件customize_tabbar_view的使用

使用方法

具体的使用方法可以参考Example中的main.dart文件。

功能介绍

与系统默认的TabBar不同，customize_tabbar_view是通过绘制路径、剪切实现的菱形视觉效果。如果本例需求满足，您可以自行下载并编辑此插件。后期会逐步添加更多功能。

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用customize_tabbar_view插件。

import 'package:customize_tabbar_view/customize_tabbar.dart'; // 导入自定义TabBar库
import 'package:flutter/material.dart'; // 导入Flutter核心库

// 定义一个状态管理类
class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  // 初始化数据
  late final data = [
    {"title": "未处理", "id": "0", "isSelected": true}, // 默认选中第一个选项
    {"title": "已处理", "id": "1", "isSelected": false},
    {"title": "退单", "id": "2", "isSelected": false}
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('我的客户'), // 设置页面标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 自定义TabBar
            PreferredSize(
              child: CustomizeTabBar(
                size: const Size(375, 40), // TabBar的高度和宽度
                data: data, // 数据源
                unSelectedColor: Colors.white, // 未选中项的背景颜色
                selectColor: Colors.tealAccent, // 选中项的背景颜色
                unSelectedTextStyle: const TextStyle(
                  color: Colors.black, // 未选中项的文字颜色
                  fontSize: 15,
                ),
                selectTextStyle: const TextStyle(
                  color: Colors.white, // 选中项的文字颜色
                  fontSize: 15,
                ),
                item: 30.0, // 每个Tab的宽度
                tabBarTapped: (value) {
                  debugPrint("CustomizeTabBar---->${value['title']}"); // 打印选中的Tab标题
                },
              ),
              preferredSize: Size(375, 40), // 设置TabBar的高度
            ),
            const SizedBox(height: 20), // 添加间距
            Text("当前选中的Tab是: ${data.where((item) => item['isSelected'] == true).first['title']}"),
            // 显示当前选中的Tab标题
          ],
        ),
      ),
    );
  }
}

更多关于Flutter自定义TabBar视图插件customize_tabbar_view的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义TabBar视图插件customize_tabbar_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


customize_tabbar_view 是一个用于在 Flutter 中自定义 TabBar 和 TabView 的插件。它允许你创建具有自定义样式的 TabBar 和 TabView，以满足你的应用需求。以下是如何使用 customize_tabbar_view 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 customize_tabbar_view 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  customize_tabbar_view: ^latest_version

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入 customize_tabbar_view 插件：

import 'package:customize_tabbar_view/customize_tabbar_view.dart';

3. 使用 CustomizeTabBarView

CustomizeTabBarView 是一个组合了 TabBar 和 TabBarView 的组件。你可以通过传递 tabs 和 children 参数来创建自定义的 TabBar 和 TabView。

class MyTabbedPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Customize TabBar View Example'),
      ),
      body: CustomizeTabBarView(
        tabs: [
          Tab(text: 'Tab 1'),
          Tab(text: 'Tab 2'),
          Tab(text: 'Tab 3'),
        ],
        children: [
          Center(child: Text('Content of Tab 1')),
          Center(child: Text('Content of Tab 2')),
          Center(child: Text('Content of Tab 3')),
        ],
      ),
    );
  }
}

4. 自定义样式

你可以通过 CustomizeTabBarView 的属性来自定义 TabBar 和 TabView 的样式。例如，你可以设置 indicatorColor、labelColor、unselectedLabelColor 等属性来改变 TabBar 的外观。

CustomizeTabBarView(
  tabs: [
    Tab(text: 'Tab 1'),
    Tab(text: 'Tab 2'),
    Tab(text: 'Tab 3'),
  ],
  children: [
    Center(child: Text('Content of Tab 1')),
    Center(child: Text('Content of Tab 2')),
    Center(child: Text('Content of Tab 3')),
  ],
  indicatorColor: Colors.blue,
  labelColor: Colors.blue,
  unselectedLabelColor: Colors.grey,
  indicatorWeight: 4.0,
  indicatorPadding: EdgeInsets.symmetric(horizontal: 16.0),
);

5. 其他功能

CustomizeTabBarView 还支持其他一些功能，例如：

  • 自动调整 TabBar 宽度：通过设置 isScrollable 属性为 true，可以让 TabBar 在内容过多时自动滚动。
  • 自定义 TabBar 位置：通过 tabBarPosition 属性，你可以将 TabBar 放置在顶部、底部、左侧或右侧。
CustomizeTabBarView(
  tabs: [
    Tab(text: 'Tab 1'),
    Tab(text: 'Tab 2'),
    Tab(text: 'Tab 3'),
  ],
  children: [
    Center(child: Text('Content of Tab 1')),
    Center(child: Text('Content of Tab 2')),
    Center(child: Text('Content of Tab 3')),
  ],
  isScrollable: true,
  tabBarPosition: TabBarPosition.bottom,
);

6. 完整示例

以下是一个完整的示例，展示了如何使用 CustomizeTabBarView 插件：

import 'package:flutter/material.dart';
import 'package:customize_tabbar_view/customize_tabbar_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Customize TabBar View Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyTabbedPage(),
    );
  }
}

class MyTabbedPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Customize TabBar View Example'),
      ),
      body: CustomizeTabBarView(
        tabs: [
          Tab(text: 'Tab 1'),
          Tab(text: 'Tab 2'),
          Tab(text: 'Tab 3'),
        ],
        children: [
          Center(child: Text('Content of Tab 1')),
          Center(child: Text('Content of Tab 2')),
          Center(child: Text('Content of Tab 3')),
        ],
        indicatorColor: Colors.blue,
        labelColor: Colors.blue,
        unselectedLabelColor: Colors.grey,
        indicatorWeight: 4.0,
        indicatorPadding: EdgeInsets.symmetric(horizontal: 16.0),
        isScrollable: true,
        tabBarPosition: TabBarPosition.bottom,
      ),
    );
  }
}
回到顶部