Flutter圆角标签栏插件rounded_tabbar_widget的使用

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

Flutter圆角标签栏插件rounded_tabbar_widget的使用

rounded_tabbar_widget 是一个简单的Flutter包，用于创建带有自定义Tabbar的TabBarView布局。该插件支持页面滚动，并允许您自定义Tab按钮的布局。

如何使用它

使用方法非常简单，只需使用以下代码：

RoundedTabbarWidget(
  tabIcons: [
    Icons.home,       // 首页图标
    Icons.favorite,   // 收藏图标
    Icons.chat,       // 聊天图标
    Icons.person,     // 个人资料图标
  ],
  pages: [
    HomePageWidget(),        // 首页页面
    FavoritePageWidget(),    // 收藏页面
    MessagesPageWidget(),    // 聊天页面
    ProfilePageWidget(),     // 个人资料页面
  ],
  selectedIndex: 0,          // 初始选中的索引
  onTabItemIndexChanged: (int index) {
    print('Index: $index');  // 当选项卡改变时打印当前索引
  },
),

参数说明

参数 描述 默认值
onTabItemIndexChanged 返回当前选项卡索引的完成处理器 (int index) {}
tabIcons 选项卡图标的列表 传递 IconData 列表
pages 选项卡页面的列表 传递 Tab 小部件列表
selectedIndex 初始选中的选项卡页面索引 可选参数
itemNormalColor 正常状态下选项卡项的颜色 可选参数
itemSelectedColor 选中状态下选项卡项的颜色 可选参数
tabBarBackgroundColor 选项卡背景颜色 可选参数

请注意，页面和tabIcons的数量应该相等。

完整示例Demo

以下是完整的示例代码，演示如何使用 rounded_tabbar_widget 插件：

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

// 假设这些是你的页面小部件
class HomePageWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text('Home Page'));
  }
}

class FavoritePageWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text('Favorite Page'));
  }
}

class MessagesPageWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text('Messages Page'));
  }
}

class ProfilePageWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text('Profile Page'));
  }
}

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: RoundedTabbarWidget(
      itemNormalColor: Colors.lightBlue[300],  // 正常状态下的颜色
      itemSelectedColor: Colors.lightBlue[900], // 选中状态下的颜色
      tabBarBackgroundColor: Colors.lightBlue[100], // 选项卡背景颜色
      tabIcons: [
        Icons.home,       // 首页图标
        Icons.favorite,   // 收藏图标
        Icons.chat,       // 聊天图标
        Icons.person,     // 个人资料图标
      ],
      pages: [
        HomePageWidget(),        // 首页页面
        FavoritePageWidget(),    // 收藏页面
        MessagesPageWidget(),    // 聊天页面
        ProfilePageWidget(),     // 个人资料页面
      ],
      selectedIndex: 0,          // 初始选中的索引
      onTabItemIndexChanged: (int index) {
        print('Index: $index');  // 当选项卡改变时打印当前索引
      },
    ),
  ));
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何使用 rounded_tabbar_widget 插件的 Flutter 代码示例。这个插件允许你创建一个具有圆角的标签栏。首先，你需要确保在 pubspec.yaml 文件中添加了该插件的依赖项：

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

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

接下来，你可以在你的 Flutter 应用中使用 RoundedTabBarWidget。下面是一个完整的示例代码：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;

  final List<Widget> _children = [
    Center(child: Text('First Tab')),
    Center(child: Text('Second Tab')),
    Center(child: Text('Third Tab')),
  ];

  void _onTabSelected(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rounded TabBar Demo'),
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(50), // Adjust the height as needed
          child: RoundedTabBarWidget(
            items: [
              Tab(icon: Icon(Icons.directions_car)),
              Tab(icon: Icon(Icons.directions_transit)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],
            onTabSelected: _onTabSelected,
            initialIndex: _selectedIndex,
            backgroundColor: Colors.white,
            indicatorColor: Colors.blue,
            indicatorWeight: 3.0,
            borderRadius: BorderRadius.circular(20.0), // Adjust the border radius as needed
            unselectedLabelColor: Colors.grey,
            unselectedIconColor: Colors.grey,
          ),
        ),
      ),
      body: Center(
        child: _children[_selectedIndex],
      ),
    );
  }
}

代码解释：

  1. 依赖项：

    • 在 pubspec.yaml 中添加 rounded_tabbar_widget 依赖项。

  2. 导入包：

    • 在你的 Dart 文件中导入 rounded_tabbar_widget 包。

  3. 应用结构：

    • MyApp 是应用的主入口。
    • MyHomePage 是主页，包含状态管理和标签栏逻辑。

  4. 标签栏：

    • 使用 RoundedTabBarWidget 创建标签栏。
    • 配置标签项 (Tab)，每个标签包含一个图标。
    • 设置标签栏的初始索引、背景颜色、指示器颜色、指示器粗细和圆角半径等属性。

  5. 标签切换：

    • 使用 _onTabSelected 方法处理标签切换。
    • 根据选中的索引显示相应的内容。

这个示例展示了如何使用 rounded_tabbar_widget 插件创建一个具有圆角的标签栏，并处理标签切换事件。你可以根据需要进一步自定义标签栏的样式和行为。

回到顶部