Flutter学习笔记(三)RowColum布局

主题

本文将介绍,flutter中的row,colum的用法。通俗来说,就是横向布局和纵向布局的用法。

开发环境

win10
androidstudio2022.1.1
jdk11
fluttersdk-flutter_windows_3.7.8

源码

文末将会附上完整开源demo地址

开发过程

首先,这里的Row,Colum的布局,就类似于安卓的LinearLayout,使用orientation属性,控制布局方向。
Row是水平方向布局,用Row布局,正常显示情况如下图:

请添加图片描述

Colum是垂直方向布局,用Colum布局,正常显示情况如下图:

请添加图片描述

可以看到是布局方向是有所区别的。

下面将列出这两个控件中的属性:

MainAxisAlignment:

当前对齐方向的主轴,例如row,主轴就是水平横线

  • spaceBetween:使中间的各个子控件间距相等
  • start:子控件放在主轴开始位置(类似于android默认Linearlayout排列规则)
  • end:将子控件放在主轴的结束位置
  • center:将子控件放在主轴的中间位置
  • spaceEvenly:将主轴空白区域均分,使各个子控件间距相等
  • spaceAround:表示每个组件两边的富余空间相等

CrossAxisAlignment:

当前对齐方向的垂直交叉轴,例如row,交叉轴就是竖直方向

  • start:交叉轴开始地方
  • end:交叉轴结束地方
  • center:交叉轴居中地方
  • stretch:使子控件填满交叉轴
  • baseline:交叉线处对齐,配合textBaseline使用,作用于文本

TextBaseline:

文本对齐
alphabetic:设置的是文本基线参照英文
ideographic:设置的是文本基线参照中文
两个属性差异不大

MainAxisSize:

控件大小,row则为水平大小,col则为垂直方向大小
MainAxisSize.min:控件尽可能小
MainAxisSize.max:控件填充满–默认

VerticalDirection:

竖直方向对齐方式
down:从上到下
up:从下到上

其实日常的使用中,使用较多的属性,应该是MainAxisAlignment,MainAxisSize。
MainAxisSize对应就是安卓布局中的wrap_content和match_parent。
MainAxisAlignment则为子布局的对齐方式。

最后,如果想要真正了解row和colum布局,其实单单看文章是不建议的,一定要自己手动敲一次代码,再去总结,才会记忆深刻。

最后,源码地址如下:
https://gitee.com/motosheep/flutter-demo
切换到分支:202303281729RowCol控件

作者:motosheep原文地址:https://blog.csdn.net/motosheep/article/details/129849691

%s 个评论

要回复文章请先登录注册