赞
踩
好记性不如烂笔头,所以做了一下总结和个人使用方法
大部分项目都会用到多个Tab切换功能,所以学会灵活使用TabBar 和TabBarView,对做项目会有很大的帮助,。
- TabBar({
- Key key,
- @required this.tabs,
- this.controller, //控制器
- this.isScrollable = false, //是否可以滚动,默认为 false(选项卡过多设置为true)
- this.indicatorColor,//指示器颜色
- this.indicatorWeight = 2.0,//指示器宽度
- this.indicatorPadding = EdgeInsets.zero,//指示器间距
- this.indicator,//自定义指示器
- this.indicatorSize,//指示器大小
- this.labelColor,//文字颜色
- this.labelStyle,//文字样式
- this.labelPadding,//文字间距
- this.unselectedLabelColor,//未选中 title 颜色
- this.unselectedLabelStyle,//未选中 title 样式
- this.dragStartBehavior = DragStartBehavior.start,//拖拽设置
- this.mouseCursor,//鼠标悬停(网页端)
- this.onTap,//点击事件
- this.physics,//滑动效果,如滑动到末端时,继续拉动,使用 ClampingScrollPhysics 实现Android下//微光效果。使用 BouncingScrollPhysics 实现iOS下弹性效果。
- })
- _tabController.addListener(() {
-
- print(this._tabController.index);//当前页面下标
- print(this._tabController.length);//长度
- print(this._tabController.previousIndex);//前一个页面的下标
- });
上图上代码
- class _MinePageState extends State<MinePage>
- with SingleTickerProviderStateMixin {//SingleTickerProviderStateMixin 一定要继承这个类,指利用with
- TabController _controller;//控制器
- @override
- void initState() {
- // TODO: implement initState
- super.initState();
- //初始化控制器length一定要对应不然会报错
- _controller = new TabController(vsync: this, length: 5);
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: AppBar(
- title: Text("Tabar"),
- bottom: _tabBar(),
- ),
- body: TabBarView(
- controller: _controller,
- children: [
- Center(
- child: Text(
- "1",
- ),
- ),
- Center(
- child: Text(
- "2",
- ),
- ),
- Center(
- child: Text(
- "3",
- ),
- ),
- Center(
- child: Text(
- "4",
- ),
- ),
- Center(
- child: Text(
- "5",
- ),
- )
- ],
- ),
- );
- }
-
- TabBar _tabBar() {
- return TabBar(
- controller: _controller,
- tabs: [
- Tab(
- text: "tab1",
- ),
- Tab(
- text: "tab2",
- ),
- Tab(
- text: "tab3",
- ),
- Tab(
- text: "tab4",
- ),
- Tab(
- text: "tab5",
- ),
- ],
- );
- }
- }
设计师可能会出一些比较体现自身价值的设计,这个时候就需要自定义一下儿东西了,废话不多说上菜单了。
- class _DataPageState extends State<DataPage>
- with AutomaticKeepAliveClientMixin, SingleTickerProviderStateMixin {
- @override
- bool get wantKeepAlive => true;
-
- TabController _tabController;
- int _select = 0;//选中tab小标
- @override
- void initState() {
- // TODO: implement initState
- super.initState();
- _tabController = new TabController(vsync: this, length: list.length);
- _tabController.addListener(() {
- setState(() {
- _select = _tabController.index;
- });
- });
- }
-
- @override
- Widget build(BuildContext context) {
- return Container(
- child: Scaffold(
- body: Column(
- children: [
- Container(
- margin: EdgeInsets.only(top: ScreeAdapter.getStatusBarHeight()),
- height: ScreeAdapter.setHeight(44),
- child: TabBar(
- indicatorColor: Colors.transparent,//指示器设置为透明色
- indicatorPadding: EdgeInsets.fromLTRB(20, 0, 20, 0),
- isScrollable: true,//设置可滑动
- controller: _tabController,
- onTap: (value) {
- setState(() {
- _select = value;
- });
- },
- tabs: tabs()),
- ),
- Expanded(
- flex: 1,
- child: TabBarView(
- controller: _tabController,
- children: _tabBarViews(),
- ),
- )
- ],
- )),
- );
- }
- //tab标题
- List<String> list = [
- "直播",
- "推荐",
- "热门",
- "追番",
- "影视",
- "其他",
- ];
- List<Widget> tabs() {
- List<Widget> listTab = [];
- for (int i = 0; i < list.length; i++) {
- listTab.add(
- Tab(
- child: Container(
- height: ScreeAdapter.setHeight(44),
- child: Stack(
- children: [
- Align(
- child: Text(
- "${list[i]}",
- style: TextStyle(
- color: _select == i ? Colors.black : Colors.black38),
- ),
- alignment: Alignment.center,
- ),
- Positioned(
- child: Icon(Icons.arrow_drop_up,
- color: _select == i ? Colors.red : Colors.white),
- bottom: 0,
- )
- ],
- ),
- )),
- );
- }
- return listTab;
- }
-
- List<Widget> _tabBarViews() {
- return list.map<Widget>((value) {
- return Center(
- child: Text(value),
- );
- }).toList();
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。