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 String字符串的常用使用方法

Java String字符串的常用使用方法

《JavaString字符串的常用使用方法》String是JDK提供的一个类,是引用类型,并不是基本的数据类型,String用于字符串操作,在之前学习c语言的时候,对于一些字符串,会初始化字符数组表... 目录一、什么是String二、如何定义一个String1. 用双引号定义2. 通过构造函数定义三、St
阅读更多...
Python通过模块化开发优化代码的技巧分享

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版：拆分成模块让模块更强大：使用 __init__.py你一定会遇到的问题模www.
阅读更多...
Pydantic中Optional 和Union类型的使用

Pydantic中Optional 和Union类型的使用

《Pydantic中Optional和Union类型的使用》本文主要介绍了Pydantic中Optional和Union类型的使用,这两者在处理可选字段和多类型字段时尤为重要,文中通过示例代码介绍的... 目录简介Optional 类型Union 类型Optional 和 Union 的组合总结简介Pyd
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
Spring Security基于数据库的ABAC属性权限模型实战开发教程

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》：本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA
阅读更多...
使用Python自建轻量级的HTTP调试工具

使用Python自建轻量级的HTTP调试工具

《使用Python自建轻量级的HTTP调试工具》这篇文章主要为大家详细介绍了如何使用Python自建一个轻量级的HTTP调试工具,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下... 目录一、为什么需要自建工具二、核心功能设计三、技术选型四、分步实现五、进阶优化技巧六、使用示例七、性能对比八、扩展方向建
阅读更多...
使用Python实现一键隐藏屏幕并锁定输入

使用Python实现一键隐藏屏幕并锁定输入

《使用Python实现一键隐藏屏幕并锁定输入》本文主要介绍了使用Python编写一个一键隐藏屏幕并锁定输入的黑科技程序,能够在指定热键触发后立即遮挡屏幕,并禁止一切键盘鼠标输入,这样就再也不用担心自己... 目录1. 概述2. 功能亮点3.代码实现4.使用方法5. 展示效果6. 代码优化与拓展7. 总结1.
阅读更多...
使用Python开发一个简单的本地图片服务器

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经
阅读更多...
Linux中的计划任务(crontab)使用方式

Linux中的计划任务(crontab)使用方式

《Linux中的计划任务(crontab)使用方式》：本文主要介绍Linux中的计划任务(crontab)使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、前言1、linux的起源与发展2、什么是计划任务（crontab）二、crontab基础1、cro
阅读更多...
kotlin中const 和val的区别及使用场景分析

kotlin中const 和val的区别及使用场景分析

《kotlin中const和val的区别及使用场景分析》在Kotlin中,const和val都是用来声明常量的,但它们的使用场景和功能有所不同,下面给大家介绍kotlin中const和val的区别,... 目录kotlin中const 和val的区别1. val:2. const:二 代码示例1 Java
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2