Flutter 学习笔记 (二) —— Flutter布局及常用widget总结

2023-11-03

前言

在Flutter里,UI控件就是Widget,Widget根据不同的功能可以分为结构元素(如按钮或菜单),文本样式(字体或者颜色方案),布局属性(如填充,对齐,居中),可以这么理解,一个flutter的页面是有一棵树型的Widget组成,包括根节点,树枝和树叶,全都是Widget,只是Widget嵌套Widget,那就可以用下面这张图来表示:
在这里插入图片描述

1、初识StatelessWidget和StatefulWidget

StatelessWidget是一个不需要状态更改的widget, 它没有要管理的内部状态。当您描述的用户界面部分不依赖于对象本身中的配置信息以及widget的BuildContext 时,无状态widget非常有用。

StatefulWidget 是可变状态的widget。 使用setState方法管理StatefulWidget的状态的改变。调用setState告诉Flutter框架,某个状态发生了变化,Flutter会重新运行build方法,以便应用程序可以应用最新状态。状态是在构建widget时可以同步读取的信息,可能会在widget的生命周期中发生变化。确保在状态改变时及时通知状态变化是widget实现者的责任。当widget可以动态更改时,需要使用StatefulWidget。

2、Flutter常用布局

Flutter中拥有30多种预定义的布局widget,常用的有Container、Padding、Center、Flex、Row、Colum、ListView、GridView。用一个表格列出它们的特性和使用。
在这里插入图片描述

Container:一个拥有绘制、定位、调整大小的widget。使用如下:
在这里插入图片描述

Padding:可以给其子节点添加填充(留白),和边距效果类似。
在这里插入图片描述

Center:将其子widget居中显示在自身内部的widget。
在这里插入图片描述
Colum:在垂直方向上排列子Widget。(线面用container填充颜色看起来效果明显一点)
在这里插入图片描述

Row:在水平方向上排列子widget。
在这里插入图片描述

Expanded组件:可以使Row、Column、Fiex等子组件在其主轴上方向展开并填充可用的空间,这里注意:Expanded组件必须用在Row、Column、Fiex内,并且从Expanded到封装它的Row、Column、Flex的路径必须只包括StatelessWidgets或者StatefulWidgets(不能是其他类型的组件,像RenderObjectWidget,它是渲染对象,不再改变尺寸,因此Expanded不能放进RenderObjectWidget)
在这里插入图片描述

ListView:是最常用的可滚动组件之一,它可以沿一个方向线性排布所有子组件。
默认构造函数有一个children参数,它接受一个Widget列表(List)。这种方式适合只有少量的子组件的情况,因为这种方式需要将所有children都提前创建好(这需要做大量工作),而不是等到子widget真正显示的时候再创建,也就是说通过默认构造函数构建的ListView没有应用基于Sliver的懒加载模型。实际上通过此方式创建的ListView和使用SingleChildScrollView+Column的方式没有本质的区别.
在这里插入图片描述

ListView.builder:适合列表项比较多(或者无限)的情况,因为只有当子组件真正显示的时候才会被创建,也就说通过该构造函数创建的ListView是支持基于Sliver的懒加载模型的。
在这里插入图片描述

GridView可以构建一个二维网格列表。
在这里插入图片描述
这里子元素的大小是通过crossAxisCountchildAspectRatio两个参数共同决定的。注意,这里的子元素指的是子组件的最大显示空间,注意确保子组件的实际大小不要超出子元素的空间。

GridView.Builder:适合表格比较或无限的情况
在这里插入图片描述

上面就是一些常用widget的简单使用示例了,每个widget还有很多的属性就自己下去探索啦!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter 学习笔记 (二) —— Flutter布局及常用widget总结 的相关文章

  • Android:自动从项目包中删除未使用的图像

    我正在开发一个相当大的android项目 并且在drawable文件夹中有很多图像 其中许多图像未在项目中使用 因为它们已被替换 并且占用了宝贵的空间 有什么方法可以自动找到这些图像并删除它们 而不是搜索项目中的每个图像 我使用过的一些工具
  • 动画图像视图

    目前我正在开发一款游戏 这是我的游戏的详细信息 用户应选择正确的图像对象 我希望图像从左到右加速 当他们到达终点时 他们应该再次出现在活动中 这是我正在处理的屏幕截图 我有 5 个图像视图 它们应该会加速 您有此类动画的示例代码吗 非常感谢
  • Android 6.0 缺乏访问相机服务的权限

    我在 Android 6 0 中使用 Camera2API 我在Android 5 0中没有报错 然而 当我在 Android 6 0 中使用我的代码时 我遇到了问题 问题是有时我可以成功打开相机并拍照 但有时相机打不开 出现错误 java
  • IOS Swift 从数组中搜索表

    我刚刚开始学习 swift 我正在研究 tableview 和 searchbar 功能 下面我有我的数组 它是水果列表 var fruits String Apple Green Pear Green Banana Yellow Oran
  • 无法发出桥接标头的预编译标头

    我从 GitHub 下载了一个项目 然后 pod 了以下文件 其中一些文件是由 OBJ C 编写的 我使用了桥接头 pod SnapKit pod MJRefresh pod Alamofire pod Kingfisher pod MBP
  • 如何自动下载 Google 签名的通用 APK 以在 Google Play 之外分发?

    我有使用 Play 应用签名的应用 我想将应用程序上传到华为应用程序库 Google 建议从捆绑资源管理器下载已签名的通用 APK 然后上传到 Google Play 之外的商店 如果您还在 Google Play 之外分发您的应用或计划
  • Swift 中的自定义输入视图

    我花了几个小时试图弄清楚如何创建 然后定制inputView上班 我有一个网格TextInputs 想想拼字板 按下时应该加载自定义inputView插入文本 我创建了一个 xib文件包含UI elements为定制inputView 我能
  • 膨胀类片段 InflateException 二进制 XML 文件时出错

    我正在使用 Material Design 和 NavigationDrawer 布局等设计我的第一个应用程序 但我遇到了一个问题 该应用程序非常简单 它只显示文本 并且基于 Android Studio 中提供的模板 尝试启动我的应用程序
  • 如何在 Swift 编程中获得基于导航的模板功能

    我的项目需要一个导航控制器 并且我的应用程序最初有一个社交登录 一旦验证通过 用户将被推送到另一个视图 我在其中显示一个具有 2 个选项卡的选项卡控制器 我不知道如何在 Swift 编程中做到这一点 我已将视图控制器嵌入到导航控制器中 一旦
  • setKeyListener 将覆盖 setInputType 并更改键盘

    大家好 我在两个设备之间遇到问题 在实践中使用InputType和KeyListener我正在操纵一个EditText让它从数字键盘接收逗号和数字 有关更多背景信息 请检查我之前的question https stackoverflow c
  • 从 iOS 中的 App Delegate 调用当前视图控制器中的方法

    我有两个视图控制器 BuildingsViewController 和 RoomsViewController 它们都使用应用程序委托中名为上传的函数 上传函数基本上执行一个 HTTP 请求 如果成功或不成功 都会触发 uialertvie
  • 如何将图像放在 UIButton 中文本的右侧?

    如果可以避免的话 我不想使用子视图 我想要一个UIButton其中包含背景图像 文本和图像 现在 当我这样做时 图像位于文本的左侧 背景图像 文本和图像都有不同的高亮状态 最简单的解决方案 iOS 10 及更高版本 Swift button
  • DialogFragment在Android中的位置

    我有一个DialogFragment显示一个View就像弹出屏幕一样 窗口始终出现在屏幕中间 有没有办法设置位置DialogFragment窗户 我已经查看了但还没有找到任何东西 尝试这样的事情 Override public View o
  • 在运行时用Dagger添加Retrofit RequestInterceptor

    我正在使用匕首和改装 我用 Dagger 注入我的 Retrofit 服务 现在我想做一个授权请求来获取 accessToken 之后 我想使用请求拦截器来增强我的 api 模块 以便将此访问令牌用于将来的请求 我的想法是在收到访问令牌后使
  • 无法在 BlackBerry Playbook 上设置音量

    我在更改黑莓游戏书的音量时遇到问题 首先 我将 Android 应用程序重新打包到 Palybook 应用程序 我需要使用搜索栏更改黑莓剧本的音量 并在搜索监听器中设置音频管理器音量 这是代码 audioManager AudioManag
  • 如何区分iphone4和iphone 3

    我正在尝试使用 cocos2d 引擎为 iphone 构建游戏 我想知道如何区分用户使用的是 iphone 4 还是 iphone 3 因为我想为 iphone4 加载高分辨率图形 为 iphone 3 加载低分辨率图形 我知道我是否在以下
  • Android:毫米或英寸尺寸的视图尺寸不正确

    我有一个布局高度为 10mm 的按钮 在大多数设备上看起来都是正确的 但在 Lg Optimus 2X 和 Motorola Defy 上 按钮的尺寸大约只有一半 我检索了这些设备上的 DisplayMetrics 信息 这是一个简短的概述
  • Xcode 找不到我的静态库!

    这是链接器错误 i686 apple darwin10 gcc 4 2 1 Users william Documents SettingsLibrary build Debug iphonesimulator libSettingsLib
  • Android 方向传感器的替代品是什么?

    大家好 我正在为 Android 构建 3D 游戏 我目前正在尝试在我的游戏中添加一个传感器 允许玩家倾斜机器人作为其控制 理想情况下 我想使用方向传感器 但我注意到它已被弃用 有谁知道如何检测 Android 中的倾斜并且不使用这个传感器
  • 如何在Android中显示进度对话框?

    我想展示ProgressDialog当我单击 登录 按钮时 需要一些时间才能移动到另一个页面 我怎样才能做到这一点 ProgressDialog pd new ProgressDialog yourActivity this pd setM

随机推荐

  • Zebra-VTYSH源码分析和改造(二):深入代码

    分析Zebra VTYSH的源码 首先从main函数开始 在ztysh main c中找到main函数 来进一步分析流程执行如下图所示 在平时的使用中我们会发现 配置的时候有很多的视图 View 每个视图中有不同的命令可供用户输入进行配置
  • STM32—Flash读写详解

    目录 前言 介绍 STM32 FLASH 闪存的编程和擦除 Flash读写的标准库函数 软件设计 FLASH的读取 直接读取某一地址的内容 读取选定位置的选定大小的内容 FLASH的写入 直接使用标准库写入 写入选定位置的选定大小的内容 如
  • mega328p-ADC,PWM,UART驱动

    ADC驱动 函 数 名 Ai Init 函数功能 Ai端口初始化 输入参数 void 输出参数 void 返 回 值 void 参考文档 void 创 件 人 程强刚 创建日期 2016 02 09 修改历史 void Ai Init vo
  • 身份认证之多因素身份认证(MFA)

    我们大多数人都同意密码是不安全的身份验证形式这一观点 更糟糕的是 它完全不智能 但这引发了一个问题 如果密码不是解决安全问题的答案 那什么是 目前 答案可能是多因素身份验证 MFA 多因素身份验证增加了一层关键的防御 MFA使用两个或多个因
  • Filter过滤器完成验证代码的封装

    Filter过滤器完成验证代码的封装 filter是什么 1 使用filter 2 filter配置到项目中 验证用户权限是需要反复使用的代码块 把他封装到filter中 减少代码冗余 filter是什么 init 方法 初始化方法 在创建
  • 主板上还剩啥?CPU整合GPU/北桥/南桥

    泡泡网主板频道2月6日 众所周知 主板上最重要 成本最高的两颗芯片 被称为北桥和南桥 其中北桥负责与处理器对接 主要功能包括 内存控制器 PCI E控制器 集成显卡 前 后端总线等 都是速度较快的模块 而南桥则负责外围周边功能 速度较慢 主
  • c++ 读写excel_每天10分钟,轻松入门python,json、csv等读写

    JSON的全称是 JavaScript Object Notation 意思是JavaScript对象表示法 它是一种基于文本 独立于语言的轻量级数据交换格式 这种数据在弄爬虫的时候 经常会见到这类型的数据 下面展示一个简单的json数据
  • 利用计数器实现任意分频,占空比为60%(任意占空比)电路 [VHDL]

    本次实验为利用计数器实现分频常数为24000 占空比为60 的电路 也可以设置为任意分频 任意占空比的电路 一 设计思路 设计分析 要将原来的占空比为50 大频率的信号重新设为60 占空比 频率较小的周期信号 其中频率的思想就是分频器 利用
  • Northstar软件下载 以及搭建机器人时遇到的坑

    上个学期学机器人的时候 老师让我们用 innostar 创意之星 做出一个机器人来 但我翻遍全网也没找到创意之星的配套软件 我找了三天也没找到 公司官网也没有 给博创的人发邮件也不回 给我整的心态爆炸 为了方便后来的学弟学妹们 现在把我找到
  • Java 优先队列(PriorityQueue)总结

    PriorityQueue 实现的是 Queue 接口 可以使用 Queue 提供的方法 以及自带的方法 1 PriorityQueue概述 Java PriorityQueue 实现了 Queue 接口 不允许放入 null 元素 其通过
  • LVGL学习笔记

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 文章目录 前言 一 硬件要求 二 移植 1 准备工作 2 文件准备 3 加入工程 前言 LVGL 轻巧而多功能的图形库 是一个免费的开放源代码图形库 它提供创建具有易于使用的
  • Shopify Liquid 日期

    Shopify Liquid 日期变量 assign start date now date s assign start date year now date Y assign yoy start start date year minu
  • 基于卷积神经网络的车道线检测

    在本博客中 我们将探讨如何使用卷积神经网络 CNN 在Udacity自动驾驶数据集上进行车道线检测 我们将首先简要介绍自动驾驶的相关知识 然后介绍车道线检测的重要性 接下来 我们将构建一个CNN模型 并在Udacity数据集上对其进行训练和
  • 【Mo 人工智能技术博客】K-means:无监督聚类的经典算法

    K means 无监督聚类的经典算法 作者 郑培 无监督学习是一类用于在数据中寻找模式的机器学习技术 无监督学习算法使用的输入数据都是没有标注过的 这意味着数据只给出了输入变量 自变量 X 而没有给出相应的输出变量 因变量 在无监督学习中
  • 常见的并发模型

    介绍 常见解决并发的策略一般有两种 共享数据和消息传递 基于消息传递的实现有 CSP模型 典型的有Go语言中基于Channel的通讯 Actor模型 典型的有Akka中的Actor模型 CSP模型和Actor模型的简单理解 Don t co
  • linux centos中查看应用进程和杀死进程

    1 ps 表示 查看正在运行中的进程 2 ps ef 表示 查看所有进程的详细信息 3 输入 ps ef grep nmon 表示 搜索nmon相关的进程 4 杀死进程 kill 9 进程号
  • 【常用的反监控(winrdlv3)方法winrdlv3】

    常用的反监控 winrdlv3 方法winrdlv3 方案一 使用silent terminal 禁用 sdhelper2 exe和winrdlv3 exe两个程序进程 加密进程终止或者可以只中止sdhelper2则不会加密也不会被管理员发
  • Python手册(Standard Library)--re

    文章目录 re模块 匹配 返回re对象 MatchObject 查找 检索 替换和分割 flags标志 re 模块使 Python 语言拥有全部的正则表达式功能 compile 函数根据一个模式字符串和可选的标志参数生成一个正则表达式对象
  • 笔记:JavaScript编译与执行

    1 js的编译与执行 事件循环 单线程语言 JavaScript是单线程语言 即在浏览器中一个页面只有一个线程在执行js代码 进程和线程 假设我们有一家工厂 进程 那么 工厂所拥有的独立资源就相当于系统给我们分配的内存 这是独立的 如果我们
  • Flutter 学习笔记 (二) —— Flutter布局及常用widget总结

    前言 在Flutter里 UI控件就是Widget Widget根据不同的功能可以分为结构元素 如按钮或菜单 文本样式 字体或者颜色方案 布局属性 如填充 对齐 居中 可以这么理解 一个flutter的页面是有一棵树型的Widget组成 包