Flutter组件————Scaffold

Scaffold

Scaffold 是一个基础的可视化界面结构组件，它实现了基本的Material Design布局结构。使用 Scaffold 可以快速地搭建起包含应用栏（AppBar）、内容区域（body）、抽屉菜单（Drawer）、底部导航栏（BottomNavigationBar）等元素的界面。

参数

Scaffold 参数列表

参数名类型描述
appBarPreferredSizeWidget设置页面顶部的应用栏，通常是一个 AppBar 组件。
bodyWidget页面的主要内容区域，可以是任意类型的 widget。
floatingActionButtonWidget定义浮动按钮，通常是一个 FloatingActionButton 组件。
floatingActionButtonLocationFloatingActionButtonLocation定义浮动按钮的位置，默认为 FloatingActionButtonLocation.endFloat。
floatingActionButtonAnimatorFloatingActionButtonAnimator定义浮动按钮动画行为，默认使用 FloatingActionButtonAnimator.scaling。
drawerWidget定义侧边抽屉菜单，通常是一个 Drawer 组件。
endDrawerWidget类似于 drawer，但它位于屏幕的另一侧。
bottomNavigationBarWidget设置页面底部的导航栏，如 BottomNavigationBar。
bottomSheetWidget显示在底部的模态弹出层，通常用于临时显示信息或操作选项。
backgroundColorColor设置 Scaffold 的背景颜色。
resizeToAvoidBottomInsetbool控制是否调整 body 的大小以避免被键盘遮挡，默认值为true。
primarybool指示此 Scaffold 是否应该被视为应用程序的主要 Scaffold，影响滚动行为。
extendBodybool如果设置为 true，则 body 将延伸到 bottomNavigationBar 或 persistentFooter 下方。
extendBodyBehindAppBarbool如果设置为 true，则 body 将延伸到 appBar 下方。
persistentFooterButtonsList定义一组固定在页面底部的按钮。
drawerScrimColorColor当 Drawer 打开时，屏幕上其他部分的颜色（半透明）。
drawerEdgeDragWidthdouble定义从屏幕边缘拖动打开 Drawer 的宽度。默认情况下，整个屏幕宽度都可以触发拖动手势。
restorationIdString用于状态恢复的标识符，允许 Scaffold 在应用程序重启后恢复其状态。

内部组件使用

1.Flutter组件————AppBar
2.Flutter组件————FloatingActionButton
3.Flutter组件————BottomNavigationBar

代码示例


class MyHomePage extends StatefulWidget {const MyHomePage({super.key});@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int pageIndex = 0;//所有右侧行为按钮List<Widget> actionList = const [Icon(Icons.social_distance),SizedBox(width: 30,),Icon(Icons.cyclone),SizedBox(width: 30,),Icon(Icons.manage_accounts),SizedBox(width: 40,)];List<Widget> pageList = const [Text("首页"),Text("新增"),Text("用户"),];void floatBtnFunc() {debugPrint("点击了悬浮按钮");HapticFeedback.vibrate();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary, //背景颜色foregroundColor: const Color.fromARGB(135, 226, 5, 255),// leading: const Icon(Icons.accessibility_new_rounded), //左侧按钮title: const Text("Flutter 示例"), //标题// actions: actionList, //右侧按钮elevation: 10, //下方阴影shadowColor: const Color.fromARGB(136, 0, 225, 255), //阴影颜色centerTitle: true, // 标题是否居中（ios默认居中，Android默认居左）surfaceTintColor: const Color.fromARGB(172, 249, 128, 0), //表面颜色toolbarHeight: 50, //顶部栏高度iconTheme: const IconThemeData(size: 20, color: Color.fromARGB(207, 255, 251, 0)), //控制内部元素样式primary: true, // 是否显示主要按钮titleSpacing: 10, //标题内边距bottom: const TabBar(tabs: [Tab(icon: Icon(Icons.directions_car)),Tab(icon: Icon(Icons.directions_transit)),Tab(icon: Icon(Icons.directions_bike)),]), //顶部栏底部按钮shape: const RoundedRectangleBorder(borderRadius:BorderRadius.vertical(bottom: Radius.circular(15)) //顶部栏底部按钮样式),), //顶部栏body: Center(child: ListView(padding: const EdgeInsets.only(top: 15),children: [Row(children: [pageList[pageIndex]],)],),),floatingActionButton: FloatingActionButton(onPressed: floatBtnFunc, //点击事件tooltip: "悬浮按钮", //长按提示信息backgroundColor: Colors.blue, //背景颜色foregroundColor: Colors.white, // 内部组件颜色elevation: 10, //阴影shape: ShapeBorder.lerp(const CircleBorder(), const CircleBorder(), 0.5), //按钮形状mini: false, //是否小尺寸hoverColor: Colors.green, //悬浮颜色splashColor: Colors.yellow, //点击颜色focusColor: Colors.red, //获取焦点颜色autofocus: true, //是否自动获取焦点clipBehavior: Clip.hardEdge, //裁剪方式child: const Icon(Icons.info), // //按钮内部组件), //浮动按钮floatingActionButtonLocation:FloatingActionButtonLocation.centerDocked, //浮动按钮位置bottomNavigationBar: BottomNavigationBar(items: const <BottomNavigationBarItem>[BottomNavigationBarItem(icon: Icon(Icons.home), //图标label: "首页",  //标签tooltip: "首页",   //长按提示信息backgroundColor: Colors.blueAccent, //背景颜色activeIcon: Icon(Icons.home_filled), //选中图标),BottomNavigationBarItem(icon: Icon(Icons.add), label: "新增"),BottomNavigationBarItem(icon: Icon(Icons.verified_user), label: "用户"),], //底部导航栏currentIndex: pageIndex, //当前页面索引onTap: (index) {setState(() {pageIndex = index;});}, //点击事件type: BottomNavigationBarType.fixed, //导航栏的类型iconSize: 25,  //图标大小elevation: 20, //阴影selectedFontSize: 12, //选中字体大小unselectedFontSize: 12, //未选中字体大小selectedItemColor: Colors.blue, //选中颜色unselectedItemColor: Colors.black, //未选中颜色showUnselectedLabels: true, //是否显示未选中的标签selectedLabelStyle: const TextStyle(color: Colors.blue), //选中文本样式unselectedLabelStyle: const TextStyle(color: Colors.black), //未选中文本样式backgroundColor: const Color.fromARGB(255, 99, 255, 247),showSelectedLabels: true, //分别控制是否显示选中和未选中的标签文本，默认都是显示的),backgroundColor: Colors.white24, //背景颜色persistentFooterButtons: const [Icon(Icons.add_a_photo_outlined),Icon(Icons.add_alarm_rounded)], //底部固定按钮drawer: Drawer(child: ListView(children: const [Text("侧边栏")],),),   //左侧边栏（不可以使用appBar的leader）endDrawer:  Drawer(child: ListView(children: const [Text("右侧侧边栏")],),)  // 右侧边栏(不可以使用appBar的actions));}
}

效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.tpcf.cn/diannao/64698.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

低代码软件搭建自学第2.5天——箭头连线和动态更新

低代码软件搭建自学第2.5天——箭头连线和动态更新

文章目录 使用 PyQtGraph 实现图形连接器&#xff1a;支持动态拖动和箭头连线引言实现功能的关键点代码实现功能演示实现过程中的经验教训结语 使用 PyQtGraph 实现图形连接器&#xff1a;支持动态拖动和箭头连线 引言 在这篇博客中&#xff0c;使用 PyQtGraph 和 PyQt6 创建一…
阅读更多...
CoinShares预测2025年加密市场前景看涨

CoinShares预测2025年加密市场前景看涨

原文来源&#xff1a;CoinShares预测2025年加密市场前景看涨 - 币热网 - 区块链数字货币新闻消息资讯 欧洲加密投资公司CoinShares发布了2025年的市场预测&#xff0c;概述了可能塑造行业的关键趋势。 报告指出&#xff0c;在即将上任的川普政府下&#xff0c;监管环境将更加…
阅读更多...
微服务？？

微服务？？

1、微服务架构的定义是什么&#xff1f; 微服务架构是一种将应用程序拆分为多个小型、独立服务的架构风格&#xff0c;每个服务专注于完成特定功能&#xff0c;通过轻量级通信协议&#xff08;如HTTP/REST、gRPC&#xff09;进行协作。 2、微服务和单体架构有哪些主要区别&am…
阅读更多...
ChromeOS 131 版本更新

ChromeOS 131 版本更新

ChromeOS 131 版本更新 1. ChromeOS Flex 自动注册 在 ChromeOS 131 中&#xff0c;ChromeOS Flex 的自动注册功能现已允许大规模部署 ChromeOS Flex 设备。与 ChromeOS 零接触注册类似&#xff0c;自动注册将通过组织管理员创建的注册令牌嵌入到 ChromeOS Flex 镜像中。这将…
阅读更多...
【LeetCode】394、字符串解码

【LeetCode】394、字符串解码

【LeetCode】394、字符串解码 文章目录 一、递归: 嵌套类问题1.1 递归: 嵌套类问题 二、多语言解法 一、递归: 嵌套类问题 1.1 递归: 嵌套类问题 // go func decodeString(s string) string {// 如果遇到 嵌套括号的情况, 则递归// 可能连续多位数字, 则 通过 cur cur * 10 …
阅读更多...
【漏洞复现】英飞达医学影像存档与通信系统 WebUserLogin.asmx 信息泄露漏洞

【漏洞复现】英飞达医学影像存档与通信系统 WebUserLogin.asmx 信息泄露漏洞

🏘️个人主页： 点燃银河尽头的篝火(●’◡’●) 如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦 一、漏洞概述 1.1 组件描述 英飞达医学影像存档与通信系统主要用于医院影像科室，负责将日常生成的各种医学影像（如核磁共振、CT、超声、X光、红外、显微镜等设备的图…
阅读更多...
Java 中 ConcurrentHashMap 和 HashMap 能存 null 吗？深挖原理和使用场景

Java 中 ConcurrentHashMap 和 HashMap 能存 null 吗？深挖原理和使用场景

前言 当你使用 HashMap 或 ConcurrentHashMap 时&#xff0c;可能会冒出一个经典问题&#xff1a;它们能存储 null 键或 null 值吗&#xff1f; 初学者可能觉得无所谓&#xff0c;试一下不就知道了&#xff0c;但在真实项目中&#xff0c;这个问题可能导致严重的 bug。今天我们…
阅读更多...
0101多级nginx代理websocket配置-nginx-web服务器

0101多级nginx代理websocket配置-nginx-web服务器

1. 前言 项目一些信息需要通过站内信主动推动给用户&#xff0c;使用websocket。web服务器选用nginx&#xff0c;但是域名是以前通过阿里云申请的&#xff0c;解析ip也是阿里云的服务器&#xff0c;甲方不希望更换域名。新的系统需要部署在内网服务器&#xff0c;简单拓扑图如…
阅读更多...
python安装包的几种方法

python安装包的几种方法

要安装一个Python包&#xff0c;通常有几种方法&#xff0c;具体取决于包的来源和类型。以下是几种常见的安装方法&#xff1a; 1. 使用pip安装&#xff08;推荐&#xff09; 如果你想要安装的包已经在PyPI&#xff08;Python Package Index&#xff09;上注册&#xff0c;你…
阅读更多...
Everything实现，快速搜索文件

Everything实现，快速搜索文件

最近编写NTFS文件实时搜索工具, 类似 Everything 这样, 翻阅了很多博客, 结果大致如下: 1.分析比较肤浅, 采用USN日志枚举来获取文件记录 速度一言难尽, 因为日志枚举的是全盘所有文件的所有日志, 记录比文件记录还多, 速度当然很慢, 还有的甚至于是 使用 DeviceIoControl 函数…
阅读更多...
R 基础运算

R 基础运算

R 基础运算 R 是一种广泛使用的统计编程语言&#xff0c;它提供了强大的数据操作和分析功能。基础运算在 R 中非常重要&#xff0c;因为它们是进行更复杂计算和数据分析的基础。本文将详细介绍 R 中的基础运算&#xff0c;包括算术运算、逻辑运算、向量化和矩阵运算。 一、算…
阅读更多...
京东大数据治理探索与实践 | 京东零售技术实践

京东大数据治理探索与实践 | 京东零售技术实践

01背景和方案 在当今的数据驱动时代&#xff0c;数据作为关键生产要素之一&#xff0c;其在商业活动中的战略价值愈加凸显&#xff0c;京东也不例外。 作为国内领先的电商平台&#xff0c;京东在数据基础设施上的投入极为巨大&#xff0c;涵盖数万台服务器、数 EB 级存储、数百…
阅读更多...
nodejs搭配express网站开发后端接口设计需要注意事项

nodejs搭配express网站开发后端接口设计需要注意事项

nodejs搭配express网站开发后端接口设计需要注意事项&#xff01;为了回避一些常见的误区&#xff0c;今天和大家汇总一下&#xff0c;最近我遇到的一些错误信息&#xff0c;虽然都是小问题&#xff0c;但是还是需要分享一下&#xff0c;以免大家再次犯错。 1&#xff1a;第一个…
阅读更多...
解决vscode ssh远程连接服务器一直卡在下载 vscode server问题

解决vscode ssh远程连接服务器一直卡在下载 vscode server问题

目录 方法1&#xff1a;使用科学上网 方法2&#xff1a;手动下载 方法3 在使用vscode使用ssh远程连接服务器时&#xff0c;一直卡在下载"vscode 服务器"阶段&#xff0c;但MobaXterm可以正常连接服务器&#xff0c;大概率是网络问题&#xff0c;解决方法如下: 方…
阅读更多...
Spring Boot实现OAuth2.0登录实战

Spring Boot实现OAuth2.0登录实战

一、前言 最近在研究Springboot Vue 的前后端分离框架&#xff0c;刚开始做登录功能&#xff0c;做着做着觉得普通账户密码登录太简单了&#xff0c;决定再加上 GitHub授权 和 人脸识别等多种快捷登录方式。 而GitHub授权登录正好用到了OAuth2.0中最复杂的授权码模式&#xf…
阅读更多...
电脑开机提示error loading operating system怎么修复？

电脑开机提示error loading operating system怎么修复？

前一天电脑还能正常运行&#xff0c;但今天启动时却显示“Error loading operating system”&#xff08;加载操作系统错误&#xff09;。我已经仔细检查了硬盘、接线、内存、CPU和电源&#xff0c;确认这些硬件都没有问题。硬盘在其他电脑上可以正常使用&#xff0c;说明不是硬…
阅读更多...
Java web的发展历史

Java web的发展历史

目录 前言&#xff1a; 一.Model I和Model II 1.Model I开发模式 ​编辑 2.Model II开发模式 二. MVC模式 前言&#xff1a; 该篇文章主要介绍了Java web的发展历史&#xff0c;以及MVC相关内容 一.Model I和Model II 1.Model I开发模式 Model1的开发模式是&#xff…
阅读更多...
Flink DataStream API 编程指南

Flink DataStream API 编程指南

（对于Flink的开发，建议使用Java，Scala的支持未来会被移除） DataStream是什么 DataStream API得名于DataStream这个Java类，可以将它们视为可以包含重复项的不可变数据集合。该数据可以是有限的，也可以是无限的，用于处理它们的API是相同的。 DataStream在用法上和普通的…
阅读更多...
Intel-ECI之Codesys PLC + Ethercat 远端IO + Codesys IDE编程

Intel-ECI之Codesys PLC + Ethercat 远端IO + Codesys IDE编程

目录 一、 准备工作 二、安装Codesys 软件 PLC 三、 使用Codesys IDE 编程测试 CODESYS* 是领先的独立于制造商的 IEC 61131-3 自动化软件&#xff0c;适用于工程控制系统。它用于 Intel Edge Controls for Industrial&#xff08;Intel ECI 或 ECI&#xff09;&#xff0c;…
阅读更多...
SQL语句练习

SQL语句练习

阅读《SQL必知必会》&#xff08;第五版&#xff09;然后结合往常表做的练习记录 这里使用的数据库时sqlite3,使用的工具时navicat 表资源链接https://wenku.baidu.com/view/349fb3639b6648d7c1c74652.html 表录入后如上图所示。后面如果有多张表之间的操作&#xff0c;在引入…
阅读更多...
最新文章

Copyright @ 2022~2023