Flutter實現(xiàn)頂部導(dǎo)航欄功能

更新時間：2022年07月28日 15:05:51 作者：明知山_

這篇文章主要為大家詳細介紹了Flutter實現(xiàn)頂部導(dǎo)航欄功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Flutter實現(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)航欄的長度
? ? ? 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: "動態(tài)"),
? ? ? ? ? ? ],
? ? ? ? ? ),
? ? ? ? ),
? ? ? ? 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"),
? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ],
? ? ? ? ? ? ),
? ? ? ? ? ],
? ? ? ? ),
? ? ? ),
? ? );
? }
}

如果底部導(dǎo)航欄和頂部導(dǎo)航欄同時存在的

在這里只寫頂部導(dǎo)航欄的實現(xiàn)，底部的可以參照我之前的文章

tabbar導(dǎo)航欄的實現(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: "動漫"),
? ? ? ? ? ? ? ? ? ? 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"),
? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ],
? ? ? ? ? ? ),
? ? ? ? ? ],
? ? ? ? ),
? ? ? ),
? ? );
? }
}

這么寫是對導(dǎo)航欄點擊做的監(jiān)聽，實現(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)航欄的個數(shù)
? ? _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("推薦"))
? ? ? ? ? ],
? ? ? ? ));
? }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: