一个可定制的分割标签控件。可以与 TabView 一起使用，也可以单独使用。

功能

该包提供了一个基于 TabController 的高级分段控件小部件。

screen-20211007-171939_2
screen-20211007-170003_2

入门

要使用该包，请将依赖项添加到 pubspec.yaml 文件中。

dependencies:
  ...
  animated_segmented_tab_control: any

并导入库。

import 'package:animated_segmented_tab_control/animated_segmented_tab_control.dart';

用法

该包包含一个 SegmentedTabControl 小部件，它需要一个 SegmentTab 列表。

SegmentedTabControl(
  tabs: [
    SegmentTab(
      label: "Home".
    ),
  ],
)

SegmentedTabControl 还需要一个 TabController。您可以使用 DefaultTabController 提供它，或者实例化一个 TabController。

DefaultTabController(
  length: 2,
  SegmentedTabControl(
    tabs: [
      SegmentTab(
        label: "Home",
      ),
      SegmentTab(
        label: "Account",
      ),
    ],
  )
)

您可以更改整个小部件或单个标签。或组合它们。SegmentedTabControl 中提供的所有值都将被每个标签的值替换。

SegmentedTabControl(
  backgroundColor: Colors.grey.shade300,
  indicatorColor: Colors.orange.shade200,
  tabTextColor: Colors.black45,
  selectedTabTextColor: Colors.white,
  tabs: [
    SegmentTab(
      label: 'ACCOUNT',
      color: Colors.red.shade200,
    ),
    SegmentTab(
      label: 'HOME',
      backgroundColor: Colors.blue.shade100,
      selectedTextColor: Colors.black45,
      textColor: Colors.black26,
    ),
    const SegmentTab(label: 'NEW'),
  ],
),

更改跟踪逻辑与 TabBar 逻辑相同。

DefaultTabController.of(context).index

或者

_controller.index

您可以在此处找到更多示例：https://github.com/LanarsInc/animated-segmented-tab-control/tree/main/example

附加信息

如果您有任何想法或遇到 bug，请在 GitHub 页面上提交 issue：https://github.com/LanarsInc/animated-segmented-tab-control/issues

GitHub

https://github.com/LanarsInc/animated-segmented-tab-control