Flutter---底部导航框架
实现效果
路由结构
代码实例
main.dart
import 'package:flutter/material.dart';
import 'package:my_flutter/device_page.dart';
import 'package:my_flutter/home_page.dart';
import 'package:my_flutter/setting_page.dart';void main() {runApp(const MyApp());//启动应用}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',//应用标题theme: ThemeData(//主题设置colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),),home: const MyHomePage(title: '页面'),//初始页面);}
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;//页面标题@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {static const _pageList = [HomePage(),DevicePage(),SettingPage()];//页面列表var _pageIndex = 0;//当前页面索引//UI建造@overrideWidget build(BuildContext context) {return Scaffold(body: _pageList[_pageIndex], //根据下标显示对应的页面bottomNavigationBar: BottomNavigationBar(//创建底部导航栏items: [BottomNavigationBarItem(icon: Image.asset("assets/images/apple.png",width: 20,height: 20,),//未选中图标activeIcon: Image.asset("assets/images/cherry.png",width: 20,height: 20,),//选中图标label:"home",),BottomNavigationBarItem(icon: Image.asset("assets/images/apple.png",width: 20,height: 20,),//未选中图标activeIcon: Image.asset("assets/images/banana.png",width: 20,height: 20,),//选中图标label:"device",),BottomNavigationBarItem(icon: Image.asset("assets/images/apple.png",width: 20,height: 20,),//未选中图标activeIcon: Image.asset("assets/images/mango.png",width: 20,height: 20,),//选中图标label:"setting",),],backgroundColor: Colors.white, //背景色currentIndex: _pageIndex, //当前选中索引unselectedItemColor: Colors.grey, //未选中颜色selectedItemColor: Colors.blue, //选中颜色onTap: (index) { //点击事件,页面切换逻辑if (_pageIndex == index) return; //如果点击的是当前页,不处理_pageIndex = index;//把传入的下标参数去找到要刷新的页面setState(() {}); //更新索引并触发重建},type: BottomNavigationBarType.fixed,),);}
}
home_page.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';class HomePage extends StatefulWidget{const HomePage({super.key});@overrideState<StatefulWidget> createState() => _HomePageState();}class _HomePageState extends State<HomePage>{//UI构建@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child:Text("home页面"),),);}}
device_page.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';class DevicePage extends StatefulWidget{const DevicePage({super.key});@overrideState<StatefulWidget> createState() => _DevicePageState();}class _DevicePageState extends State<DevicePage>{//UI构建@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child:Text("device页面"),),);}}
setting_page.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';class SettingPage extends StatefulWidget{const SettingPage({super.key});@overrideState<StatefulWidget> createState() => _SettingPageState();}class _SettingPageState extends State<SettingPage>{//UI构建@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child:Text("setting页面"),),);}}