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. Perceptual Losses 风格迁移论文复现小记

    看了一篇李飞飞组的论文 Perceptual Losses for Real-Time Style Transfer and Super-Resolution. 论文地址为:https://arxiv ...

  2. Android Kotlin 协程初探

    1 它是什么(协程 和 Kotlin协程) 1.1 协程是什么 维基百科:协程,英文Coroutine [kəru'tin] (可入厅),是计算机程序的一类组件,推广了协作式多任务的子程序,允许执行被 ...

  3. .NET周刊【10月第3期 2023-10-22】

    国内文章 .NET 8 RC 2 发布,将在11月14日发布正式版 https://www.cnblogs.com/shanyou/p/17756172.html 微软于2023年10月10日发布了. ...

  4. CF1854E Games Bundles 题解

    乱搞题 设个 \(dp[i]\) 表示和为 \(i\) 的子序列个数,那么转移是容易的, \(dp[j]+=dp[j-i]\) ,然后就判下 \(dp[60]+dp[60-i]\) 是否大于 \(m\ ...

  5. CF1401B [Ternary Sequence]

    Problem 题目简述 两个序列 \(A, B\).这两个序列都是由 \(0,1,2\) 这三个数构成. \(x_1,y_1,z_1\) 和 \(x_2,y_2,z_2\) 分别代表 \(A\) 序 ...

  6. JVM-内部类分析

    一.内部类和外部类调用及字节码解释 外部类使用 内部类: 非静态内部类: JVM字节码 非静态内部类类 多了一个外部类对象的属性:final synthetic Field this$0:" ...

  7. 深度解析BERT:从理论到Pytorch实战

    本文从BERT的基本概念和架构开始,详细讲解了其预训练和微调机制,并通过Python和PyTorch代码示例展示了如何在实际应用中使用这一模型.我们探讨了BERT的核心特点,包括其强大的注意力机制和与 ...

  8. 【Go 编程实践】从零到一:创建、测试并发布自己的 Go 库

    为什么需要开发自己的 Go 库 在编程语言中,包(Package)和库(Library)是代码组织和复用的重要工具.在 Go 中,包是代码的基本组织单位,每个 Go 程序都由包构成.包的作用是帮助组织 ...

  9. postgresql 最近优化的SQL集合案例、(不写过程了只记录案例,PG优化器问题还是不少)

    案例1: -- 原SQL + 执行计划: explain analyze SELECT G.PID, G.FLOW_ID, G.STATUS, G.ID, AAAAAA.INFO_ID, G.CREA ...

  10. 阿里Java一面,难度适中!(下篇)

    上一次因为文章篇幅和个人精力有限的原因,只分享了淘天的前 6 道题及其答案(点击访问上一篇).接下来,咱们把其他几道题面试题及答案也分享给大家. 1.公司简介 淘天集团就是"淘宝" ...