日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Flutter實現頂部導航欄功能_Android

作者：明知山_ ? 更新時間： 2022-09-21 編程語言

本文實例為大家分享了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"),
? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ],
? ? ? ? ? ? ),
? ? ? ? ? ],
? ? ? ? ),
? ? ? ),
? ? );
? }
}

如果底部導航欄和頂部導航欄同時存在的

在這里只寫頂部導航欄的實現，底部的可以參照我之前的文章

tabbar導航欄的實現

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("推薦"))
? ? ? ? ? ],
? ? ? ? ));
? }
}

原文鏈接：https://blog.csdn.net/AK852369/article/details/104921854

欄目分類
最近更新