• 顶部导航TabBar、TabBarView、DefaultTabController


    原文地址:https://www.cnblogs.com/upwgh/p/11369537.html

    TabBar:Tab页的选项组件,默认为水平排列。

    TabBarView:Tab页的内容容器,Tab页内容一般处理为随选项卡的改变而改变。

    TabController:TabBar和TabBarView的控制器,它是关联这两个组件的桥梁。

    TabBar组件常见属性
    属性名 类型 说明
    isScrollable bool 是否可以水平移动
    tabs List<Widget> Tab选项列表
    Tab组件常见属性
    属性名 类型 说明
    icon Widget Tab图标
    text String Tab文本
    TabBarView组件常见属性
    属性名 类型 说明
    controller TabController 指定视图的控制器
    children List<Widget> 视图组件的child为一个列表,一个选项卡对应一个视图

    上面我们说的TabController,与其并列的还有DefaultTabController,两者的区别是TabController一般放在有状态组件中使用,而DefaultTabController一般放在无状态组件中使用。

    下面通过DefalutTabController来关联TabBar和TabBarView来实现一个Demo:

    按 Ctrl+C 复制代码
    按 Ctrl+C 复制代码

    效果截图:

    接下来分别看一下DefaultTabController、TabBar、TabBarView的构造函数有什么:

    • DefaultTabController
    复制代码
      const DefaultTabController({
        Key key,
        @required this.length,
        this.initialIndex = 0,
        @required this.child,
      }) : assert(initialIndex != null),
           super(key: key);
    复制代码
    • TabBar
    复制代码
      const TabBar({
        Key key,
        @required this.tabs,//显示的标签内容,一般使用Tab对象,也可以是其他Widget
        this.controller,//TabController对象
        this.isScrollable = false,//是否可以滚动
        this.indicatorColor,//指示器颜色
        this.indicatorWeight = 2.0,//指示器的高度
        this.indicatorPadding = EdgeInsets.zero,//指示器底部的padding
        this.indicator,//指示器decoration,例如边框等
        this.indicatorSize,//指示器大小的计算方式,TabBarIndicatorSize.tab:跟每个tab等宽,TabBarIndicatorSize.label:跟文字等宽
        this.labelColor,//选中label的颜色
        this.labelStyle,//选中label的样式
        this.labelPadding,每个label的padding
        this.unselectedLabelColor,//未选中label的颜色
        this.unselectedLabelStyle,//未选中label的样式
      }) : assert(tabs != null),
           assert(isScrollable != null),
           assert(indicator != null || (indicatorWeight != null && indicatorWeight > 0.0)),
           assert(indicator != null || (indicatorPadding != null)),
           super(key: key);
    复制代码
    • TabBarView
      const TabBarView({
        Key key,
        @required this.children,//Tab页内容组件的数组集合
        this.controller,//TabController对象
        this.physics,
      }) : assert(children != null), super(key: key);

    总结一下使用吧:一般流程就是初始化tabs的List列表,先把选项卡的选项初始化出来,接下来就是DefaultTabController把TabBar和TabBarView关联起来,最后就是给TabBar和TabBarView设置各种属性来满足需求。

  • 相关阅读:
    ionic app打包和签名
    js时间戳与日期格式的相互转换
    js获取选中日期的当周的周一和周日
    Error occurred during initialization of VM Could not reserve enough space for 2097152KB object heap
    CSS媒体查询 @media
    [ng:areq] Argument 'XXXXCtrl' is not a function, got undefined
    plsql如何导出查询结果
    angularjs的$http请求方式
    JQuery请求数据的方式
    后台返回xml格式转json
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/11721582.html
Copyright © 2020-2023  润新知