TabBar 水平选择标签。
1、通常创建为AppBar的AppBar.bottom部分并与TabBarView结合使用;也可以与IndexedStack或PageView结合使用
2、如果TabBar 未提供TabController,则必须提供DefaultTabController作为父widget。选项卡控制器的TabController.length必须等于选项卡列表的长度。
构造函数
const TabBar({
Key key,
@required this.tabs,
this.controller,
this.isScrollable = false,
this.indicatorColor,
this.indicatorWeight = 2.0,
this.indicatorPadding = EdgeInsets.zero,
this.indicator,
this.indicatorSize,
this.labelColor,
this.labelStyle,
this.labelPadding,
this.unselectedLabelColor,
this.unselectedLabelStyle,
})
- tabs → List < Widget >
通常是两个或多个Tab小部件的列表 - controller → TabController
用于TabBar的选择和动画状态 如果不设置的话 请以DefaultTabController作为父widget - isScrollable → bool
TabBar是否可以水平滚动 - indicator → Decoration
定义所选选项卡指示器的外观 - indicatorColor → 颜色
显示在所选选项卡下方的线条颜色。如果此参数为null,则使用Theme的indicatorColor属性的值 - indicatorPadding → EdgeInsetsGeometry
显示在所选选项卡下方的线条的水平填充。对于isScrollable标签栏,指定kTabLabelPadding将使指示符与Tab小部件的选项卡文本以及除最短Tab.text值之外的所有文本对齐 - indicatorSize → TabBarIndicatorSize
定义如何计算选定选项卡指示符的大小 - indicatorWeight → double
显示在所选选项卡下方的线条粗细。此参数的值必须大于零 - labelColor → Color
所选标签标签的颜色 - labelPadding → EdgeInsetsGeometry
填充添加到每个选项卡标签 - labelStyle → TextStyle
所选标签标签的文本样式。如果unselectedLabelStyle为null,则此文本样式将用于选定和未选定的标签样式 - preferredSize → Size
高度取决于标签是否同时包含图标和文本的大小 - unselectedLabelColor → Color
未选定标签标签的颜色 - unselectedLabelStyle → TextStyle
未选中标签标签的文字样式
TabBarView 显示与当前所选选项卡对应的窗口小部件的页面视图。
1、通常与TabBar一起使用。
2、如果未提供TabController,则必须有DefaultTabController 作为父widget
构造函数
const TabBarView({
Key key,
@required this.children,
this.controller,
this.physics,
})
- children → List
与TabBar 对应的每一个view - controller → TabController
此小部件的选择和动画状态 如果不设置的话 请以DefaultTabController作为父widget - physics→ ScrollPhysics
页面视图应如何响应用户输入
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new HomePageState();
}
}
class HomePageState extends State<HomePage> {
@override
List<Tab> _tabs = [
new Tab(text: "test1",),
new Tab(text: "test2",),
new Tab(text: "test3",),
new Tab(text: "test4",),
new Tab(text: "test5",),
];
List<Widget> _tabViews = [
new Center(child: new Text("test1",style: new TextStyle(fontSize: 24),),),
new Center(child: new Text("test2",style: new TextStyle(fontSize: 24),),),
new Center(child: new Text("test3",style: new TextStyle(fontSize: 24),),),
new Center(child: new Text("test4",style: new TextStyle(fontSize: 24),),),
new Center(child: new Text("test5",style: new TextStyle(fontSize: 24),),),
];
Widget build(BuildContext context) {
return new DefaultTabController(length: 5, child: new Scaffold(
appBar: new AppBar(
title: new Text("TabBar and TabBarView"),
bottom: new TabBar(tabs: _tabs,
indicator: new BoxDecoration(image: new DecorationImage(image: NetworkImage("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3260609003,3965213395&fm=27&gp=0.jpg"))),
)
,
),
body: new TabBarView(children: _tabViews),
));
}
}