網(wǎng)站首頁 編程語言 正文
本文實(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('首頁'),
? ? ? ? ? ),
? ? ? ? ? BottomNavigationBarItem(
? ? ? ? ? ? icon: Icon(Icons.category),
? ? ? ? ? ? title: Text('分類'),
? ? ? ? ? ),
? ? ? ? ? BottomNavigationBarItem(
? ? ? ? ? ? icon: Icon(Icons.supervised_user_circle),
? ? ? ? ? ? title: Text('會員'),
? ? ? ? ? ),
? ? ? ? ],
? ? ? ),
? ? );
? }
}
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('首頁');
? }
}
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('會員');
? }
}
效果展示:
原文鏈接:https://blog.csdn.net/u013227399/article/details/103787189
相關(guān)推薦
- 2022-07-26 Go利用反射reflect實(shí)現(xiàn)獲取接口變量信息_Golang
- 2023-07-26 TypeScript中的keyof、typeof、索引訪問類型、條件類型
- 2022-06-01 Android調(diào)用外置攝像頭的方法_Android
- 2022-05-29 .NET?Core通過dotnet?publish命令發(fā)布應(yīng)用_實(shí)用技巧
- 2022-07-11 docker容器時(shí)區(qū)不對問題
- 2022-08-04 pandas添加新列的5種常見方法_python
- 2022-07-09 python如何獲取Prometheus監(jiān)控?cái)?shù)據(jù)_python
- 2022-08-30 C語言示例講解結(jié)構(gòu)體的聲明與初始化方法_C 語言
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運(yùn)行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動(dòng)態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支