一统天下 flutter - widget 架构类: Scaffold 的 TabBar - 选项卡(基础)

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 架构类: Scaffold 的 TabBar - 选项卡(基础)

示例如下:

lib\widget\structure\scaffold_tab_bar.dart

/*
 * TabBar - 选项卡(一般在 Scaffold 中使用)
 *
 * TabBar - 选项卡整体效果(其内的 Tab 用于定义每一个选项卡)
 * TabBarView - 每个选项卡对应的内容
 * TabPageSelector - 小圆圈指示器,用于提示当前是第几个 Tab 被选中了
 * TabController - 用于把 TabBar,TabBarView,TabPageSelector 关联起来
 *
 * 关于自定义 TabController 的用法,通过程序切换选项卡,以及如何保持每个 Tab 对应的内容的状态请参见 scaffold_tab_bar2.dart
 */

import 'package:flutter/material.dart';

class ScaffoldTabBarDemo extends StatefulWidget {
  const ScaffoldTabBarDemo({Key? key}) : super(key: key);

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

class _ScaffoldTabBarDemoState extends State<ScaffoldTabBarDemo> {

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(                            /// 默认 TabController(如果需要自己定义 TabController 的逻辑请参见 scaffold_tab_bar2.dart)
      length: 2,                                            /// Tab 的数量
      initialIndex: 0,                                      /// 默认选中的 Tab 的索引位置
      child: Scaffold(                                      /// 通常用 Scaffold,Scaffold 内包含 AppBar,AppBar 内包含 TabBar
        body: const TabBarView(                             /// 指定 TabBarView,其用于定义每个选项卡对应的内容
          children: [
            Text('left page'),
            Text('right page'),
          ],
        ),
        appBar: AppBar(
          toolbarHeight: 40,
          title: const Text('title'),
          centerTitle: true,
          /// PreferredSize 一般用于 AppBar 或 AppBar 的 bottom,其中 AppBar 已经实现了 PreferredSizeWidget
          bottom: PreferredSize(
            /// 经测试,
            /// 1、Tab.height 用于指定 Tab 的高度(其不包含 TabBar.indicatorWeight)
            /// 2、TabBar.indicatorWeight 用于指定 TabBar 的 indicatorWeight 的高度(当不使用自定义 indicator 时有效)
            /// 3、PreferredSize.preferredSize 用于指定 AppBar.bottom 的高度,其必须 >= Tab.height + TabBar.indicatorWeight
            /// 4、toolbar 和 tabbar 中间的空隙的高度为 PreferredSize.preferredSize - height - TabBar.indicatorWeight
            preferredSize: Size.fromHeight(44),
            child: ColoredBox(
              color: Colors.black,                          /// 用于定义选项卡栏的背景
              child: TabBar(                                /// TabBar,用于定义选项卡
                labelColor: Colors.white,                   /// 选中时,选项卡的文字或图标的颜色
                labelStyle: TextStyle(),                    /// 选中时,选项卡的文本样式
                unselectedLabelColor: Colors.grey,          /// 未选中时,选项卡的文字或图标的颜色
                unselectedLabelStyle: TextStyle(),          /// 未选中时,选项卡的文本样式

                indicatorColor: Colors.red,                 /// 选项卡下面指针的颜色
                indicatorSize: TabBarIndicatorSize.tab,     /// 选项卡下面指针的宽度
                                                            ///   TabBarIndicatorSize.tab - 和选项卡本身一样宽
                                                            ///   TabBarIndicatorSize.label - 和选项卡上的文字一样宽
                indicatorWeight: 4,                         /// 选项卡下面指针的高度
                indicatorPadding: EdgeInsets.zero,          /// 选项卡下面指针的边距

                /*
                indicator: BoxDecoration(                   /// 用于自定义选项卡指针,设置此属性后上面那些 indicatorXxx 就都无效了
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.green
                ),
                */

                padding: EdgeInsets.zero,                   /// 选项卡的边距
                isScrollable: false,                        /// 选项卡过多而显示不下时,是否允许左右滚动
                enableFeedback: true,                       /// 切换选项卡时是否允许力反馈(震动)

                tabs: [                                     /// Tab 对象集合
                  Tab(                                      /// 用于定义每一个选项卡
                    icon: Icon(Icons.home),                 /// 图标
                    iconMargin: EdgeInsets.zero,            /// 图标边距
                    text: "home",                           /// 文字
                    height: 40,                             /// 高度
                    child: null,                            /// 用于自定义 Tab
                  ),
                  Tab(
                      icon: Icon(Icons.message)
                  ),
                ],
              ),
            ),
          ),
        ),
        bottomNavigationBar: TabPageSelector(               /// 小圆圈指示器,用于提示当前是第几个 Tab 被选中了
          color: Colors.white,                              /// 小圆圈的颜色
          selectedColor: Colors.orange,                     /// 小圆圈被选中时的颜色
          indicatorSize: 40,                                /// 小圆圈的大小
          borderStyle: BorderStyle.solid,                   /// 小圆圈的边框样式(solid - 有边框,none - 无边框)
        ),
      ),
    );
  }
}

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

posted @ 2023-03-22 10:40  webabcd  阅读(211)  评论(0编辑  收藏  举报