Flutter切换栏组件插件toggle_bar的使用

插件说明

toggle_bar 是一个用于在 Flutter 中展示可自定义切换栏的 Dart 包。它支持 iOS 和 Android 平台。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  toggle_bar: ^1.0.0

然后运行以下命令以获取依赖：

flutter pub get

使用

以下是一个简单的使用示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      debugShowCheckedModeBanner: false,
      home: MyHomePage(title: 'Toggle Bar Example'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 定义标签数组
  List<String> labels = ["Apples", "Bananas", "Oranges", "Papayas"];
  
  // 当前选中的索引
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            // 使用 ToggleBar 组件
            ToggleBar(
              labels: labels,
              backgroundColor: Colors.grey[800], // 背景颜色
              onSelectionUpdated: (index) => setState(() => currentIndex = index), // 更新选中状态
            ),
            SizedBox(
              height: 300,
            ),
            // 显示当前选中的标签
            Text(
              labels[currentIndex],
              style: Theme.of(context).textTheme.display1,
            )
          ],
        ),
      ),
    );
  }
}

参数说明

以下是 ToggleBar 的参数列表及其含义：

[@required](/user/required) List<String> labels; // 必填，切换栏的标签数组
Color backgroundColor; // 切换栏的背景颜色，默认为白色
Color selectedTabColor; // 选中标签的背景颜色，默认为蓝色
Color selectedTextColor; // 选中标签的文字颜色，默认为白色
Color textColor; // 未选中标签的文字颜色，默认为黑色
BoxBorder backgroundBorder; // 切换栏的边框样式，默认无边框
TextStyle labelTextStyle; // 标签文字的样式，默认为系统默认样式
Function(int) onSelectionUpdated; // 当用户选择不同的标签时触发的回调函数