读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. flutter
  3. 正文

Flutter的Colum和Row对齐理解和笔记

2020年12月14日 163点热度 0人点赞 0条评论
MainAxisSize:  控制自己的布局方式
  MainAxisSize.min  默认值,Column和Row自适应children;
  MainAxisSize.max  Column填充父控件竖屏,Row填充父控件横屏;需要搭配MainAxisAlignment使用才有效果;
 
 
MainAxisAlignment:  控制子集的对齐方式,Column上下对齐,Row左右对齐
  MainAxisAlignment.start  默认值,Column靠上,Row靠左;
  MainAxisAlignment.center  Column,Row居中;
  MainAxisAlignment.end  Column靠下,Row靠右;
  MainAxisAlignment.spaceAround  自己填充,等份分配空间给子集,子集各自居中对齐;
  MainAxisAlignment.spaceBetween  自己填充,等份分配空间给子集,子集两侧对齐;
  MainAxisAlignment.spaceEvenly  自己填充,等份分配空间给子集,子集同一中线居中对齐;
  注:当设置MainAxisSize.max时才该值有效果。
 
 
CrossAxisAlignment:   控制子集各自的对齐方式,Column左右对齐,Row上下对齐
  CrossAxisAlignment.strech        Column中会使子控件宽度调到最大,Row则使子控件高度调到最大
  CrossAxisAlignment.start      Column中会使子控件向左对齐,Row中会使子控件向上对齐
  CrossAxisAlignment.center   默认值,子控件居中
  CrossAxisAlignment.end    Column中会使子控件向右对齐,Row中会使子控件向下对齐
  CrossAxisAlignment.baseline  按文本水平线对齐。与TextBaseline搭配使用
 
 
TextBaseline:
  TextBaseline.alphabetic    用于对齐字母字符底部的水平线。
  TextBaseline.ideographic  用于对齐表意字符的水平线。
 
 
VerticalDirection:  控制子控件对齐方式是否相反方式
  VerticalDirection.down  默认值,按照默认方式
  VerticalDirection.up   CrossAxisAlignment.start跟CrossAxisAlignment.end对反

 

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: flutter
最后更新:2020年12月14日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
Echarts redux git mysql taro Nginx node hook react CSS JavaScript 闲谈 vue 小程序 canvas flutter 阅读 悦读 随笔
推荐文章
  1. Flex弹性布局基础属性
  2. React组件传值
  3. flex弹性布局的间距、对齐
  4. grid网格布局
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号