导航栏

TabBar和TabBarView到底是什么关系呢,简而言之,TabBar就是导航栏,TabBarView就是导航栏当前所对应的内容区。

TabBar

TabBar 的定义如下:

const TabBar({
  Key key,
   this.tabs, // 子标签
  this.controller, // 控制器
  this.isScrollable = false, // 能否滑动, false:tab宽度则等比,true:tab宽度则包裹item
  this.indicatorColor, // 指示器颜色
  this.indicatorWeight = 2.0,
  this.indicatorPadding = EdgeInsets.zero,
  this.indicator,
  this.indicatorSize, // TabBarIndicatorSize.label:indicator与文字同宽,TabBarIndicatorSize.tab:与tab同宽
  this.labelColor, // 选中标签颜色
  this.labelStyle, // 选中标签样式
  this.labelPadding,
  this.unselectedLabelColor, // 未选中标签颜色
  this.unselectedLabelStyle,
  this.dragStartBehavior = DragStartBehavior.down,
  this.onTap,//点击事件
})

TabBarView

TabBarView 只是一个容器, 其定义如下:

const TabBarView({
  Key key,
   this.children, // 子widget
  this.controller, // 控制器
  this.physics,
  this.dragStartBehavior = DragStartBehavior.down,
})

联动使用

系统提供了一个 DefaultTabController,只需要把TabBar和TabBarView包裹起来就能实现联动

const DefaultTabController({
  Key key,
   this.length,
  this.initialIndex = 0,
   this.child,
})

实例:

import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
  
  createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
  final List<Tab> myTabs = <Tab>[
    new Tab(text: '语文'),
    new Tab(text: '数学'),
    new Tab(text: '英语'),
    new Tab(text: '化学'),
    new Tab(text: '物理'),
    new Tab(text: '政治'),
    new Tab(text: '经济'),
    new Tab(text: '体育'),
  ];
  
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: myTabs.length,
      child: new Scaffold(
        appBar: new AppBar(
          title: Text('首页'),
          bottom: new TabBar(
            tabs: myTabs,
            isScrollable: true,
          ),
        ),
        body: new TabBarView(
          children: myTabs.map((Tab tab) {
            return new Center(child: new Text(tab.text));
          }).toList(),
        ),
      ),
    );
  }
}

参考

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress