Flutter垂直标签栏插件flutter_vertical_tab_bar的使用

Flutter垂直标签栏插件flutter_vertical_tab_bar的使用

Flutter 垂直标签栏

flutter_vertical_tab_bar 是一个为 Flutter 框架设计的垂直标签栏插件。它使您能够轻松地在 Flutter 应用程序中添加垂直标签栏。通过其简单的集成和可定制的设计，可以显著提升用户体验和界面灵活性。

截图

Alt 文本

特性

  • 🌟 简易集成：只需少量设置即可将垂直标签栏添加到您的 Flutter 应用程序中。
  • 🎨 自定义设计：可以根据您的应用程序主题来调整外观和行为。
  • ⚡ 高性能：优化性能以确保流畅的用户交互。

安装

在您的 pubspec.yaml 文件的 dependencies 部分添加以下行：

dependencies:
  flutter_vertical_tab_bar: ^0.0.1

示例

下面是一个完整的示例，展示了如何使用 flutter_vertical_tab_bar 插件创建一个带有垂直标签栏的应用程序。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: ExampleApp(),
    );
  }
}

class ExampleApp extends StatelessWidget {
  ExampleApp({super.key});

  // 定义标签项列表
  final List<String> tabItems = [
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("垂直标签栏"),
      ),
      body: VerticalTabs(
        // 设置背景颜色
        backgroundColor: Colors.white,
        // 设置标签栏背景颜色
        tabBackgroundColor: Colors.white,
        // 设置选中标签的文字样式
        selectedTabTextStyle: TextStyle(color: Colors.red),
        // 设置未选中标签的文字样式
        unSelectedTabTextStyle: TextStyle(color: Colors.grey),
        // 设置指示器颜色
        indicatorColor: Colors.red,
        // 设置标签宽度
        tabsWidth: 100,
        // 设置文本方向
        direction: TextDirection.ltr,
        // 设置指示器位置
        indicatorSide: IndicatorSide.start,
        // 设置内容滚动方向
        contentScrollAxis: Axis.vertical,
        // 设置页面切换动画时长
        changePageDuration: const Duration(milliseconds: 500),
        // 设置标签项
        tabs: tabItems,
        // 设置内容项
        contents: tabItems.map((e) => Center(child: Text(e))).toList(),
      ),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter项目中使用flutter_vertical_tab_bar插件的简单示例代码。这个插件允许你创建一个垂直的标签栏。

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

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

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

接下来，在你的Dart文件中，你可以这样使用flutter_vertical_tab_bar：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VerticalTabBarDemo(),
    );
  }
}

class VerticalTabBarDemo extends StatefulWidget {
  @override
  _VerticalTabBarDemoState createState() => _VerticalTabBarDemoState();
}

class _VerticalTabBarDemoState extends State<VerticalTabBarDemo> 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('Vertical Tab Bar Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
              child: VerticalTabBarView(
                controller: _tabController,
                children: [
                  Center(child: Text('Tab 1 Content')),
                  Center(child: Text('Tab 2 Content')),
                  Center(child: Text('Tab 3 Content')),
                ],
              ),
            ),
            SizedBox(height: 8),
            VerticalTabBar(
              controller: _tabController,
              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'),
              ],
              labelColor: Colors.blue,
              unselectedLabelColor: Colors.grey,
              indicator: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: Colors.blue.withOpacity(0.5),
              ),
              indicatorSize: TabBarIndicatorSize.label,
              isScrollable: true,
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖导入：首先导入flutter/material.dart和flutter_vertical_tab_bar/flutter_vertical_tab_bar.dart。

  2. 主应用：在MyApp类中，我们设置了应用的根页面为VerticalTabBarDemo。

  3. 状态管理：VerticalTabBarDemo是一个有状态的组件，用于管理TabController。

  4. TabController：在initState方法中初始化TabController，并在dispose方法中释放它。

  5. UI布局：

    • 使用Column布局来排列VerticalTabBarView和VerticalTabBar。
    • VerticalTabBarView显示与标签对应的内容。
    • VerticalTabBar定义垂直标签栏，包含图标和文本。

  6. 样式和属性：

    • 设置标签的选中颜色、未选中颜色等。
    • 设置指示器的样式和大小。
    • 允许标签栏滚动（如果标签数量较多）。

这样，你就可以在Flutter应用中实现一个垂直的标签栏。如果有更多需求或定制，可以参考flutter_vertical_tab_bar的文档进行进一步的配置。

回到顶部