Flutter自定义标签栏插件flutter_custom_tab_bar的使用

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

Flutter自定义标签栏插件flutter_custom_tab_bar的使用

Flutter自定义标签栏插件flutter_custom_tab_bar提供了一种灵活的方式来创建各种样式的标签栏。下面我们将展示如何使用这个插件，并提供一个完整的示例demo。

示例代码

首先，我们来看一下主应用文件main.dart的代码：

import 'package:example/pinned_linear_tab_bar_page.dart';
import 'package:flutter/material.dart';

// 导入不同类型的标签栏页面
import 'linear_tab_bar_page.dart';
import 'round_tab_bar_page.dart';
import 'standard_tab_bar_page.dart';
import 'vertical_round_tab_bar_page.dart';

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

class MyApp extends StatelessWidget {
  // 这个widget是应用程序的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;

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

class _MyHomePageState extends State<MyHomePage> {
  // 构建每个列表项的方法
  Widget _buildItem(BuildContext context, String title, Widget widget) {
    return InkWell(
      onTap: () {
        Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => widget));
      },
      child: Container(
        padding: EdgeInsets.all(10),
        child: Text(title),
      ),
    );
  }

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title!),
        ),
        body: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          // 创建标准标签栏页面的入口
          _buildItem(context, "Standard Tab Bar", StandardTabBarPage()),
          // 创建线性标签栏页面的入口
          _buildItem(context, "Linear Tab Bar", LinearTabBarPage()),
          // 创建固定线性标签栏页面的入口
          _buildItem(
              context, "Pinned Linear Tab Bar", PinnedLinearTabBarPage()),
          // 创建圆形标签栏页面的入口
          _buildItem(context, "Round Tab Bar", RoundTabBarPage()),
          // 创建垂直圆形标签栏页面的入口
          _buildItem(
              context, "Vertical Round Tab Bar", VerticalRoundTabBarPage()),
        ]));
  }
}

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

Harmonyos Next教程
1 回复

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


当然，我可以为你提供一个关于如何使用 flutter_custom_tab_bar 插件的示例代码。这个插件允许你创建高度自定义的标签栏。以下是一个简单的示例，展示如何在 Flutter 应用中使用 flutter_custom_tab_bar。

首先，确保在你的 pubspec.yaml 文件中添加 flutter_custom_tab_bar 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_custom_tab_bar: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 以获取依赖。

接下来是一个完整的示例代码，展示如何使用 flutter_custom_tab_bar：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Custom Tab Bar 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('Flutter Custom Tab Bar Demo'),
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(50),
          child: CustomTabBar(
            controller: _tabController,
            tabs: [
              CustomTab(
                icon: Icon(Icons.home),
                text: 'Home',
              ),
              CustomTab(
                icon: Icon(Icons.star),
                text: 'Favorites',
              ),
              CustomTab(
                icon: Icon(Icons.settings),
                text: 'Settings',
              ),
            ],
            indicator: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(10),
            ),
            labelStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w600),
            unselectedLabelStyle: TextStyle(fontSize: 14),
            labelPadding: EdgeInsets.symmetric(horizontal: 16),
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Center(child: Text('Home Tab')),
          Center(child: Text('Favorites Tab')),
          Center(child: Text('Settings Tab')),
        ],
      ),
    );
  }
}

在这个示例中：

  1. 依赖导入：首先导入 flutter_custom_tab_bar 包。
  2. 状态管理：在 _MyHomePageState 类中使用 TabController 来管理标签的切换。
  3. 自定义标签栏：使用 CustomTabBar 组件创建自定义标签栏，并配置其 tabs、indicator、labelStyle 等属性。
  4. 标签视图：使用 TabBarView 组件来显示与标签对应的视图。

这个示例展示了如何使用 flutter_custom_tab_bar 创建一个自定义的标签栏，并在标签栏下显示不同的视图。你可以根据需要进一步自定义标签栏的样式和行为。

回到顶部