Scaffold 是一个非常重要的布局组件,它提供了一个常见的应用程序结构布局,包含了许多基础的 UI 元素和交互方式。

Scaffold 组件主要由以下几个部分组成:

  1. AppBar:用于显示在页面顶部的应用栏,通常包含标题、导航按钮、操作按钮等。
  2. body:包含了页面主要内容的部分,可以是任意的 Widget 组件,如 ContainerListViewColumn 等。
  3. FloatingActionButton:一个浮动操作按钮,通常用于执行常见的操作,如添加、分享、导航等。
  4. Drawer:一个侧边栏抽屉菜单,可以包含导航链接、设置、用户信息等内容。
  5. BottomNavigationBar:一个底部导航栏,可以切换不同的页面或操作。
  6. 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 布局组件的更多相关文章

  1. 技术胖Flutter第三季-18布局CardWidget 卡片布局组件

    技术胖Flutter第三季-18布局CardWidget 卡片布局组件 博客地址: https://jspang.com/post/flutter3.html#toc-420 最外面是Card布局,里 ...

  2. Jetpack Compose学习(5)——从登录页美化开始学习布局组件使用

    原文:Jetpack Compose学习(5)--从登录页美化开始学习布局组件使用 | Stars-One的杂货小窝 本篇主要讲解常用的布局,会与原生Android的布局控件进行对比说明,请确保了解A ...

  3. Material Design Lite,简洁惊艳的前端工具箱 之 布局组件。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  4. 【BootStrap】 布局组件 II

    BootStrap 布局组件 II ■ 分页 BS中通过.pagination的ul元素来实现一个分页集合,一个典型的分页如下: <ul class="pagination" ...

  5. 【BootStrap】 布局组件 I

    BootStrap布局组件 I 除了在原生的HTML基础上进行了外观和类别上的改进,BS还包装了很多组件进库中,设计网页时我们可以方便地调用这些组件.下面来简略地介绍一下各种各样的组件 ■ 字体图标 ...

  6. 第二百零二节,jQuery EasyUI,Layout(布局)组件

    jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...

  7. react 项目实战(六)提取布局组件

    重复代码是混乱的根源!,本篇文章我们来继续消灭重复代码. 目标 细心的同学应该能发现:每一个Page组件(/src/pages下的组件)的render方法都拥有相似的jsx结构,比如: render ...

  8. 【Flutter学习】页面布局之基础布局组件

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  9. 【Flutter实战】六大布局组件及半圆菜单案例

    老孟导读:Flutter中布局组件有水平 / 垂直布局组件( Row 和 Column ).叠加布局组件( Stack 和 IndexedStack ).流式布局组件( Wrap )和 自定义布局组件 ...

  10. 网易新闻iOS版使用的18个开源组件

    转载来自:http://www.jianshu.com/p/8952944f7566  原文最后编辑时间:2015.05.19 网易新闻iOS版在开发过程中曾经使用过的第三方开源类库.组件 1.AFN ...

随机推荐

  1. Go 基础之基本数据类型

    Go 基础之基本数据类型 目录 Go 基础之基本数据类型 一.整型 1.1 平台无关整型 1.1.1 基本概念 1.1.2 分类 有符号整型(int8~int64) 无符号整型(uint8~uint6 ...

  2. 创建Oracle数据库实例、配置PLSQL连接数据库实例

    方法一:仅安装Oracle即时客户端: 1.安装Oracle即时客户端Instant Client Setup.exe,配置环境变量 2.安装PLSQL工具,配置Oracle主目录名和OCI库 3.配 ...

  3. zabbix监控Tomcat/JVM 实例性能

    1.背景 zabbix-4.0 环境已部署好 JDK .Tomcat环境已部署好 2.配置Tomcat JMX 编辑catalina.sh加入以下配置 # vim /usr/local/tomcat/ ...

  4. codeforce 827div4

    第一次在codeforce上打题,补一下题记录成长 D题 分析:求数组中两个互质的数的最大下标和: 思路:观察到数据范围n是2e5暴力做n^2会超时,再观察数据a[i]最大为1000,所以这2e5个数 ...

  5. 7/10 luoguRound 10 庆典 div3T1

    #include<bits/stdc++.h> using namespace std; int m,n,x; int arr[100005]; int maxi = -1,maxn = ...

  6. HTML DOM之二:事件

    对事件作出反应 当事件发生时,可以执行 JavaScript,比如当用户点击一个 HTML 元素时. 如需在用户点击某个元素时执行代码,请把 JavaScript 代码添加到 HTML 事件属性中: ...

  7. .Net Core 3.1升级 .Net 5后出现代码错误 rzc generate exited with code 1.

    安装.Net 5后出现错误,错误定位到了CodeGeneration相关的文件,找了半天也不知道哪里的问题. 升级类库,清理解决方案,删除obj.bin文件夹什么的卵用没有. 最后发现升级.Net 5 ...

  8. [Python急救站课程]温度转换程序

    华氏温度转换为摄氏度的温度转换程序共有三种写法 一.简单的温度转换程序 TempStr = input("请输入带有符号的温度值: ") # TemStr表示命令,表示占位符.=为 ...

  9. 浅谈斜率优化DP

    前言 考试 T2 出题人放了个树上斜率优化 DP,直接被同校 OIER 吊起来锤. 离 NOIP 还有不到一周,赶紧学一点. 引入 斜率 斜率,数学.几何学名词,是表示一条直线(或曲线的切线)关于(横 ...

  10. 【主流技术】详解 Spring Boot 2.7.x 集成 ElasticSearch7.x 全过程(二)

    目录 前言 一.添加依赖 二. yml 配置 三.注入依赖 四.CRUD 常用 API ES 实体类 documents 操作 常见条件查询(重点) 分页查询 排序 构造查询 测试调用 五.文章小结 ...