首页 > 其他分享 >flutter3空页面加导航

flutter3空页面加导航

时间:2024-07-01 11:45:56浏览次数:1  
标签:const title Icons BottomNavigationBarItem label flutter3 页面 导航 Icon

import 'package:flutter/material.dart';

void main() {
  runApp(const GoWaterMyApp());
}

class GoWaterMyApp extends StatelessWidget {
  const GoWaterMyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GoWater',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.lightBlue),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '桶装水自动配送系统'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late int _selectedIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: Container(),
      ),
//导航开始
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.lightBlue,
        currentIndex: _selectedIndex,
        onTap: (index) => setState(() {
          _selectedIndex = index;
        }),
        //如果超过宽度则必须加下面这句
        type: BottomNavigationBarType.fixed,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: '历史',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.widgets),
            label: '订水',
          ),
          BottomNavigationBarItem(icon: Icon(Icons.history), label: ('发现')),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '自己',
          ),
        ],
      ),
//导航结束
    );
  }
}

  

标签:const,title,Icons,BottomNavigationBarItem,label,flutter3,页面,导航,Icon
From: https://www.cnblogs.com/xiongwei/p/18277725

相关文章

  • 小程序获取当前页面栈及应用
    前言:小程序跳转路由,会在页面栈里留下记录的,有的时候,我们就可以利用页面栈的记录来做一些便捷的操作。获取当前页面栈:varpages=getCurrentPages();console.log('pages',pages)console.log('pagesLength',pages.length)官网地址:getCurrentPages()|uni-app官网 应用:......
  • springboot项目中使用iframe引入页面
    很多朋友想在spring-boot项目(包含:Security)中引用iframe,但是都不能正常运行,会报错localhost已拒绝连接:这是因为这个框架的安全性考虑:默认情况下,现代的Web浏览器会应用一些安全策略,例如同源策略,限制从一个源加载的内容如何与来自另一个源的内容进行交互。如果你尝试从一个不......
  • 在Linux中,如何统计ip访问情况?分析 nginx 访问日志?如何找出访问页面数量在前十位的ip?
    在Linux中统计IP访问情况并分析Nginx访问日志,以找出访问页面数量在前十位的IP地址,可以通过一系列命令行工具高效完成。这里以一个典型的工作流程为例,说明如何进行这一分析:1.确定日志文件位置首先,需要知道Nginx的访问日志文件位置。通常,这个文件位于/var/log/nginx/access.log,但......
  • 【内存管理】页面分配机制
    前言Linux内核中是如何分配出页面的,如果我们站在CPU的角度去看这个问题,CPU能分配出来的页面是以物理页面为单位的。也就是我们计算机中常讲的分页机制。本文就看下Linux内核是如何管理,释放和分配这些物理页面的。伙伴算法伙伴系统的定义大家都知道,Linux内核的页面分配器的基本......
  • 创新实训(十)——代码美化部分:导航栏的active
    代码美化部分————导航栏的active对于导航栏来说,当选定在某个功能部分时,当前模块会有高亮显示。查看main-nav.php中有管导航栏的代码<divclass="collapsenavbar-collapse"id="navbarSupportedContent"> <ulclass="navnav-pillsmain-navmr-auto"> <liclass="......
  • java使用@Controller注解跳转到thmyleaf页面时候报错
     报错如下######当我使用RestController时候接口可以得到返回的对象↓但是查看RestController和Controller的区别之后:也就是说@RestController返回的是一个对象,@Controller默认情况下,方法的返回值会被解析为一个视图名称,并寻找与该名称匹配的视图进行渲染。这意味着返回......
  • 三种好用的controller跳转thmleaf页面的方法总结!!
    一、直接在Controller中写跳转方法,最简单也是最普通的方法【不推荐使用】@Controller//页面跳转是直接用Controller:ResponstController他会默认给页面所有的方法加上ResponstBoring,他会返回对象,而不是页面跳转@Slf4jpublicclassLoginController{@RequestMapping(val......
  • JavaScript 地址信息与页面跳转
    在JavaScript中,处理地址信息和页面跳转通常涉及到两种主要的技术:使用window.location对象和创建超链接(<a>标签)。1.使用window.location对象window.location对象包含了关于当前URL的信息,并且提供了一些方法来进行页面跳转。获取地址信息你可以使用window.location对象......
  • 前端页面实现【矩阵表格与列表】
    实现页面: 1.动态表绘制(可用于矩阵构建)<template><div><h4><b>基于层次分析法的权重计算</b></h4><tabletable-layout="fixed"><thead><tr><thv-for="(_,colIndex)in(numRows......
  • 鸿蒙案例-欢迎页面的实现
    前言‘案例来源于b站课程’实现过程1.首页面主要有三部分<1>中央slogan;<2>logo;<3>文字描述设置中央slogan要使用layoutWeight(1)实现布局全中;Row(){Image($r('app.media.home_slogan')).width(260)}.layoutWeight(1)logo即图片设置好图片......