Flutter實(shí)現(xiàn)頂部導(dǎo)航欄功能
更新時(shí)間：2022年07月28日 15:05:51 作者：明知山_
這篇文章主要為大家詳細(xì)介紹了Flutter實(shí)現(xiàn)頂部導(dǎo)航欄功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Flutter實(shí)現(xiàn)頂部導(dǎo)航欄的具體代碼，供大家參考，具體內(nèi)容如下
import 'package:flutter/material.dart';
class AppBarDemoPage extends StatelessWidget {
? const AppBarDemoPage({Key key}) : super(key: key);
? @override
? Widget build(BuildContext context) {
? ? return DefaultTabController(
? ? //導(dǎo)航欄的長(zhǎng)度
? ? ? length: 4,
? ? ? child: Scaffold(
? ? ? ? appBar: AppBar(
? ? ? ? ? title: Text("AppBarDemoPage"),
? ? ? ? ? backgroundColor: Colors.red,
? ? ? ? ? centerTitle: true,
? ? ? ? ? bottom: TabBar(
? ? ? ? ? ? // isScrollable: true, //可滾動(dòng)
? ? ? ? ? ? indicatorColor: Colors.blueGrey, //指示器的顏色
? ? ? ? ? ? labelColor: Colors.blueGrey, //選中文字顏色
? ? ? ? ? ? unselectedLabelColor: Colors.white, //為選中文字顏色
? ? ? ? ? ? // indicatorSize: TabBarIndicatorSize.label, //指示器與文字等寬
? ? ? ? ? ? tabs: <Widget>[
? ? ? ? ? ? ? Tab(text: "熱門"),
? ? ? ? ? ? ? Tab(text: "推薦"),
? ? ? ? ? ? ? Tab(text: "好友"),
? ? ? ? ? ? ? Tab(text: "動(dòng)態(tài)"),
? ? ? ? ? ? ],
? ? ? ? ? ),
? ? ? ? ),
? ? ? ? body: TabBarView(
? ? ? ? ? children: <Widget>[
? ? ? ? ? ? Container(
? ? ? ? ? ? ? child: Text("hello"),
? ? ? ? ? ? ),
? ? ? ? ? ? ListView(
? ? ? ? ? ? ? children: <Widget>[
? ? ? ? ? ? ? ? ListTile(
? ? ? ? ? ? ? ? ? title: Text("第二個(gè)tab"),
? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ],
? ? ? ? ? ? ),
? ? ? ? ? ? ListView(
? ? ? ? ? ? ? children: <Widget>[
? ? ? ? ? ? ? ? ListTile(
? ? ? ? ? ? ? ? ? title: Text("第三個(gè)tab"),
? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ],
? ? ? ? ? ? ),
? ? ? ? ? ? ListView(
? ? ? ? ? ? ? children: <Widget>[
? ? ? ? ? ? ? ? ListTile(
? ? ? ? ? ? ? ? ? title: Text("第四個(gè)tab"),
? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ],
? ? ? ? ? ? ),
? ? ? ? ? ],
? ? ? ? ),
? ? ? ),
? ? );
? }
}如果底部導(dǎo)航欄和頂部導(dǎo)航欄同時(shí)存在的
在這里只寫頂部導(dǎo)航欄的實(shí)現(xiàn)，底部的可以參照我之前的文章
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: "動(dòng)漫"),
? ? ? ? ? ? ? ? ? ? Tab(text: "NBA"),
? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? )
? ? ? ? ? ? ],
? ? ? ? ? ),
? ? ? ? ),
? ? ? ? body: TabBarView(
? ? ? ? ? children: <Widget>[
? ? ? ? ? ? ListView(
? ? ? ? ? ? ? children: <Widget>[
? ? ? ? ? ? ? ? ListTile(
? ? ? ? ? ? ? ? ? title: Text("第一個(gè)tab"),
? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ],
? ? ? ? ? ? ),
? ? ? ? ? ? ListView(
? ? ? ? ? ? ? children: <Widget>[
? ? ? ? ? ? ? ? ListTile(
? ? ? ? ? ? ? ? ? title: Text("第二個(gè)tab"),
? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ],
? ? ? ? ? ? ),
? ? ? ? ? ? ListView(
? ? ? ? ? ? ? children: <Widget>[
? ? ? ? ? ? ? ? ListTile(
? ? ? ? ? ? ? ? ? title: Text("第三個(gè)tab"),
? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ],
? ? ? ? ? ? ),
? ? ? ? ? ? ListView(
? ? ? ? ? ? ? children: <Widget>[
? ? ? ? ? ? ? ? ListTile(
? ? ? ? ? ? ? ? ? title: Text("第四個(gè)tab"),
? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ],
? ? ? ? ? ? ),
? ? ? ? ? ],
? ? ? ? ),
? ? ? ),
? ? );
? }
}這么寫是對(duì)導(dǎo)航欄點(diǎn)擊做的監(jiān)聽，實(shí)現(xiàn)效果一樣
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為導(dǎo)航欄的個(gè)數(shù)
? ? _tabController = new TabController(vsync: this, length: 2);
? ? _tabController.addListener(() {
? ? ? print(_tabController.index);//打印點(diǎn)擊的索引
? ? });
? }
? @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("推薦"))
? ? ? ? ? ],
? ? ? ? ));
? }
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android通過startService實(shí)現(xiàn)文件批量下載
這篇文章主要為大家詳細(xì)介紹了Android通過startService實(shí)現(xiàn)文件批量下載的示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-12-12
對(duì)于Android Studio相信大家都不陌生了，作為谷歌推出的安卓開發(fā)工具，做過java的同學(xué)應(yīng)該都了解，下面我們就簡(jiǎn)單介紹下這款工具的安裝預(yù)配置2015-12-12
Android中利用viewflipper動(dòng)畫切換屏幕效果
這篇文章主要介紹了Android中利用viewflipper動(dòng)畫切換屏幕效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
基于Flutter實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)效的示例代碼
動(dòng)畫經(jīng)常會(huì)用于場(chǎng)景切換，比如滑動(dòng)，縮放，尺寸變化。Flutter?提供了Transition系列的動(dòng)畫組件，可以讓場(chǎng)景轉(zhuǎn)換動(dòng)畫變得更加簡(jiǎn)單。本文整理了常用的Transition組件的應(yīng)用，需要的可以參考一下2022-05-05
這篇文章主要為大家詳細(xì)介紹了Android仿網(wǎng)易云音樂播放界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
ScrollView嵌套ListView滑動(dòng)沖突的解決方法
這篇文章主要介紹了ScrollView嵌套ListView滑動(dòng)沖突的解決方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Android中Activity的四種啟動(dòng)模式和onNewIntent()
android 中activity的啟動(dòng)模式分為四種，（standard、singleTop、singTask、singleInstance），本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了Android利用RecyclerView編寫聊天界面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家介紹了Android?View的事件體系教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-03-03
Android通過訪問網(wǎng)頁(yè)查看網(wǎng)頁(yè)源碼實(shí)例詳解
這篇文章主要介紹了Android通過訪問網(wǎng)頁(yè)查看網(wǎng)頁(yè)源碼的相關(guān)資料,需要的朋友可以參考下2017-06-06