Flutter实现顶部导航栏功能
本文实例为大家分享了flutter实现顶部导航栏的具体代码，供大家参考，具体内容如下
import 'package:flutter/material.dart';
class appbardemopage extends statelesswidget {
const appbardemopage({key key}) : super(key: key);
@override
widget build(buildcontext context) {
return defaulttabcontroller(
//导航栏的长度
length: 4,
child: scaffold(
appbar: appbar(
title: text("appbardemopage"),
backgroundcolor: colors.red,
centertitle: true,
bottom: tabbar(
// isscrollable: true, //可滚动
indicatorcolor: colors.bluegrey, //指示器的颜色
labelcolor: colors.bluegrey, //选中文字颜色
unselectedlabelcolor: colors.white, //为选中文字颜色
// indicatorsize: tabbarindicatorsize.label, //指示器与文字等宽
tabs: <widget>[
tab(text: "热门"),
tab(text: "推荐"),
tab(text: "好友"),
tab(text: "动态"),
],
),
),
body: tabbarview(
children: <widget>[
container(
child: text("hello"),
),
listview(
children: <widget>[
listtile(
title: text("第二个tab"),
)
],
),
listview(
children: <widget>[
listtile(
title: text("第三个tab"),
)
],
),
listview(
children: <widget>[
listtile(
title: text("第四个tab"),
)
],
),
],
),
),
);
}
}如果底部导航栏和顶部导航栏同时存在的
在这里只写顶部导航栏的实现，底部的可以参照我之前的文章
import 'package:flutter/material.dart';
class categorypage extends statefulwidget {
categorypage({key key}) : super(key: key);
@override
_categorypagestate createstate() => _categorypagestate();
}
class _categorypagestate extends state<categorypage> {
@override
widget build(buildcontext context) {
return defaulttabcontroller(
length: 4,
child: scaffold(
appbar: appbar(
title: row(
children: <widget>[
expanded(
child: tabbar(
tabs: <widget>[
tab(text: "精选"),
tab(text: "电影"),
tab(text: "动漫"),
tab(text: "nba"),
],
),
)
],
),
),
body: tabbarview(
children: <widget>[
listview(
children: <widget>[
listtile(
title: text("第一个tab"),
)
],
),
listview(
children: <widget>[
listtile(
title: text("第二个tab"),
)
],
),
listview(
children: <widget>[
listtile(
title: text("第三个tab"),
)
],
),
listview(
children: <widget>[
listtile(
title: text("第四个tab"),
)
],
),
],
),
),
);
}
}这么写是对导航栏点击做的监听，实现效果一样
import 'package:flutter/material.dart';
class navbarpage extends statefulwidget {
navbarpage({key key}) : super(key: key);
@override
_navbarpagestate createstate() => _navbarpagestate();
}
class _navbarpagestate extends state<navbarpage>
with singletickerproviderstatemixin {
tabcontroller _tabcontroller;
@override
void initstate() {
super.initstate(); //length为导航栏的个数
_tabcontroller = new tabcontroller(vsync: this, length: 2);
_tabcontroller.addlistener(() {
print(_tabcontroller.index);//打印点击的索引
});
}
@override
widget build(buildcontext context) {
return scaffold(
appbar: appbar(
title: text("navbar"),
bottom: tabbar(
controller: this._tabcontroller,
tabs: <widget>[
tab(text: "热销"),
tab(text: "推荐"),
],
),
),
body: tabbarview(
controller: this._tabcontroller,
children: <widget>[
center(child: text("热销")),
center(child: text("推荐"))
],
));
}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。
看完文章，还可以用支付宝扫描下面的二维码领取一个支付宝红包，目前可领1-88元不等
除了扫码可以领取之外，大家还可以（复制 720087999 打开✔支付宝✔去搜索， h`o`n.g.包哪里来，动动手指就能领）。
看下图所示是好多参与这次活动领取红包的朋友：
