美文网首页
线性布局

线性布局

作者: 浮名虚誉架构师 | 来源:发表于2020-01-13 08:08 被阅读0次

线性行布局指沿水平或垂直方向排布子组件。Flutter中通过Row和Column来实现线性布局,都继承自Flex

Row

Row可以在水平方向排列其子widget

Column

Column可以在垂直方向排列其子组件

常用属性

textDirection:表示水平方向子组件的布局顺序(是从左往右还是从右往左),默认为系统当前Locale环境的文本方向

mainAxisSize:表示Row在主轴(水平)方向占用的空间,默认是MainAxisSize.max,表示尽可能多的占用水平方向的空间,此时无论子widgets实际占用多少水平空间,Row的宽度始终等于水平方向的最大宽度;而MainAxisSize.min表示尽可能少的占用水平空间,当子组件没有占满水平剩余空间,则Row的实际宽度等于所有子组件占用的的水平空间

mainAxisAlignment:表示子组件在Row所占用的水平空间内对齐方式,如果mainAxisSize值为MainAxisSize.min,则此属性无意义,因为子组件的宽度等于Row的宽度。只有当mainAxisSize的值为MainAxisSize.max时,此属性才有意义,MainAxisAlignment.start表示沿textDirection的初始方向对齐,如textDirection取值为TextDirection.ltr时,则MainAxisAlignment.start表示左对齐,textDirection取值为TextDirection.rtl时表示从右对齐。而MainAxisAlignment.end和MainAxisAlignment.start正好相反;MainAxisAlignment.center表示居中对齐

verticalDirection:表示Row纵轴(垂直)的对齐方向,默认是VerticalDirection.down,表示从上到下

crossAxisAlignment:表示子组件在纵轴方向的对齐方式,Row的高度等于子组件中最高的子元素高度,它的取值和MainAxisAlignment一样(包含start、end、 center三个值),不同的是crossAxisAlignment的参考系是verticalDirection,即verticalDirection值为VerticalDirection.down时crossAxisAlignment.start指顶部对齐,verticalDirection值为VerticalDirection.up时,crossAxisAlignment.start指底部对齐;而crossAxisAlignment.end和crossAxisAlignment.start正好相反;

children :子组件数组

相关文章

  • 安卓原生页面布局总结

    布局分为线性布局:LinearLayout和相对布局:RelativeLayout 线性布局:LinearLayo...

  • Android之布局

    LinearLayout - 线性布局 线性布局,最常用的布局之一,所有包含在线性布局里的控件在线性方向上依次排列...

  • Android应用界面开发——第二周笔记

    线性布局 线性布局是程序中常见的布局方式之一,包括水平线性布局和垂直线性布局两种, 通过Android:orien...

  • 常用的五大布局

    常用的五大布局(线性布局,相对布局,帧布局,表格布局,绝对布局) 1,线性布局 LinearLayout ...

  • 3.1 布局类Widget-线性布局Row和Column

    线性布局Row和Column弹性布局Felx 线性布局Row和Column 所谓线性布局,即指沿水平或垂直方向排布...

  • 四大layout

    LinerLayout 线性布局 LinerLayout, 中文名为线性布局。这个布局会将它所包含的控件在线性方向...

  • 布局 - 线性布局

    LinearLayout 线性布局 线性布局是一种非常常用的布局,控件在该布局中按线性方向依次排列。 属性 and...

  • 2019-03-15

    实验内容:关于线性布局、约束布局及表格布局的使用 主要代码: 主界面: 线性布局: 约束布局: 表格布局: 截图:...

  • 安卓布局详解

    今天要讲的布局就是线性布局、相对布局和约束布局 1.LinearLayout: -线性布局,两种排法:水平and...

  • Android布局、图案解锁

    今天要讲的布局就是线性布局、相对布局和约束布局 1.LinearLayout: -线性布局,两种排法:水平and...

网友评论

      本文标题:线性布局

      本文链接:https://www.haomeiwen.com/subject/vxkgactx.html