自学成才Flutter 弹性布局、线性布局

本文我们要介绍 Flutter 中布局 Widget，包括弹性布局、线性布局
流式布局和层叠布局。

Flutter中文网

Flutter开发


一、弹性布局--Flex
Flex 类似 Android 中的 FlexboxLayout，和 Expanded 配合使用可以实现子Widget 按照一定比例来分配父容器空间。
使用：
Flex(
direction: Axis.horizontal,
children: [
...
],
)
其中direction：主轴的方向，是必选参数，它的类型是 Axis，有以下两种值：
（1）Axis.horizontal：主轴方向为水平方向，那么子Widget 就会沿水平方向排列，交叉方向是垂直方向。
（2）Axis.vertical：主轴方向为垂直方向，那么子Widget 就会沿垂直方向排列，交叉方向是水平方向。
Flex 的构造函数及参数说明
class Flex extends MultiChildRenderObjectWidget {
Flex({
Key key,
@required this.direction,//必选；类型 Axis；主轴的方向
this.mainAxisAlignment = MainAxisAlignment.start,//可选；类型 MainAxisAlignment；表示子Widget在主轴的对齐方式
this.mainAxisSize = MainAxisSize.max,//可选；类型 MainAxisSize；表示主轴应该占用多大的空间，分为mix 和 max
this.crossAxisAlignment = CrossAxisAlignment.center,//可选；类型 CrossAxisAlignment；表示子Widget在交叉轴的对齐方式
this.textDirection,//可选；类型 TextDirection；表示子Widget在主轴方向上的布局顺序，分为rtl：从右到左 和 ltr：从左到右
this.verticalDirection = VerticalDirection.down,//可选；类型 VerticalDirection；表示子Widget在交叉轴方向上的布局顺序
this.textBaseline,//可选；类型 TextBaseline；排列子Widget 时使用哪个基线
List children = const [],//可选；类型 List< Widget>；Flex布局 里排列的内容
}) : assert(direction != null),
assert(mainAxisAlignment != null),
assert(mainAxisSize != null),
assert(crossAxisAlignment != null),
assert(verticalDirection != null),
assert(crossAxisAlignment != CrossAxisAlignment.baseline || textBaseline != null),
super(key: key, children: children);
...
}
Flexible 与 Expanded
为了避免子Widget 在 Row、Column、Flex中超届，就可以使用 Flexible 和 Expanded，当子Widget 要超过主轴的大小时，会自动换行。其中 Expanded 是 Flexible 的子类。
Flexible(
child: Text('内容'),
)
//或
Expanded(
child: Text('内容'),
)
（1）Flexible 的构造函数及参数说明：
class Flexible extends ParentDataWidget {
const Flexible({
Key key,
this.flex = 1, //可选；类型 int；此 Widget的弹性因子
this.fit = FlexFit.loose,//可选；类型 FlexFit；如何分配弹性Widget在可用空间里的大小
@required Widget child,//必选；类型 Widget；要显示的Widget
}) : super(key: key, child: child);
...
}
（2）Expanded 的构造函数及参数说明：
class Expanded extends Flexible {
/// Creates a widget that expands a child of a [Row], [Column], or [Flex]
/// expand to fill the available space in the main axis.
const Expanded({
Key key,
int flex = 1,
@required Widget child,
}) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}
（3）Flexible 与 Expanded 的区别：
fit 参数不同，Expanded 用的是默认的，当还有剩余空间的时候，会占满剩余的全部空间。而 Flexible 用的是 FlexFit.loose，只占用自身大小的空间。
（4）flex 弹性系数：
当 flex 为0或null，则 child 是没有弹性的，称为非弹性子Widget，非弹性子Widget的大小就是其本身的大小，不会被扩展去占用多余的空间 。
当 flex 大于0时，child 是有弹性的，称为弹性子Widget，首先会计算出第一步所有 flex 为0或null的子Widget 的大小，然后会按照弹性子Widget的flex占所有弹性子Widget的flex总和的比例分割主轴的空闲空间。
二、线性布局
Flutter 的线性布局和 Android 中的一样分为水平方向的线性布局Row和垂直方向的线性布局Column。

Row

使用：
Row(
children: [
Text("Hello Flutter"),
Image.asset(
"images/flutter.png",
width: 200,
)
],
)
Row 的构造函数及参数说明：
class Row extends Flex {
Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,//可选；类型 MainAxisAlignment；表示子Widget 在主轴的对齐方式
MainAxisSize mainAxisSize = MainAxisSize.max,//可选；类型 MainAxisSize；表示主轴应该占用多大的空间
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,//可选；类型 CrossAxisAlignment；表示子Widget在交叉轴的对齐方式
TextDirection textDirection,//可选；类型TextDirection；表示子Widget在主轴方向上的布局参数
VerticalDirection verticalDirection = VerticalDirection.down,//可选；类型VerticalDirection；表示子Widget在交叉轴方向上的布局顺序
TextBaseline textBaseline,//可选；类型TextBaseline；排列子Widget时使用哪个基线
List children = const [],//可选；类型List< Widget>；Flex布局里排列的内容
}) : super(
children: children,
key: key,
direction: Axis.horizontal,
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: mainAxisSize,
crossAxisAlignment: crossAxisAlignment,
textDirection: textDirection,
verticalDirection: verticalDirection,
textBaseline: textBaseline,
);
}

Column

使用：
Column(
children: [
Text("Hello Flutter"),
Image.asset(
"images/flutter.png",
width: 200,
)
],
)
Column 的构造函数及参数说明：
和 Row 的参数一样
注意：如果 Row 嵌套 Row，或者 Column 嵌套 Column，那么只有最外面的 Row 或 Column 会占用尽可能大的空间，里面 Row 或 Column 所占用的空间为实际的大小。
三、流式布局--Wrap
页面元素的宽度可以按照屏幕分辨率进行适配调整，把超出屏幕显示范围的控件自动换行。
使用：
Wrap(
direction: Axis.horizontal,
children: [
...
]
)
代码示例：
import 'package:flutter/material.dart';
class WrapWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'WrapWidget',
home: new Scaffold(
appBar: new AppBar(
title: new Text('WrapWidget'),
),
body: Wrap(
direction: Axis.horizontal,
spacing: 10.0,
runSpacing: 5.0,
children: [
new Chip(
avatar: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Text('1'),
),
label: new Text('AAAAAAAAAA')),
new Chip(
avatar: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Text('1'),
),
label: new Text('BBBBB')),
new Chip(
avatar: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Text('1'),
),
label: new Text('CCCCCCCCCCC')),
new Chip(
avatar: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Text('2'),
),
label: new Text('DDDDDDDD')),
new Chip(
avatar: new CircleAvatar(
backgroundColor: Colors.blue,
child: new Text('2'),
),
label: new Text('EEEEEE')),
],
),
),
);
}
}
运行结果：
Wrap 的构造函数及参数说明：
class Wrap extends MultiChildRenderObjectWidget {
Wrap({
Key key,
this.direction = Axis.horizontal,//可选；类型 Axis；主轴的方向，默认是 Axis.horizontal
this.alignment = WrapAlignment.start,//可选；类型 WrapAlignment；子Widget在主轴上的对齐方式，默认值为WrapAlignment.start，和MainAxisAlignment的一样
this.spacing = 0.0,//可选；类型 double；主轴的方向间距
this.runAlignment = WrapAlignment.start,//可选；类型 WrapAlignment；Wrap 会自动换成或换列，runAlignment 就是每行或每列的对齐方式，如果主轴为水平方向，就是每行，如果主轴为竖直方向，就是每列，默认值为WrapAlignment.start，WrapAlignment 的值和 MainAxisAlignment 的一样
this.runSpacing = 0.0,//可选；类型 double；每行或每列之间的间距，默认是0.0
this.crossAxisAlignment = WrapCrossAlignment.start,//可选；类型 WrapCrossAlignment；子Widget 在交叉轴上的对齐方式，WrapCrossAligment.start,WrapCrossAligment的值和MainAxisAligment的一样
this.textDirection,//可选；类型 TextDirection；表示子Widget在主轴方向上的布局顺序
this.verticalDirection = VerticalDirection.down,//可选；类型 VerticalDirection；表示子Widget在交叉轴方向上的布局顺序
List children = const [],//可选；类型 List；Wrap布局里排序的内容
}) : super(key: key, children: children);
...
}
四、层叠布局--Stack
Flutter 中的层叠布局类似 Android 中的 FrameLayout，其子Widget 会按照添加顺序确定显示层级，后面添加的会覆盖在前面添加的 Widget 上面。
使用：
Stack(
children: [
Image.asset(
"images/flutter.png",
width: 200,
fit: BoxFit.cover,
),
Text('Hello Flutter',style: TextStyle(fontSize: 50.0),),
],
)
Stack 的构造函数及参数说明：
class Stack extends MultiChildRenderObjectWidget {
Stack({
Key key,//可选；类型 Key；Widget的标识
this.alignment = AlignmentDirectional.topStart,//可选；类型AlignmentDirectional
this.fit = StackFit.loose,//可选；类型 StackFit；此参数用于决定 non-positioned 子Widget 如何去适应Stack的大小
this.overflow = Overflow.clip,//可选；类型 Overflow；决定如何显示超出 Stack显示空间的子Widget
List children = const [],//可选；类型 List；Stack布局里排序的内容
}) : super(key: key, children: children);
...
}
（1）alignment 参数：
决定如何对齐 non-positioned 子Widget 和部分 position 子Widget，默认值为Alignment.topStart，部分 positioned 子Widget，在某一个轴上没有定义的，这个轴就使用 alignment 的值，比如left、right为横轴，left 和right 都没有定义，就是横轴没有定义，只要这两个一个有值，这个轴就算有值；top、bottom为纵轴，同理。
AlignmentDirectional 的值：
AlignmentDirectional.topStart：上边 start 对齐
AlignmentDirectional.topCenter：上边 居中 对齐
AlignmentDirectional.topEnd：上边 end 对齐
AlignmentDirectional.centerStart：中间 start 对齐
AlignmentDirectional.center：中间对齐
AlignmentDirectional.centerEnd：中间 end 对齐
AlignmentDirectional.bottomStart：下边 start 对齐
AlignmentDirectional.bottomCenter：下边 居中 对齐
AlignmentDirectional.bottomEnd：下边 end 对齐
（2）fit 参数：
用于决定 non-positioned 子Widget 如何去适应Stack的大小。
StackFit 的值：
StackFit.loose：使用子Widget 自身的大小
StackFit.expand：子Widget 扩伸到 Stack 的大小
StackFit.passthrough：Stack 的父Widget 的约束无修改的传递给 Stack 的子Widget
（3）overflow 参数：
决定如何显示超出 Stack显示空间的子Widget。
overflow 的值：
Overflow.visible：超出部分仍能看见
Overflow.clip：超出部分会被剪裁
Stack 的子Widget
为了确定子Widget 到父容器四个角的位置，Stack将子Widget 分为两类：positioned 子Widget 和 non-positioned 子Widget。
（1）Positioned
positioned 子Widget 是指被 Positioned 嵌套起来的 Widget，Positioned 可以控制子Widget 到父容器四个边的距离。
使用：
Stack(
fit: StackFit.expand,
children: [
Positioned(
left: 50,
top: 100,
child: Image.asset(
"images/flutter.png",
width: 200,
fit: BoxFit.cover,
),
),
Text('Hello Flutter'),
],
),
Positioned 的构造函数及参数说明：
class Positioned extends ParentDataWidget {
const Positioned({
Key key,//可选；类型 Key；Widget的标识
this.left,//可选；类型 double；离Stack左边的距离
this.top,//可选；类型 double；离Stack上边的距离
this.right,//可选；类型 double；离Stack右边的距离
this.bottom,//可选；类型 double；离Stack底边的距离
this.width,//可选；类型 double；指定Widget的宽度
this.height,//可选；类型 double；指定Widget的高度
@required Widget child,
}) : assert(left == null || right == null || width == null),
assert(top == null || bottom == null || height == null),
super(key: key, child: child);
...
}
注意：此处的width、height 是用于配合 left、top、right、bottom 来定位 Widget 的。并且在水平方向上，只能指定 left、right、width 三个属性中的两个，如果三个都指定就会报错；垂直方向同理。
（2）non-positioned子Widget
non-positioned 子Widget 就是不用 Positioned 嵌套起来的 Widget，non-positioned 子Widget 使用 Stack 设置的 alignment 来确定自己在父容器里的位置。

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

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

相关文章

数仓建模—企业数字化转型的本质

数仓建模—企业数字化转型的本质

数仓建模—企业数字化转型的本质 数字化转型与数字化、数字化建设、数字化管理到底有什么差别？企业的数字化建设重点关注哪两个层面的实现？数字化转型中的“转型”到底指的是什么？数字化转型对企业有哪些最重要的挑战？转型的终极目标是什么？客户价值实现是转型的结果还是逻…
阅读更多...
Web前端三大主流框架：React、Vue和Angular

Web前端三大主流框架：React、Vue和Angular

在当前的Web开发领域&#xff0c;前端框架的选择对于项目的成功至关重要。作为一名资深的IT技术员&#xff0c;我对前端技术的发展和行业趋势保持着持续的关注。本文将介绍当前Web前端三大主流框架&#xff1a;React、Vue和Angular&#xff0c;并分析它们各自的优势。 React&a…
阅读更多...
MyBatis通用Mapper：简化数据库操作的利器

MyBatis通用Mapper：简化数据库操作的利器

引言 在软件开发中&#xff0c;数据库操作是不可或缺的一部分。通常我们会使用mybatis&#xff0c;的MBG插件&#xff0c;自动生成表对应的基本操作语句xml。 当我们的表字段发生变化的时候&#xff0c;我们需要修改实体类和Mapper文件定义的字段和方法。如果是增量维护&…
阅读更多...
【学习笔记】数据结构（一）

【学习笔记】数据结构（一）

基本概念和术语 &#x1f449;数据&#xff1a;所有能被输入到计算机中&#xff0c;且被计算机处理的符号的集合&#xff1b; 是计算机操作对象的总称&#xff1b;是计算机处理信息的载体&#xff1b;是信息的某一种特定的符号表示形式包括数值型数据、非数值型数据 &#x1…
阅读更多...
git生成密钥（免密）

git生成密钥（免密）

生成SSH密钥对的方法如下&#xff1a; 打开Git Bash。 输入以下命令生成新的SSH密钥对&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 这里的 -C 参数后面跟的是你的邮箱地址&#xff0c;通常用于标识这个密钥。 当系统提示你“Enter a fil…
阅读更多...
汇编概论和实践

汇编概论和实践

一 汇编第一例 C代码 #include <stdio.h>int main() {printf("Hello, World!\n");return 0; }对应的汇编 .LC0:.string "Hello, World!"main:pushq %rbpmovq %rsp, %rbpleaq .LC0(%rip), %rdicall puts@PLTmovl $0, %eaxpopq %rbpret 二 CPU架构…
阅读更多...
Apache Pulsar 中文社区有奖问卷调查（2024 上半年度）

Apache Pulsar 中文社区有奖问卷调查（2024 上半年度）

Apache Pulsar 中文社区有奖问卷调查&#xff08;2024 上半年度&#xff09; &#x1f4e3; &#x1f4e3; &#x1f4e3; Hi&#xff0c;Apache Pulsar 社区的小伙伴们&#xff0c;社区 2024 上半年度的有奖问卷调查来啦&#xff01; &#x1f64c; 本次调查旨在了解用户使用 …
阅读更多...
涂装线体智能化管理：RFID技术的典范案例

涂装线体智能化管理：RFID技术的典范案例

涂装线体智能化管理&#xff1a;RFID技术的典范案例 汽车涂装是汽车制造过程中极为关键的一环&#xff0c;涉及多道工序&#xff0c;如预处理、电泳、中涂、面漆等&#xff0c;每一步都需要精确控制以确保车身表面的质量和美观。传统方式下&#xff0c;车辆在不同工位间的流转依…
阅读更多...
新火种AI|OpenAI要和苹果合作了？微软有些不高兴

新火种AI|OpenAI要和苹果合作了？微软有些不高兴

作者&#xff1a;一号 编辑&#xff1a;美美 和苹果之间的合作&#xff0c;可能会称为Altman引以为傲的功绩。 根据 The Information 援引知情人士的消息&#xff0c;OpenAI 已经和苹果达成了协议&#xff0c;将在其产品中运用 OpenAI 的对话式 AI。 如果进展顺利&#xff…
阅读更多...
vue-cli搭建的项目如何去掉vue默认的favicon.ico

vue-cli搭建的项目如何去掉vue默认的favicon.ico

vue-cli搭建的项目如何去掉vue默认的favicon.ico 一、删除 public 目录下的 favicon.ico 文件二、替换<link> 要在 Vue CLI 生成的项目中移除默认的 favicon.ico 并使用浏览器默认图标&#xff08;如 Google 默认图标&#xff09;&#xff0c;您可以按照以下步骤进行&…
阅读更多...
SpringBoot案例,通关版

SpringBoot案例,通关版

项目目录 此项目为了伙伴们可以快速入手SpringBoot项目,全网最详细的版本,每个伙伴都可以学会,这个项目每一步都会带大家做,学完后可以保证熟悉SpringBoot的开发流程项目介绍:项目使用springboot mybatis进行开发带你一起写小项目先把初始环境给你们第一步新建springboot项目返…
阅读更多...
基于知识图谱分析贸易关系走向

基于知识图谱分析贸易关系走向

基于知识图谱分析贸易关系走向 前言一、基础数据二、贸易规则三、知识图谱可视化四、完整代码 前言 知识图谱是一种用图模型来描述知识和建模世界万物之间的关联关系的技术方法。在贸易关系的分析中&#xff0c;知识图谱可以将各个国家、地区、商品、贸易政策等作为节点&#…
阅读更多...
人脸识别模型与人类视觉识别的对比——评估人脸识别模型存在偏见是否比人类的偏见大？

人脸识别模型与人类视觉识别的对比——评估人脸识别模型存在偏见是否比人类的偏见大？

1. 概述 人脸识别系统是一个几十年来一直备受关注的研究领域。而且在过去的几年中。公司和政府一直在积极引入人脸识别系统&#xff0c;并且我们看到越来越多的机会可以看到人脸识别系统。例如&#xff0c;有的系统可以随便介绍&#xff0c;如搜索特定人的图像&#xff08;图像…
阅读更多...
Appium安装及配置（Windows环境）

Appium安装及配置（Windows环境）

在做app相关自动化测试&#xff0c;需要使用appium来做中转操作&#xff0c;下面来介绍一下appium的环境安装配置 appium官方文档&#xff1a;欢迎 - Appium Documentation 一、下载appium 下载地址&#xff1a;https://github.com/appium/appium-desktop/releases?page3 通…
阅读更多...
网络安全岗秋招面试题及面试经验分享

网络安全岗秋招面试题及面试经验分享

Hello&#xff0c;各位小伙伴&#xff0c;我作为一名网络安全工程师曾经在秋招中斩获&#x1f51f;个offer&#x1f33c;&#xff0c;并在国内知名互联网公司任职过的职场老油条&#xff0c;希望可以将我的面试的网络安全大厂面试题和好运分享给大家~ 转眼2024年秋招又快到了金…
阅读更多...
计算机网络基础知识（持续更新中）

计算机网络基础知识（持续更新中）

目录 前言 第一章&#xff1a;概述 一、因特网概述 二、三种交换方式 前言 为夯实计算机网络基础知识&#xff0c;本篇跟随b站的胡科大教书匠走进计算机网络的世界&#xff0c;仅记录计算机网络中的重点知识。 第一章&#xff1a;概述 一、因特网概述 1. 网络、互联网&am…
阅读更多...
悬剑武器库5.04版

悬剑武器库5.04版

工具介绍 悬剑5 基于“悬剑网盘”精选工具集悬剑5“飞廉”云武器库制作。 操作系统&#xff1a;Windows 10 专业版 锁屏密码&#xff1a;secquan.org 解压密码: 圈子社区secquan.org 镜像大小&#xff1a;33.1GB 系统占用空间63.0 GB 镜像导入 下载镜像&#xff0c;文末…
阅读更多...
TinTinLand Web3 + AI 共学月｜五周上手，捕获浪潮碰撞下的无限机遇

TinTinLand Web3 + AI 共学月｜五周上手，捕获浪潮碰撞下的无限机遇

近期&#xff0c;斯坦福大学人文x人工智能研究所&#xff08;Stanford HAI&#xff09;发布了《2024 年人工智能指数报告》&#xff08;Artificial Intelligence Index Report 2024&#xff09;&#xff0c;指出当前人工智能的发展已全面改变社会的前沿风向&#xff0c;其中据 …
阅读更多...
使用正则表达式分割字符串

使用正则表达式分割字符串

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 split()方法用于实现根据正则表达式分割字符串&#xff0c;并以列表的形式返回。其作用同字符串对象的split()方法类似&#xff0c;所不同的就是分割…
阅读更多...
【自动化】WebUI自动化通过读取用户数据的方式启动浏览器实现绕过相关登录验证的方法。

【自动化】WebUI自动化通过读取用户数据的方式启动浏览器实现绕过相关登录验证的方法。

背景说明 我相信做自动化测试或者实现UI自动化相关功能的同学肯定碰到过，每次写好脚本执行时都是默认打开一个 “新”的浏览器，我的意思是就跟刚下载的浏览器一样。而不是平时日常使用着的浏览器的状态，日常使用浏览器时只要近期登录过，那么不久再打开是不需要重新登录的。…
阅读更多...
最新文章

Copyright @ 2022~2023