nav 选项卡

Posted pp-pping

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了nav 选项卡相关的知识,希望对你有一定的参考价值。

代码:

import ‘package:flutter/material.dart‘;

class KeepAliveDemo extends StatefulWidget {
@override
_KeepAliveDemoState createState() => _KeepAliveDemoState();
}
//with类似多重继承
class _KeepAliveDemoState extends State<KeepAliveDemo> with SingleTickerProviderStateMixin {
TabController _controller;

@override
void initState(){

super.initState();
_controller = TabController(length: 3,vsync: this);//vsync 垂直
}
@override
void dispose(){
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘keepAlive‘),
elevation: 8.0,
bottom: TabBar(
controller: _controller,
tabs: <Widget>[
Tab(icon: Icon(Icons.directions_bike)),
Tab(icon: Icon(Icons.directions_boat)),
Tab(icon: Icon(Icons.directions_car)),
],
),
),
body: TabBarView(
controller: _controller,
children: <Widget>[
Text(‘111‘),
Text(‘222‘),
Text(‘333‘)
],
),
);
}
}
总结:

导航栏下嵌套tabController

final TabController _controller

 

 

多重继承with 关键字

初始化

_controller = TabController(length:xx,vsync:this)//vsync 继承于 SingleTickerProviderStateMixin 垂直布局

 

flutter 的tabController 是个模型 里面可以直接放数据 

appBar 放 tabController

appBar(

bottom:Tabbar(

controller : _controller

tabs:<widget>[//次数个数要和上面的length 个数对应

Tab(icon:xxx)//

Tab(icon:xxx)//

Tab(icon:xxx)//

]

)

)

以上是关于nav 选项卡的主要内容,如果未能解决你的问题,请参考以下文章

nav 选项卡

在切换到 UITabbarController 中的不同选项卡之前关闭当前选项卡上的推送视图控制器

Bootstrap nav-tabs 活动颜色为每个 Bootstrap 活动选项卡更改为不同的颜色

如果存在很多选项卡,导航选项卡会使用省略号调整宽度

Ruby Motion 中的导航 + 选项卡 - 加载时不显示选项卡标题

选项卡+轮播的实现