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

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

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

flutter_point_tab_bar 是一个带有点指示器的TabBar小部件。它允许开发者创建具有不同样式的标签栏，特别是底部或顶部带有点指示器的效果。

Demo

使用方法

要在你的Flutter项目中使用这个插件，首先需要添加依赖到pubspec.yaml文件中：

dependencies:
  flutter_point_tab_bar: ^版本号

然后，在Dart代码中导入包：

import 'package:flutter_point_tab_bar/flutter_point_tab_bar.dart';

下面是一个简单的示例，展示了如何在TabBar中使用PointTabIndicator作为指示器：

TabBar(
    controller: _tabController,
    indicator: PointTabIndicator(
        position: PointTabIndicatorPosition.bottom, // 设置指示器位置
        color: Colors.white, // 指示器颜色
        insets: EdgeInsets.only(bottom: 6), // 距离边界的距离
    ),
    tabs: tabList.map((item) {
        return Tab(
            text: item, // 标签文本
        );
    }).toList(),
)

完整示例Demo

这里提供了一个更完整的示例程序，包括了基本的应用结构和TabBar的实现：

import 'package:flutter/material.dart';
// 确保已经正确添加了flutter_point_tab_bar的依赖并导入
// import 'package:flutter_point_tab_bar/flutter_point_tab_bar.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Point Tab Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              indicator: PointTabIndicator(
                position: PointTabIndicatorPosition.bottom,
                color: Colors.white,
                insets: EdgeInsets.only(bottom: 6),
              ),
              tabs: [
                Tab(text: "Tab 1"),
                Tab(text: "Tab 2"),
                Tab(text: "Tab 3"),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Center(child: Text("Content of Tab 1")),
              Center(child: Text("Content of Tab 2")),
              Center(child: Text("Content of Tab 3")),
            ],
          ),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用flutter_point_tab_bar插件的一个代码示例。flutter_point_tab_bar是一个自定义标签栏插件，可以为你的应用提供独特的导航体验。

首先，确保你已经在pubspec.yaml文件中添加了flutter_point_tab_bar的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_point_tab_bar: ^最新版本号  # 替换为最新的版本号

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

接下来，你可以在你的Flutter项目中按如下方式使用flutter_point_tab_bar：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Point Tab Bar Example'),
        ),
        body: DefaultTabController(
          length: 3,
          child: NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverOverlapAbsorber(
                  handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                  sliver: SliverAppBar(
                    title: Text('Tabs Demo'),
                    floating: true,
                    pinned: true,
                    snap: false,
                    expandedHeight: 150.0,
                    flexibleSpace: FlexibleSpaceBar(
                      centerTitle: true,
                      title: Text('Flutter Point Tab Bar'),
                      background: Image.network(
                        'https://via.placeholder.com/1500x500',
                        fit: BoxFit.cover,
                      ),
                    ),
                    bottom: TabBar(
                      tabs: [
                        Tab(
                          icon: Icon(Icons.directions_car),
                          text: 'Tab 1',
                        ),
                        Tab(
                          icon: Icon(Icons.directions_transit),
                          text: 'Tab 2',
                        ),
                        Tab(
                          icon: Icon(Icons.directions_bike),
                          text: 'Tab 3',
                        ),
                      ],
                      indicator: PointTabBarIndicator(
                        activeColor: Colors.blue,
                        inactiveColor: Colors.grey,
                        indicatorHeight: 4,
                        indicatorSize: PointTabBarIndicatorSize.large,
                      ),
                    ),
                  ),
                ),
              ];
            },
            body: TabBarView(
              children: [
                Center(child: Text('Tab 1 Content')),
                Center(child: Text('Tab 2 Content')),
                Center(child: Text('Tab 3 Content')),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

解释

  1. 依赖导入：首先，我们导入了flutter/material.dart和flutter_point_tab_bar/flutter_point_tab_bar.dart。
  2. TabBar：在TabBar中，我们定义了三个标签，每个标签都有一个图标和文本。
  3. PointTabBarIndicator：这是flutter_point_tab_bar插件提供的一个自定义指示器。你可以通过activeColor、inactiveColor、indicatorHeight和indicatorSize等属性来自定义它的外观。
  4. TabBarView：每个标签对应的内容在TabBarView中定义。

这样，你就可以在你的Flutter应用中实现一个带有自定义指示器的标签栏了。如果你希望进一步自定义PointTabBarIndicator或其他部分，可以参考flutter_point_tab_bar的官方文档和示例。

回到顶部