Flutter自定義底部導(dǎo)航欄的方法
更新時(shí)間：2022年07月28日 15:15:14 作者：蘭葉書(shū)
這篇文章主要為大家詳細(xì)介紹了Flutter自定義底部導(dǎo)航欄的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Flutter自定義底部導(dǎo)航欄的具體代碼，供大家參考，具體內(nèi)容如下
文件結(jié)構(gòu)：
main.dart
import 'package:flutter/material.dart';
import 'pages/tabs.dart';
?
void main() => runApp(new MyApp());
?
class MyApp extends StatelessWidget {
? @override
? Widget build(BuildContext context) {
? ? return MaterialApp(
? ? ? home: Tabs(),
? ? );
? }
}tabs.dart
import 'package:flutter/material.dart';
import 'tabs/home.dart';
import 'tabs/category.dart';
import 'tabs/user.dart';
class Tabs extends StatefulWidget {
? Tabs({Key key}) : super(key: key);
? @override
? _TabsState createState() => _TabsState();
}
?
class _TabsState extends State<Tabs> {
? int _currentIndex = 0;
?
? List _pageList=[
? ? HomePage(),
? ? CategoryPage(),
? ? UserPage(),
? ];
?
?
? @override
? Widget build(BuildContext context) {
? ? return Scaffold(
? ? ? appBar: AppBar(
? ? ? ? title: Text('自定義底部導(dǎo)航'),
? ? ? ),
? ? ? body: this._pageList[this._currentIndex],
? ? ? bottomNavigationBar: BottomNavigationBar(
? ? ? ? currentIndex: this._currentIndex,
? ? ? ? onTap: (int index) {
? ? ? ? ? setState(() {
? ? ? ? ? ? this._currentIndex = index;
? ? ? ? ? });
? ? ? ? },
? ? ? ? items: [
? ? ? ? ? BottomNavigationBarItem(
? ? ? ? ? ? icon: Icon(Icons.home),
? ? ? ? ? ? title: Text('首頁(yè)'),
? ? ? ? ? ),
? ? ? ? ? BottomNavigationBarItem(
? ? ? ? ? ? icon: Icon(Icons.category),
? ? ? ? ? ? title: Text('分類'),
? ? ? ? ? ),
? ? ? ? ? BottomNavigationBarItem(
? ? ? ? ? ? icon: Icon(Icons.supervised_user_circle),
? ? ? ? ? ? title: Text('會(huì)員'),
? ? ? ? ? ),
? ? ? ? ],
? ? ? ),
? ? );
? }
}home.dart
import 'package:flutter/material.dart';
?
class HomePage extends StatefulWidget {
? HomePage({Key key}) : super(key: key);
?
? @override
? _HomePageState createState() => _HomePageState();
}
?
class _HomePageState extends State<HomePage> {
? @override
? Widget build(BuildContext context) {
? ? return Text('首頁(yè)');
? }
}category.dart
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 Text('分類');
? }
}user.dart
import 'package:flutter/material.dart';
?
class UserPage extends StatefulWidget {
? UserPage({Key key}) : super(key: key);
?
? @override
? _UserPageState createState() => _UserPageState();
}
?
class _UserPageState extends State<UserPage> {
? @override
? Widget build(BuildContext context) {
? ? return Text('會(huì)員');
? }
}效果展示：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android手機(jī)支持敲擊屏幕解鎖，敲擊屏幕解鎖是一項(xiàng)很實(shí)用的功能，本文以android平臺(tái)為例使用java代碼實(shí)現(xiàn)Android手機(jī)屏幕敲擊解鎖功能，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-07-07
Flutter實(shí)現(xiàn)抖音點(diǎn)贊效果
抖音的點(diǎn)贊效果在第一次看到的時(shí)候，總有一種眼前一亮的感覺(jué)。一邊看視頻，還能在視頻上點(diǎn)贊，而且整個(gè)屏幕都能夠點(diǎn)贊，并伴隨動(dòng)畫(huà)，還是很炫酷的。今天我們用Flutter來(lái)實(shí)現(xiàn)一下這個(gè)效果2021-05-05
Android 動(dòng)態(tài)的顯示時(shí)間
本文給大家分享一段代碼實(shí)現(xiàn)android動(dòng)態(tài)顯示時(shí)間，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2016-12-12
Android對(duì)so進(jìn)行簡(jiǎn)單hook思路解析
這篇文章主要為大家介紹了Android對(duì)so進(jìn)行簡(jiǎn)單hook思路解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
基于Android實(shí)現(xiàn)一個(gè)常用的布局吸頂效果
這篇文章給大家介紹一個(gè)布局吸頂效果,一般出現(xiàn)在內(nèi)容較長(zhǎng)頁(yè)面還嵌套著分類頁(yè)面的情況,比如電商的詳情頁(yè)嵌套分類,在頁(yè)面滑動(dòng)到tab的時(shí)候我們希望tab還能保留在頁(yè)面頂部而不被頂上去,文中有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
解決Android SurfaceView繪制觸摸軌跡閃爍問(wèn)題的方法
這篇文章主要為大家詳細(xì)介紹了解決Android SurfaceView繪制觸摸軌跡閃爍問(wèn)題的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
Android使用ImageView實(shí)現(xiàn)支持手勢(shì)縮放效果
這篇文章主要介紹了Android使用ImageView實(shí)現(xiàn)支持手勢(shì)縮放效果，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09
基于Flutter制作一個(gè)心碎動(dòng)畫(huà)特效
這篇文章主要為大家介紹了如何利用Flutter制作一個(gè)心碎動(dòng)畫(huà)特效，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Flutter有一定幫助，感興趣的可以了解一下2022-04-04
本人做了GPS相關(guān)的嵌入式軟件已經(jīng)幾年了，所以說(shuō)起要做個(gè)測(cè)試GPS定位模塊的程序，第一反應(yīng)就是串口讀取GPS模塊的數(shù)據(jù)，然后解析GPS的NMEA格式數(shù)據(jù)2013-07-07
TextView長(zhǎng)按復(fù)制的實(shí)現(xiàn)方法(總結(jié))
下面小編就為大家?guī)?lái)一篇TextView長(zhǎng)按復(fù)制的實(shí)現(xiàn)方法(總結(jié))。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04