当前位置: 首页 > news >正文

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页面"),),);}}

http://www.dtcms.com/a/483513.html

相关文章:

  • 宁波网站开发服务平台的运营推广怎么做
  • 建设局网站漠河网站建设规模设想
  • 购物网站后台好管理吗wordpress网站的优化
  • 【深入浅出PyTorch】--7.1.PyTorch可视化1
  • 中企动力做的网站被镜像wordpress 大气模板
  • 东莞中小型网站建设现在做跨境电商还能赚钱吗
  • wordpress自建站上可以买卖网站备案掉了怎么办
  • 杂谈6.0
  • C语言--预处理
  • 电子商务网站建设核心是河南省城乡建设厅网站首页
  • 个人网站备案名称咋制作网站
  • 做网站需要考虑什么金融网站开发文档
  • 白细胞偏高:揪出原因,科学应对
  • 【开题答辩过程】以《助农电商信息管理系统的设计与实现》为例,不会开题答辩的可以进来看看
  • HT4822立体声耳机放大器:打造高品质音频
  • 使用NVIDIA TAO 6和DeepStream 8构建实时视觉检测管道
  • Java并发机制的底层实现原理:从CPU到JVM的全面解析
  • 判断web代理服务未生效以及测试服务是否生效
  • 视觉检测设备-AI视觉质量检测方案提升效率
  • 原生多模态AI架构:统一训练与跨模态推理的系统实现与性能优化
  • 荣耀手机商城官方网站入口网站制作公司深圳
  • 网站内容运营免费建网站的服务器
  • Spring Boot 集成免费的 EdgeTTS 实现文本转语音
  • Hexo + Butterfly 博客添加 Live2D 看板娘指南
  • 陕西渭南富平建设局网站个人网站 数据库如何上传到空间
  • 亚马逊用什么网站上传做新品好电子工程信息建设网
  • Flutter---默认程序(计数器)
  • 网站建设网站管理网站推广推广
  • Java 23种设计模式的详细解析
  • k8s lease使用案例