18、Scaffold 布局组件
Scaffold 是一个非常重要的布局组件,它提供了一个常见的应用程序结构布局,包含了许多基础的 UI 元素和交互方式。
Scaffold 组件主要由以下几个部分组成:
AppBar:用于显示在页面顶部的应用栏,通常包含标题、导航按钮、操作按钮等。body:包含了页面主要内容的部分,可以是任意的 Widget 组件,如Container、ListView、Column等。FloatingActionButton:一个浮动操作按钮,通常用于执行常见的操作,如添加、分享、导航等。Drawer:一个侧边栏抽屉菜单,可以包含导航链接、设置、用户信息等内容。BottomNavigationBar:一个底部导航栏,可以切换不同的页面或操作。SnackBar:一个底部弹出的消息提示条,用于显示短暂的提示信息。
除了以上常用的部分,Scaffold 还支持其他属性和回调函数,以定制化页面布局和交互行为,如 backgroundColor 用于设置背景颜色、onTap 用于处理整个页面的点击事件等。
使用 Scaffold 可以帮助开发者快速构建具有常见应用程序结构的页面,而无需手动处理底层的布局细节。它提供了默认的导航、状态栏、菜单等功能,同时也可以通过嵌套其他布局组件进行自定义扩展。
总之,Scaffold 是一个灵活且功能丰富的布局组件,为 Flutter 应用程序提供了便捷的应用结构布局,并支持各种交互和定制化配置。
class HomePage2 extends StatefulWidget {
const HomePage2({super.key});
@override
State<HomePage2> createState() => _HomePage2State();
}
class _HomePage2State extends State<HomePage2> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("这是导航栏")),
floatingActionButton: FloatingActionButton(onPressed: () { //只能在Scaffold中使用
},child: const Icon(Icons.add),),
body: ListView(
children: const [
ListTile(title: Text("我是一个列表"),),
Divider(),
],
),
);
}
}
18、Scaffold 布局组件的更多相关文章
- 技术胖Flutter第三季-18布局CardWidget 卡片布局组件
技术胖Flutter第三季-18布局CardWidget 卡片布局组件 博客地址: https://jspang.com/post/flutter3.html#toc-420 最外面是Card布局,里 ...
- Jetpack Compose学习(5)——从登录页美化开始学习布局组件使用
原文:Jetpack Compose学习(5)--从登录页美化开始学习布局组件使用 | Stars-One的杂货小窝 本篇主要讲解常用的布局,会与原生Android的布局控件进行对比说明,请确保了解A ...
- Material Design Lite,简洁惊艳的前端工具箱 之 布局组件。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
- 【BootStrap】 布局组件 II
BootStrap 布局组件 II ■ 分页 BS中通过.pagination的ul元素来实现一个分页集合,一个典型的分页如下: <ul class="pagination" ...
- 【BootStrap】 布局组件 I
BootStrap布局组件 I 除了在原生的HTML基础上进行了外观和类别上的改进,BS还包装了很多组件进库中,设计网页时我们可以方便地调用这些组件.下面来简略地介绍一下各种各样的组件 ■ 字体图标 ...
- 第二百零二节,jQuery EasyUI,Layout(布局)组件
jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...
- react 项目实战(六)提取布局组件
重复代码是混乱的根源!,本篇文章我们来继续消灭重复代码. 目标 细心的同学应该能发现:每一个Page组件(/src/pages下的组件)的render方法都拥有相似的jsx结构,比如: render ...
- 【Flutter学习】页面布局之基础布局组件
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- 【Flutter实战】六大布局组件及半圆菜单案例
老孟导读:Flutter中布局组件有水平 / 垂直布局组件( Row 和 Column ).叠加布局组件( Stack 和 IndexedStack ).流式布局组件( Wrap )和 自定义布局组件 ...
- 网易新闻iOS版使用的18个开源组件
转载来自:http://www.jianshu.com/p/8952944f7566 原文最后编辑时间:2015.05.19 网易新闻iOS版在开发过程中曾经使用过的第三方开源类库.组件 1.AFN ...
随机推荐
- 唱衰这么多年,PHP 仍然还是你大爷!
PHP 是个庞然大物. 尽管有人不断宣称 PHP "即将消亡". 但无法改变的事实是:互联网依然大量依赖 PHP.本文将通过大量的数据和事实告诉你为何 PHP 仍然在统治着互联网, ...
- 一个vuepress配置问题,引发的js递归算法思考
前言 这两天在尝试用语雀+ vuepress + github 搭建个人博客. 小破站地址 :王天的 web 进阶之路 语雀作为编辑器,发布文档推送 github,再自动打包部署,大概流程如下. 问题 ...
- mysql5.5自定义函数-计算并赋值
mysql自定义函数的写法 特别注意,将全部的定义现在最前面,然后再写其他语句,因为之前将定义变量和赋值混着写,死活报错.最后一个前同事高手"邢哥"解决. DELIMITER $$ ...
- vue打包部署遇到的问题
网站上线中遇到的问题(跨域,404,空白页解决方案) 因为本人是后端开发工程师,对前端开发不了解,踩了很多坑,所以将踩过的坑分享出来,以供参考 网站地址:这里 这段时间将项目部署到服务器中引发了几个问 ...
- k8s-单节点升级为集群(高可用)
单master节点升级为高可用集群 对于生产环境来说,单节点master风险太大了. 非常有必要做一个高可用的集群,这里的高可用主要是针对控制面板来说的,比如 kube-apiserver.etcd. ...
- 使用fontforge进行字体拆分
fontforge官方网站 游戏开发为了节省内存和资源下载量,需要把字体不用的字删掉,或者拆成多个字体逐级加载,批量操作用UI就比较难搞了,用fontforge搞起来比较顺手 安装fontforge后 ...
- JS逆向实战25——某壳找房模拟登录+百度喵星人指纹加密破解.
声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 目标 目标网站 aHR0c ...
- k8s zookeeper安装(集群版与非集群版)
集群版zookeeper安装 第一步:添加helm镜像源 helm repo add incubator http://storage.googleapis.com/kubernetes-charts ...
- JavaScript:垃圾收集机制
JavaScript具有自动垃圾收集机制.也就是说,执行环境会负责管理代码执行过程中使用的内存.开发人员不必关心内存分配和回收问题. 垃圾收集机制的原理:找到不再继续使用的变量,然后进行释放其占用的内 ...
- 一篇搞定Sentinel-搭建Spring Cloud Alibaba服务组件Sentinel实现服务资源控制
1.Sentinel介绍 随着微服务的流行,服务和服务之间的稳定性变得越来越重要.Sentinel 是面向分布式.多语言异构化服务架构的流量治理组件,主要以流量为切入点,从流量路由.流量控制.流量整形 ...