本文主要讲解关于Flutter学习笔记(三)RowColum布局相关内容，由优网导航（www.uonce.com）提供，欢迎关注收藏本站！
主题
本文将介绍，flutter中的row，colum的用法。通俗来说，就是横向布局和纵向布局的用法。
程序员导航
优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站
开发环境
win10androidstudio2022.1.1jdk11fluttersdk-flutter_windows_3.7.8
源码
文末将会附上完整开源demo地址
AI 工具导航
优网导航旗下AI工具导航，精选全球千款优质 AI 工具集
开发过程
首先，这里的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控件
到此这篇关于Flutter学习笔记(三)RowColum布局的文章就介绍到这了,更多相关Flutter学习RowColum布局内容请搜索优网导航以前的文章或继续浏览下面的相关文章希望大家以后多多支持优网导航！
您可能感兴趣的文章:
- Flutter 弹性布局基石flex算法flexible示例详解
- Flutter SizedBox布局组件Widget使用示例详解
- flutter布局约束原理深入解析
- flutter中的布局和响应式app方法示例
- flutter中使用流式布局示例详解
- vue.js样式布局Flutter业务开发常用技巧
- Flutter弹性布局Flex水平排列Row垂直排列Column使用示例
本文主要讲解关于web面试常问http缓存解析相关相关内容，由优网导航（www.uonce.com）提供，欢迎关注收藏本站！ 为什么要有http缓存? 1.当输入网址到加载出页面, 电脑会经过”CPU计算、网络请求、页面渲染”等一系列步骤; 2.“网络请求”是…
相关文章
