封装HiTab组件

hi_tab.dart

封装系统 TabBar 组件

class HiTab extends StatelessWidget {
  // TabBar 控制器
  final TabController controller;

  // label 字体和指示器的颜色
  final Color primary;

  // 未选择 label 的字体颜色
  final Color unselectedLabelColor;

  // Tab Widegt 数组
  final List tabs;

  // 字体大小
  final double fontSize;

  // 指示器大小
  final double borderWidth;

  // 指示器内边距
  final double insets;

  const HiTab(this.tabs,
      {Key key,
      this.controller,
      this.primary,
      this.unselectedLabelColor = Colors.grey,
      this.fontSize = 13,
      this.borderWidth = 2,
      this.insets = 15})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TabBar(
        controller: controller,
        // 是否允许滚动
        isScrollable: true,
        labelColor: primary,
        unselectedLabelColor: unselectedLabelColor,
        labelStyle: TextStyle(fontSize: fontSize),
        // 指示器
        indicator: UnderlineIndicator(
            strokeCap: StrokeCap.square,
            borderSide: BorderSide(color: primary, width: borderWidth),
            insets: EdgeInsets.only(left: insets, right: insets)),
        tabs: tabs);
  }
}

home_page.dart

应用主页

_tabBar() {
    return HiTab(
      categoryList.map<Tab>((tab) {
        return Tab(text: tab.name);
      }).toList(),
      controller: _controller,
      fontSize: 16,
      borderWidth: 3,
      unselectedLabelColor: Colors.black,
      insets: 13,
    );
  }