Flutter MainAxisAlignment.spaceEvently、spaceBetween、spaceAround 区别

最新推荐文章于 2024-08-23 14:17:40 发布
原创 最新推荐文章于 2024-08-23 14:17:40 发布 · 4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flutter

本文详细介绍了Flutter布局中spaceEvently、spaceBetween及spaceAround三种空间分配方式的使用技巧，通过实例展示了不同场景下如何有效利用这些布局属性来美化界面。
部署运行你感兴趣的模型镜像

1.spaceEvently

一行中如果有2个widget(五个五角星暂且看成1个widget),那么除去2widget所占据的宽度，3个红色方块宽度是一样的， 如下图所示

2.spaceBetween

一行中如果有2个widget,那么分布2端，如下图所示

3.spaceAround

一行中如果有2个widget,那么每个widget左右都是相同的方块，如下图所示

您可能感兴趣的与本文相关的镜像

Llama Factory

Llama Factory

模型微调
LLama-Factory

LLaMA Factory 是一个简单易用且高效的大型语言模型（Large Language Model）训练与微调平台。通过 LLaMA Factory，可以在无需编写任何代码的前提下，在本地完成上百种预训练模型的微调

Flutter基础布局
juer2017的博客
07-05 1536
Flutter基础布局
Flutter 基础篇（十二）—，老师讲的真棒
2401_83947398的博客
04-03 1183
— 子Widget对齐起始和末端，其余空间平均分配。—— 富裕空间环绕分配 子—— 富裕空间平均分配Row—— 子Widget在纵轴的起始端—— 子Widget在纵轴居中，富裕空间上下平均分配—— 子Widget在纵轴的末端childrenWidget示例@overrideRow(//改变主轴的方向：从右往左],),Row(//子元素居中],),Container(),//元素排列在侧轴的末端],),),],RowCSSColumn。
Flutter学习之MainAxisAlignment属性详解
weixin_30407099的博客
08-04 878
前言 我们在上一篇文章中，通过两种方式解决了，子widget相对父布局居左和居右。第二种方式是通过Row中的MainAxisAlignment属性实现的，代码非常简单，大家可以去上一篇文章中看看。这篇文章我们将详细讲解MainAxisAlignment这个属性里面值得含义，为什么会能完成我们上一篇的效果。当然这个属性不是Row特有，Column中也有，只不过Row的主轴是水平方向上面的，Colum...
Flutter中MainAxisAlignment和CrossAxisAlignment详解
热门推荐
喻志强的博客
01-16 6万+
Flutter MainAxisAlignment和CrossAxisAlignment详解
flutter MainAxisAlignment.spaceEvenly
09-14 1327
这个放在外面的布局里面，如果弹出键盘，那么这个布局就会不让键盘遮挡，产生变化，这时候里面的widget都会重绘，textfield里面的文字就会没法保存状态 应该是有办法保存状态的，但是目前还不知道怎么保存...
Flutter的MainAxisAlignment用法
weixin_34247299的博客
03-04 865
#Flutter的MainAxisAlignment用法 Row, Column Row是横向排列Widget，类属于androi的Linerlayout横向布局,Column是纵向排列Widget，类属于androi的Linerlayout横向布局 Row({ key mainAxisAlignment mainAxisSize crossAxisAli...
Flutter 10 Flex布局
最新发布
sziitjin的博客
08-23 1359
将 mainAxisAlignment 设置成 spaceBetween，如果 mainAxisSize 设置为 max，则是整个 Row 宽度基础上按照 spaceBetween 的方式进行排列，如果 mainAxisSize 设置为 min，则是三个 Container 宽度之和范围内按照 spaceBetween 的方式进行排列。设置主轴方向，可设置的值为 Axis.horizontal 和 Axis.vertical，交叉轴与主轴方向垂直。Expanded和Flexible。
【Flutter】十二、Flutter中常用的布局容器——Row、Column
MAXLZ的博客
10-11 1046
【Flutter】十二、Flutter中常用的布局容器——Row、Column一、Row1.1 构造函数二、Column 一、Row 继承自Flex。可将children中的widget在水平方向上进行排列。与css的flex(flex-direction:row;)布局相似 1.1 构造函数 Row({ Key key, MainAxisAlignment mainAxisA...
Flutter flutter.gradle 简单分析
SimpleCoder's Blog
04-01 4957
所有的分析基于当前的 1.4.7 版本,flutter sdk 的版本更新可能会修改这个文件 Flutter 1.4.7 • channel dev • https://github.com/flutter/flutter.git Framework • revision 1bfa2f2311 (3 days ago) • 2019-03-29 10:05:18 -0700 Engine • re...
flutter中mainAxisAlignment和crossAxisAlignment的理解
qq_34707150的博客
03-03 5628
刚开始学习flutter时对mainAxisAlignment和crossAxisAlignment这两个属性傻傻的分不清，下面记录一下如何区分。 类代码如下： import 'package:flutter/material.dart'; class ChoicePicture2 extends StatefulWidget { const ChoicePicture2({Key? key}) : super(key: key); @override _PictureState cr
第139天 justify-content的space-between与around有什么区别？
qq_36529240的博客
12-17 1524
justify-content 定义了在 flex 容器中，沿着主轴的布局方式 space-between: 行内均匀分布元素，距离相同，首尾元素距离边界的距离是元素间距的一半 space-around: 行内均匀分布元素，距离相同，首尾元素紧贴边界 ...
Flutter常用组件-布局组件
guyifanclick的博客
03-28 1558
是 Flutter 中用于水平排列子组件的布局组件之一。是 Flutter 中的布局组件之一，用于在重叠的位置上放置子组件。这样的容器组件一起使用，用于控制子组件在主轴（水平方向或垂直方向）和交叉轴（垂直方向或水平方向）上的布局方式。为 2，所以它在主轴上的扩展比例是其他容器的两倍，因此它会占据更多的空间。组件是用于在水平或垂直方向上排列子组件的布局组件之一。组件是用于在布局中占据可用空间的一个子组件，通常用于。组件非常简单，只需要将需要扩展的子组件放置在。的边缘的位置，或者指定子组件的宽度和高度。
flutter的mainAxisAlignment设置分析
senkai123的博客
10-21 535
flutter中的主轴模式设置，主轴的方向决定你用Row或者Column 的widget，如果Row是水平方向，Column 主轴是垂直方向 主轴左对齐 mainAxisAlignment: MainAxisAlignment.start, 主轴右对齐 mainAxisAlignment: MainAxisAlignment.end, 主轴居中对齐 mainAxisAlignment: M...
space-around space-evenly区别
包磊磊的博客
09-16 1096
space-around，共3个元素，每个元素有2侧空隙，共6个空隙平分1380 space-evenly，共3个元素，4个空隙，评分剩余1380，每个345 ———————————————— 版权声明：本文为优快云博主「树欲静而风不止」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/zjy660358/article/details/113935300 ...
css盒子模型flex中属性space-around和space-between的本质理解！！！
qq_63116916的博客
03-06 2512
每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。其实可以从命名来理解，space就是空间，between就是中间的意思，space-between就是把剩余空间均匀分配到子盒子中间，自然而然，最右和最左边的盒子就不给他们空间了，因为中间，什么叫中间？其实可以从命名来理解，space是空间的意思，around是包围的意思，space-around就是平分剩余空间，并把分配到的空间平分到一个子盒子的两侧；相邻子盒子之间，空间相加，自然而然，就会形成最左和最右的空间是子盒子中间空间的一半。
space-around和space-between区别
suimingbo的博客
08-26 4015
这个属性将在Flex容器中平均分配项目之间的空间，同时在首尾两侧也留有一半的空间。也就是说，项目之间的间隔是相等的，并且每个项目与容器的边缘之间的空间是一样的。这意味着容器的总长度可能会大于所有项目宽度的总和。：这个属性将在Flex容器中平均分配项目之间的空间，但没有在首尾两侧留下额外的空间。也就是说，项目之间的间隔是相等的，但第一个项目与容器的起始边缘之间的空间以及最后一个项目与容器的结束边缘之间的空间是零。是CSS中用于控制Flex容器中项目之间间距的两个属性。会在项目之间和首尾两侧都留有空间，而。
Flutter 布局（七）- Row、Column详解
weixin_34023982的博客
08-01 623
本文主要介绍Flutter布局中的Row、Column控件，详细介绍了其布局行为以及使用场景，并对源码进行了分析。 1. Row A widget that displays its children in a horizontal array. 1.1 简介 在Flutter中非常常见的一个多子节点控件，将children排列成一行。估计是借鉴了Web中Flex布局，所以很多属性和表现，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值