Flutter开发之Scaffold 脚手架的使用（39）

2023-12-03 20:18
文章标签 使用 开发 flutter 39 脚手架 scaffold

本文主要是介绍Flutter开发之Scaffold 脚手架的使用（39），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本篇文章学习Flutter入门进阶之旅（十六）Scaffold 脚手架并修改了部分代码

  1. 增加了自定义的触发drawer、endDrawer的按钮和方法
  2. 增加了自定义tab的图片和文本的功能
  3. 涉及了onTap: 的传参功能
  4. 涉及GlobalKey 获取Scaffold触发openDrawer()的功能

Scaffold为我们提供快速搭建页面的脚手架方法。

  • appBar: 显示在界面顶部的一个菜单导航栏
  • body：页面中显示主要内容的区域，可任意指定Widget
  • floatingActionButton： 悬浮按钮(类似Android的floatingActionButton)
  • drawer、endDrawer：分别用于在左、右两侧边栏展示抽屉菜单
  • bottomNavigationBar：显示在底部的导航栏按钮栏

在Flutter中Scaffold给我们提供了上述用于快速构建页面的常用属性，开发者可根据自己的页面需求，引入不同属性达到定制出不同UI呈现的目的，下面就实际用一下Scaffold的一些功能属性。

Scaffold搭建效果图

在这里插入图片描述

这里不再一一介绍看代码更容易理解。

  1. 这里需要提一下PopupMenuButton 自带的控件
    在这里插入图片描述

  2. 5.底部导航栏 bottomNavigationBar

bottomNavigationBar的使用场景还比较多，一般我们的多页面app都会通过底部的Tab来切换App首页展示的不同内容，在Flutter的Scaffold中为我们提供了快捷用于构建底部Tab的方法，我们通过给BottomNavigationBar的Items属性设置需要展示的BottomNavigationBarItem数组即可。

 bottomNavigationBar: BottomNavigationBar(//不设置该属性多于三个不显示颜色type: BottomNavigationBarType.fixed,items: [BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),BottomNavigationBarItem(icon: Icon(Icons.message), title: Text("消息")),BottomNavigationBarItem(icon: Icon(Icons.add_a_photo), title: Text("动态")),BottomNavigationBarItem(icon: Icon(Icons.person), title: Text("我的"))],currentIndex: _currentBottomIndex,fixedColor: Colors.blue,onTap: (index) => _onBottomTabChange(index),),

在这里插入图片描述

  1. 在实现底部导航栏时，Flutter还为我们提供了一个Material组件中的类似‘"镶嵌"效果，使用BottomAppBar配合FloatingActionButton完成，文字描述可能云里雾里的。一图胜千言：悬浮按钮镶嵌在Bar上。
    在这里插入图片描述
//与FloatingActionButton配合实现"打洞"效果bottomNavigationBar: BottomAppBar(color: Colors.white,shape: CircularNotchedRectangle(), // 底部导航栏打一个圆形的洞child: Row(children: [Tab(text: "首页", icon: Icon(Icons.home)),Tab(text: "消息", icon: Icon(Icons.message)),Tab(text: "动态", icon: Icon(Icons.add_a_photo)),Tab(text: "我的", icon: Icon(Icons.person)),],mainAxisAlignment: MainAxisAlignment.spaceAround, //均分底部导航栏横向空间),),floatingActionButton: FloatingActionButton(onPressed: () => _onFabClick,child: Icon(Icons.add),),floatingActionButtonLocation:FloatingActionButtonLocation.centerDocked, //设置FloatingActionButton的位置);
例子完整代码
import 'package:flutter/material.dart';class ScaffoldWidgetTest extends StatefulWidget {@overrideState<StatefulWidget> createState() => new PageState();
}class PageState extends State<ScaffoldWidgetTest> with SingleTickerProviderStateMixin {int _currentBottomIndex = 0; //底部tab索引//顶部TabTabController _tabController;List<String> topTabLists = ["Tab 1", "Tab 2", "Tab 3"];@overridevoid initState() {super.initState();//初始化顶部TabController_tabController = TabController(length: topTabLists.length, vsync: this);_tabController.addListener(() {switch (_tabController.index) {case 0:print("----111");break;case 1:print("----222");break;case 2:print("----333");break;}});}void _onBottomTabChange(int index) {setState(() {print('_onBottomTabChange');_currentBottomIndex = index;});}void _onFabClick(int tabIndex) {print('_onFabClick----$tabIndex');}final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();@overrideWidget build(BuildContext context) {return Scaffold(key: _scaffoldKey,appBar: AppBar(// 添加leading之后需要重写点击事件唤起抽屉菜单// leading: Icon(Icons.account_balance),leading: new IconButton(icon: new Container(padding: EdgeInsets.all(3.0),child: new CircleAvatar(radius: 30.0,backgroundImage: AssetImage("images/lake.png")),),onPressed: (){_scaffoldKey.currentState.openDrawer();},),title: Text("Scaffold 脚手架"),centerTitle: true,actions: <Widget>[IconButton(icon: Icon(Icons.message), onPressed: () {print('我来了');_scaffoldKey.currentState.openEndDrawer();}),IconButton(icon: Icon(Icons.access_alarm), onPressed: () {}),PopupMenuButton(onSelected: (String value) {print('选项-----------------$value');},itemBuilder: (BuildContext context) => [new PopupMenuItem(value: "选项一的内容", child: new Text("选项一")),new PopupMenuItem(value: "选项二的内容", child: new Text("选项二")),new PopupMenuItem(value: "选项三的内容", child: new Text("选项三")),])],// Tab属性设置icon图标+文字bottom: TabBar(controller: _tabController,tabs: topTabLists.map((element) => Tab(text: element,icon: Icon(Icons.print),)).toList(),
//            onTap: (index) => {},)),drawer: MyDrawer(),endDrawer:MyDrawer(),body: TabBarView(controller: _tabController,children: topTabLists.map((item) {return Container(alignment: Alignment.center,child: Text(item),);}).toList()),//      bottomNavigationBar: BottomNavigationBar(
//        //不设置该属性多于三个不显示颜色
//        type: BottomNavigationBarType.fixed,
//        items: [
//          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
//          BottomNavigationBarItem(icon: Icon(Icons.message), title: Text("消息")),
//          BottomNavigationBarItem(icon: Icon(Icons.add_a_photo), title: Text("动态")),
//          BottomNavigationBarItem(icon: Icon(Icons.person), title: Text("我的"))
//        ],
//        currentIndex: _currentBottomIndex,
//        fixedColor: Colors.blue,
//        onTap: (index) => _onBottomTabChange(index),
//      ),//与FloatingActionButton配合实现"打洞"效果bottomNavigationBar: BottomAppBar(color: Colors.white,shape: CircularNotchedRectangle(), // 底部导航栏打一个圆形的洞child: Row(children: [/** IconButton(icon: Icon(Icons.home,color: Colors.white,),color: Colors.white,onPressed: () {setState(() {_index = 0;});},),* *///  icons will default to black.// assert(!(text != null && null != child))不能同时存在GestureDetector(onTap:(){_onFabClick(0);},child: Container(width: 60,child: Tab(icon: Icon(Icons.home,color: Colors.blue),child: Text('haha',style: TextStyle(color: Colors.blue),),))),GestureDetector(onTap:(){_onFabClick(1);},child: Container(width: 60,child: Tab(text: "消息", icon: Icon(Icons.message)))),GestureDetector(onTap:(){_onFabClick(2);},child: Container(width: 60,child: Tab(text: ""))),GestureDetector(onTap:(){_onFabClick(3);},child: Container(width: 60,child: Tab(text: "动态", icon: Icon(Icons.add_a_photo)))),GestureDetector(onTap:(){_onFabClick(4);},child: Container(width: 60,child: Tab(text: "我的", icon: Icon(Icons.person)))),],mainAxisAlignment: MainAxisAlignment.spaceAround, //均分底部导航栏横向空间),),floatingActionButton: FloatingActionButton(onPressed: (){_onFabClick(2);},child: Icon(Icons.add),),floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, //设置FloatingActionButton的位置);}
}class MyDrawer extends StatelessWidget {@overrideWidget build(BuildContext context) {return Drawer(child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Padding(padding: const EdgeInsets.only(top: 88.0, bottom: 30.0),child: Row(children: <Widget>[Padding(padding: const EdgeInsets.symmetric(horizontal: 16.0),child: ClipOval(child: Image.network("https://avatar.csdn.net/6/0/6/3_xieluoxixi.jpg",width: 60,),),),Text("谢栋",style: TextStyle(fontWeight: FontWeight.bold),)],),),Expanded(child: ListView(children: <Widget>[ListTile(leading: const Icon(Icons.settings),title: const Text('个人设置'),),ListTile(leading: const Icon(Icons.live_help),title: const Text('帮助说明'),),ListTile(leading: const Icon(Icons.settings),title: const Text('个人设置'),),ListTile(leading: const Icon(Icons.live_help),title: const Text('帮助说明'),),],),)],));}
}

总结：这一篇很有收获，之前感觉写了那么多flutter的文章，不知道继续研究哪方面的。现在感觉还有很多问题尚待解决。
比如：
Key,
有没有iOS 的tag,
如何获取控件改变其属性，
基础控件的使用：TextField等,
控件间的通信，
。。。

继续努力吧！！！

这篇关于Flutter开发之Scaffold 脚手架的使用（39）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/450740。

相关文章

Conda与Python venv虚拟环境的区别与使用方法详解

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,：本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v
阅读更多...
Spring Boot中WebSocket常用使用方法详解

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP
阅读更多...
C#中Guid类使用小结

C#中Guid类使用小结

《C#中Guid类使用小结》本文主要介绍了C#中Guid类用于生成和操作128位的唯一标识符,用于数据库主键及分布式系统,支持通过NewGuid、Parse等方法生成,感兴趣的可以了解一下... 目录前言一、什么是 Guid二、生成 Guid1. 使用 Guid.NewGuid() 方法2. 从字符串创建
阅读更多...
Python使用python-can实现合并BLF文件

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库：CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合
阅读更多...
Python使用OpenCV实现获取视频时长的小工具

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文
阅读更多...
Spring IoC 容器的使用详解(最新整理)

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注
阅读更多...
Python内置函数之classmethod函数使用详解

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》：本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客
阅读更多...
Linux中压缩、网络传输与系统监控工具的使用完整指南

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压：数据存储与传输的优化核心1. zip/unzip：通用压缩格式的便捷操作2.
阅读更多...
使用Python实现可恢复式多线程下载器

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传：从崩溃边缘抢救进度二、多线程加速：榨干网络带宽三、速度控制：做网络的好邻居四、终端交互
阅读更多...
Python中注释使用方法举例详解

Python中注释使用方法举例详解

《Python中注释使用方法举例详解》在Python编程语言中注释是必不可少的一部分,它有助于提高代码的可读性和维护性,：本文主要介绍Python中注释使用方法的相关资料,需要的朋友可以参考下... 目录一、前言二、什么是注释？示例：三、单行注释语法：以 China编程# 开头，后面的内容为注释内容示例：示例：四
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2