Flutter自定义TabBar插件ttab_bar的使用

发布于 1周前 作者 ionicwang 来自 Flutter

TTAB_BAR

  • Created by Rahmatulloh Kholmatov
  • Supported by Flucen

Features

  • A more customizable and minimalistic design, Flexible design and more efficiency.

Supported platforms

  • .
  • .
  • .
  • .
  • .

Parameters

  • tabs: Type - List<String>. Tab bar elements in String. .
  • tabBarColor: Type - Color. For tabBar background color. .
  • tappedTabTitleColor: Type - Color. For tapped tab title color. .
  • unTappedTabTitleColor: Type - Color. For untapped tab title color. .
  • initialTappedIndex: Type - int. For initial tapped tab index. .

Installing

  • ‘Add this command to terminal:’
  • For flutter projects
flutter pub add ttab_bar
  • For dart projects
dart pub add ttab_bar

Author

使用 ttab_bar 插件的完整示例

下面是一个完整的示例代码，展示如何在 Flutter 应用程序中使用 ttab_bar 插件。

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('ttab_bar 示例'),
            bottom: TabBar(
              tabs: [
                Tab(text: '首页'),
                Tab(text: '消息'),
                Tab(text: '设置'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('这是首页')),
              Center(child: Text('这是消息页')),
              Center(child: Text('这是设置页')),
            ],
          ),
        ),
      ),
    );
  }
}

ttab_bar_example.dart

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

class TTabBarExample extends StatefulWidget {
  @override
  _TTabBarExampleState createState() => _TTabBarExampleState();
}

class _TTabBarExampleState extends State<TTabBarExample> {
  int _currentIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ttab_bar 自定义示例'),
      ),
      body: Center(
        child: Text('当前选中的标签为: ${_currentIndex == 0 ? "首页" : _currentIndex == 1 ? "消息" : "设置"}'),
      ),
      bottomNavigationBar: TTabBar(
        tabs: ["首页", "消息", "设置"],
        initialTappedIndex: _currentIndex,
        onTap: (index) {
          _onItemTapped(index);
        },
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: TTabBarExample(),
  ));
}

以上代码展示了如何在 Flutter 中使用 ttab_bar 插件创建一个自定义的 TabBar。第一个示例展示了如何使用默认的 TabBar，第二个示例则展示了如何使用 ttab_bar 插件创建自定义的 TabBar。

</section>

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

1 回复

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


当然，下面是一个关于如何在Flutter中使用自定义TabBar插件ttab_bar的代码示例。假设你已经在pubspec.yaml文件中添加了ttab_bar依赖并运行了flutter pub get。

首先，确保你的pubspec.yaml中包含如下依赖：

dependencies:
  flutter:
    sdk: flutter
  ttab_bar: ^最新版本号 # 请替换为实际的最新版本号

然后，你可以按照以下步骤在你的Flutter应用中使用ttab_bar。

示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TTabBar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TTabBar Demo'),
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(kToolbarHeight),
          child: TTabBar(
            controller: _tabController,
            tabs: [
              TTab(
                icon: Icon(Icons.home),
                title: Text('Home'),
              ),
              TTab(
                icon: Icon(Icons.search),
                title: Text('Search'),
              ),
              TTab(
                icon: Icon(Icons.account_circle),
                title: Text('Profile'),
              ),
            ],
            indicator: TTabIndicator(
              color: Colors.blue,
              weight: 2.0,
              padding: EdgeInsets.symmetric(horizontal: 8.0),
            ),
            labelStyle: TextStyle(fontSize: 14),
            unselectedLabelStyle: TextStyle(fontSize: 14, color: Colors.grey),
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Center(child: Text('Home Tab')),
          Center(child: Text('Search Tab')),
          Center(child: Text('Profile Tab')),
        ],
      ),
    );
  }
}

代码解释

  1. 依赖导入：首先导入必要的包，包括flutter/material.dart和ttab_bar/ttab_bar.dart。

  2. 应用入口：在MyApp类中，设置应用的主题和主页。

  3. 主页：MyHomePage是一个有状态组件，它管理一个TabController来控制TabBar的选中状态。

  4. 初始化：在initState方法中初始化TabController。

  5. 资源释放：在dispose方法中释放TabController以避免内存泄漏。

  6. 构建UI：在build方法中构建整个UI，包括一个带有自定义TTabBar的AppBar和一个与TTabBar关联的TabBarView。

  7. 自定义TabBar：TTabBar接受多个TTab作为标签，并允许你自定义指示器（indicator）、标签样式等。

  8. TabBarView：TabBarView显示与TTabBar标签相对应的视图。

注意事项

  • 确保ttab_bar插件的最新版本与Flutter SDK兼容。
  • 根据实际需求调整TTabBar和TTab的参数。

这个示例展示了如何使用ttab_bar插件创建一个自定义的TabBar布局。你可以根据项目的具体需求进一步定制和扩展这个示例。

回到顶部