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。

相关文章

Java使用Javassist动态生成HelloWorld类

Java使用Javassist动态生成HelloWorld类

《Java使用Javassist动态生成HelloWorld类》Javassist是一个非常强大的字节码操作和定义库,它允许开发者在运行时创建新的类或者修改现有的类,本文将简单介绍如何使用Javass... 目录1. Javassist简介2. 环境准备3. 动态生成HelloWorld类3.1 创建CtC
阅读更多...
使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解

使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解

《使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解》本文详细介绍了如何使用Python通过ncmdump工具批量将.ncm音频转换为.mp3的步骤,包括安装、配置ffmpeg环... 目录1. 前言2. 安装 ncmdump3. 实现 .ncm 转 .mp34. 执行过程5. 执行结
阅读更多...
Java使用jar命令配置服务器端口的完整指南

Java使用jar命令配置服务器端口的完整指南

《Java使用jar命令配置服务器端口的完整指南》本文将详细介绍如何使用java-jar命令启动应用,并重点讲解如何配置服务器端口,同时提供一个实用的Web工具来简化这一过程,希望对大家有所帮助... 目录1. Java Jar文件简介1.1 什么是Jar文件1.2 创建可执行Jar文件2. 使用java
阅读更多...
C#使用Spire.Doc for .NET实现HTML转Word的高效方案

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1
阅读更多...
Java中的抽象类与abstract 关键字使用详解

Java中的抽象类与abstract 关键字使用详解

《Java中的抽象类与abstract关键字使用详解》：本文主要介绍Java中的抽象类与abstract关键字使用详解,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、抽象类的概念二、使用 abstract2.1 修饰类 => 抽象类2.2 修饰方法 => 抽象方法，没有
阅读更多...
SpringBoot 多环境开发实战(从配置、管理与控制)

SpringBoot 多环境开发实战(从配置、管理与控制)

《SpringBoot多环境开发实战(从配置、管理与控制)》本文详解SpringBoot多环境配置,涵盖单文件YAML、多文件模式、MavenProfile分组及激活策略,通过优先级控制灵活切换环境... 目录一、多环境开发基础（单文件 YAML 版）（一）配置原理与优势（二）实操示例二、多环境开发多文件版
阅读更多...
MyBatis ParameterHandler的具体使用

MyBatis ParameterHandler的具体使用

《MyBatisParameterHandler的具体使用》本文主要介绍了MyBatisParameterHandler的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录一、概述二、源码1 关键属性2.setParameters3.TypeHandler1.TypeHa
阅读更多...
Spring 中的切面与事务结合使用完整示例

Spring 中的切面与事务结合使用完整示例

《Spring中的切面与事务结合使用完整示例》本文给大家介绍Spring中的切面与事务结合使用完整示例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录 一、前置知识：Spring AOP 与 事务的关系 事务本质上就是一个“切面”二、核心组件三、完
阅读更多...
使用docker搭建嵌入式Linux开发环境

使用docker搭建嵌入式Linux开发环境

《使用docker搭建嵌入式Linux开发环境》本文主要介绍了使用docker搭建嵌入式Linux开发环境,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录1、前言2、安装docker3、编写容器管理脚本4、创建容器1、前言在日常开发全志、rk等不同
阅读更多...
使用Python实现Word文档的自动化对比方案

使用Python实现Word文档的自动化对比方案

《使用Python实现Word文档的自动化对比方案》我们经常需要比较两个Word文档的版本差异,无论是合同修订、论文修改还是代码文档更新,人工比对不仅效率低下,还容易遗漏关键改动,下面通过一个实际案例... 目录引言一、使用python-docx库解析文档结构二、使用difflib进行差异比对三、高级对比方
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2