关于flutter一行四列的信息

网友投稿 1393 2022-12-22

本篇文章给大家谈谈flutter一行四列,以及对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 今天给各位分享flutter一行四列的知识,其中也会对进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

Flutter开发--如何布局?

相对于iOS开发,Flutter的布局更具有灵活性,每个页面设计都不一样,相同页面可选择的布局方式也不一样,如果单纯的说应该如何去布局,我觉得不现实,大家可以参考下 Flutter官方的布局教程 。接下来,笔者,通过项目中的一个页面,来一步一步的拆解布局的流程。整个过程,基本上按照拆解、组件封装、具体布局这三步来的。

根据设计图,可以看出整体可以分成两部分,上面一部分是系统介绍模块,下面一部分是真正的登录内容,因为涉及到叠加,因此考虑用Stack;

系统介绍模块部分:整体也是涉及到叠加,考虑用Stack,分为四部分。最底部渐变色背景用一个contanier,无须指定位置,全视图扩展;载放logo图标在上一层,用Image。最后两个Text同级放在最上层。Image,Text各用Positioned包裹去指定位置。

登录内容模块是最外层是一个Contanier容器,去控制背景色和圆角。然后是一个Column元素,逐行排列。

第一行为Image,
第二行为Text,
第三行可以看成一个小Column,分两块进行布局
第四行可以看成一个小Column,分两块进行布局
第五行可以看作一个TextButton,
第六行可以看作一个Row,分三块进行布局

通过上面这样一步一步的分析后,基本上对大致的布局有了一个了解,最外层的控件大致选对(只要能实现的话,就是复杂度以及效率的问题),然后一步一步的拆解每一行的元素,如果有重复的或者觉得可以封装出来的部分,则进行下一步。

每一行的拆解,大致也是按照这个思路来进行,因此笔者在这里就不做讲解了。

在做到第三第四行的时候,发现这两个很相似,而且设计到一些交互逻辑,笔者就想对第三第四行的这种展示进行封装,觉得今后的布局可能会用到,因此在这一步,可以先把这一块儿抽离出一个控件。利用TextField来实现这种输入操作,具体的实现笔者不再详细的描述了。

经过这一步,整体的规划设计图已经有了,各个组件也都有了,接下来的工作就是组装了。

具体布局设计到一些细节的地方,例如整体Column的居中对齐(crossAxisAlignment)、间隔(Padding或Container包裹,笔者更喜欢用SizedBox占位)、居左居右居中(Align)、点击事件(GestureDetector)以及圆角(BorderRadius)等一些特殊情况。
像第六行row是放在底部的,就可以在第六行前面增加一个Spacer()去填充空白区域。
对文字颜色大小等,可以用TextStyle直接设置。
对于输入框的删除按钮,可以用Offstage这种Flutter特有的控制显示隐藏的控件。

Flutter(5):基础组件之Row/Column

Row:在水平方向上排列子widget的列表。
Column:在垂直方向上排列子widget的列表。
注意:这两个属于多子节点空间,可以将children排列成一行/一列,但是自身不带滚动属性,如果超出了一行,在debug下面则会显示溢出的提示。

MainAxisAlignment:主轴方向上的对齐方式,会对child的位置起作用,默认是start。
其中MainAxisAlignment枚举值:
center:将children放置在主轴的中心;
end:将children放置在主轴的末尾;
spaceAround:将主轴方向上的空白区域均分,使得children之间的空白区域相等,但是首尾child的空白区域为1/2;
spaceBetween:将主轴方向上的空白区域均分,使得children之间的空白区域相等,首尾child都靠近首尾,没有间隙;
spaceEvenly:将主轴方向上的空白区域均分,使得children之间的空白区域相等,包括首尾child;
start:将children放置在主轴的起点;
其中spaceAround、spaceBetween以及spaceEvenly的区别,就是对待首尾child的方式。其距离首尾的距离分别是空白区域的1/2、0、1。
MainAxisSize:在主轴方向占有空间的值,默认是max。
MainAxisSize的取值有两种:
max:根据传入的布局约束条件,最大化主轴方向的可用空间;
min:与max相反,是最小化主轴方向的可用空间;
CrossAxisAlignment:children在交叉轴方向的对齐方式,与MainAxisAlignment略有不同。
CrossAxisAlignment枚举值有如下几种:
baseline:在交叉轴方向,使得children的baseline对齐;
center:children在交叉轴上居中展示;
end:children在交叉轴上末尾展示;
start:children在交叉轴上起点处展示;
stretch:让children填满交叉轴方向;
TextDirection:阿拉伯语系的兼容设置,一般无需处理。
VerticalDirection:定义了children摆放顺序,默认是down。
VerticalDirection枚举值有两种:
down:从top到bottom进行布局;
up:从bottom到top进行布局。
top对应Row以及Column的话,就是左边和顶部,bottom的话,则是右边和底部。
TextBaseline:使用的TextBaseline的方式,有两种,前面已经介绍过。

这个是Row/Column的内的小控件,可以用来实现权重的布局

这边使用一个Container,里面是Row,使用Expanded对子节点进行权重处理,如果不使用Expanded,直接放入其他控件也是可以的,只是无法设置权重

对于内容过长的时候,会有溢出提示:

MainAxisAlignment.center:将children放置在主轴的中心;

MainAxisAlignment.start:将children放置在主轴的起点;

MainAxisAlignment.end:将children放置在主轴的末尾;

MainAxisAlignment.spaceAround:将主轴方向上的空白区域均分,使得children之间的空白区域相等,但是首尾child的空白区域为1/2;

MainAxisAlignment.spaceBetween:将主轴方向上的空白区域均分,使得children之间的空白区域相等,首尾child都靠近首尾,没有间隙;

MainAxisAlignment.spaceEvenly:将主轴方向上的空白区域均分,使得children之间的空白区域相等,包括首尾child;

下一章我们学习基础组件之Image

Flutter 之 流式布局(Wrap、Flow)

流式布局在移动端是非常常见的,比如商品列表,瀑布流、标签页等等
Flutter 中提供了两种流式布局Wrap和Flow

Wrap可以进行水平方向或者垂直方向上的布局,在一行或者一列现实不完所有的widgets的时候,能够根据当前宽度或者高度自动换行。

alignment 不管设置什么属性都不能调整第一行的位置
包裹一个Container来看,当前Wrap没有占满全屏

把Container占满全屏才表现下面效果

我们一般很少会使用Flow,因为其过于复杂,需要自己实现子组件的位置转换,所以在很多场景下首先要考虑的是Wrap是否满足需求。Flow主要用于一些需要自定义布局策略或性能要求较高(如动画中)的场景。

flutter(四,常用组件)

Tags: flutter

[TOC]

容器组件Container包含一个子widget,自身具备alignment、padding等属性,方便布局过程中摆放child。

常用属性

图片组件Image显示图像的组件,有多种构造函数:

常用属性

BoxFit取值及描述

文本组件Text负责显示文本和定义显示样式。

常用属性

富文本组件RichText使用多个不同风格的widget显示文本,要显示的文本使用TextSpan对象树来描述,每个对象都有一个用于该子树的关联样式。文本可能多行,也可能显示在同一行,取决于布局约束。

常用属性

图标组件Icon展示图标的组件,该组件不可交互,要实现交互图标,可以考虑使用IconButton组件。图标相关组件有以下几个:

图标按钮组件IconButton是基于Meterial Design风格的组件,可以响应按下的事件,并且按下时带水波纹效果。如果它的onPressed回调函数为null,那么这个按钮处于禁用状态,并且不可按下。

凸起按钮组件RaisedButton是Material Design中的button,一个凸起的材质矩形按钮,它可以响应按下事件,并且按下时会带一个触摸效果。

列表是最常见的需求。在Flutter中,用ListView来显示列表项,支持垂直和水平方向展示,通过一个属性我们就可以控制其方向,列表有以下几类:

基础列表组件为ListView组件。

水平列表组件即为水平方向排列的组件,列表内部元素以水平方向排列。把ListView组件的scrollDirection属性设置为Axis.horizontal即可。

当列表的数据项非常多时,需要使用长列表,比如淘宝后台订单列表、手机通讯录等,这些列表项数据很多。长列表也是使用ListView作为基础组件,只不过需要添加一个列表项构造器itemBuilder。

网格布局组件GridView可以实现多行多列布局的应用场景。使用GridView创建网格列表有多种方式:

表单是一个包含表单元素的区域。表单元素允许用户输入内容,比如文本域,下拉列表,单选框,复选框等。常见应用场景有:登录、注册、输入信息等。表单里有两个重要的组件,一个是Form组件,用来左整个表单提交使用的;另一个是TextFormField组件,用来做用户输入的。

Flutter-基础组件三

1)Container

常用属性:

2)Padding
作为一个基础的控件flutter一行四列,功能非常单一flutter一行四列,给子节点设置padding属性。

Padding的布局分为两种情况:

源码:

2)Align

Align的布局行为分为两种情况:

源码:

3)Center
Center继承自Align,,只不过是将alignment设置为Alignment.center,其他属性例如widthFactor、heightFactor,布局行为,都与Align完全一样。

源码:

4)FittedBox

布局行为分两种情况:

FittedBox会在自己的尺寸范围内缩放并且调整child位置,使得child适合其尺寸。

源码:

示例:

5)SizedBox

SizedBox布局行为:

源码:

示例:

1)Flex
弹性布局允许子组件按照一定比例来分配父容器空间。Flex组件可以沿着水平或垂直方向排列子组件,如果flutter一行四列你知道主轴方向,使用Row或Column会方便一些,因为Row和Column都继承自Flex,参数基本相同,所以能使用Flex的地方基本上都可以使用Row或Column。Flex本身功能是很强大的,它也可以和Expanded组件配合实现弹性布局。

Expanded组件可以使Row、Column、Fiex等子组件在其主轴上方向展开并填充可用的空间。

源码:

示例:

2)Row、Column

将children排列成一行或者一列,自身不带滚动属性,如果超出flutter一行四列了一行,在debug下面则会显示溢出的提示。

源码:

Flex的构造函数就比Row和Column的多了一个参数。Row跟Column的区别,正是这个direction参数的不同。当为Axis.horizontal的时候,则是Row,当为Axis.vertical的时候,则是Column。

示例:

3)Stack

Stack可以类比web中的absolute,绝对布局。对于绘制child的顺序,则是第一个child被绘制在最底端,后面的依次在前一个child的上面,类似于web中的z-index。如果想调整显示的顺序,则可以通过摆放child的顺序来进行。

源码:

Positioned:
源码:

left、top 、right、bottom分别代表离Stack左、上、右、底四边的距离。

示例:

Flutter 之 Sliver 系列控件

SliverAppBar 控件,一个 MD 的 AppBar 。属性和 AppBar 类似,但做的效果比 AppBar 更加强大。相同的属性具体可以看 Flutter 之 Scaffold 控件 , 里面有 AppBar 控件的介绍。那么还有些没有的属性:

结合 elevation 使用,当elevation 不为 0 的时候,是否显示阴影

AppBar 展开时候的高度

true 的时候下滑AppBar优先滑动展示,展示完成后才给滑动控件滑动

snap 为 true, 则 floating 也要为 true 。true 的时候根据手指松开的位置展开或者收缩AppBar

appBar 收缩到最小高度的时候 appBar 是否可见

SliverAppBar 往往做为 CustomScrollView 的第一个子元素,根据滚动控件的偏移量或者浮动的位置来改变 SliverAppBar 的高度。所以具体用法如下

另外在上面设计到 FlexibleSpaceBar 控件,FlexibleSpaceBar 有个 collapseMode 属性

为 Sliver 系列控件添加一个 padding 。如给上面 SliverAppBar 添加一个 Padding 。

多行多列的列表控件,相当于 Android 的 GridView,有两个属性

SliverChildDelegate,这里有两种方式创建

SliverGridDelegate,也是有两种方式创建

结合上面展示效果

和上面 delegate 属性一样,需要创建一个 SliverChildDelegate 。

比 SliverList 多一个 itemExtent 属性,设置 item 的高度 。item 里面的子控件无法再改动高度。

上面 SliverAppBar 就是结合 SliverPersistentHeader 实现的效果,SliverPersistentHeader 需要一个 SliverPersistentHeaderDelegate 。 实现 SliverPersistentHeaderDelegate 有 4 个方法需要重写

至于效果,具体效果具体分析。

有一个 Widget 属性,主要作用是在 CustomScrollView 里面添加多种不同布局的样式。

占满一屏或者比一屏更多的布局,

滑动剩余部分展示的布局 关于flutter一行四列和的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。 flutter一行四列的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于、flutter一行四列的信息别忘了在本站进行查找喔。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:陕西一体化政务服务平台(陕西政务服务网网页版)
下一篇:车联网智能车载终端(车联网智能车载终端是什么)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~