Flutter布局4

Row

  • 简介

  • mainAxisAlignment:主轴布局方式,row主轴方向是水平方向

  • crossAxisAlignment: 交叉轴的布局方式,对于row来说就是垂直方向的布局方式

  • Row 是一个将其child显示在水平数组的widget

  • ·将其child填充可用的横向水平空间,一行高度是childs的最大高度(即:总是满足传入的垂直约束)

  • ·如果你只有一个child,只需要考虑使用对其或者中间位置,如果多个child,注意扩展水平空间(Expanded),可以将child封装在一个扩展部件里面

  • ·当我们看到行有黄色和黑色条纹警告时候,说明行已经溢出,当行溢出,行之间空间将没有任何空间可供扩展。

  • 基本用法

  • 水平布局,设置位置对齐方式
    mainAxisSize 属性
    ·一行的高度是有mainAxisSize属性控制,默认是max mainAxisAlignment属性
    ·将children放置在主轴某位置
    CrossAxisAlignment 属性
    ·crossAxisAlignment:crossAxisAlignment.center/end/start,
    ·即,根据设定的位置交叉对齐

  • 默认值:MainAxisAlignment.start:

  1. start ,沿着主轴方向(水平方向)顶部对齐;

  2. end,沿着主轴方向(水平方向)底部对齐;

  3. center,沿着主轴方向(水平方向)居中对齐;

  4. spaceBetween ,沿着主轴方向(水平方向)平分剩余空间;

  5. spaceAround,把剩余空间平分成n份,n是子widget的数量,然后把其中一份空间分成2份,放在第一个child的前面,和最后一个child的后面;
    6.spaceEvenly,把剩余空间平分n+1份,然后平分所有的空间,请注意和spaceAround的区别

  6. 默认值:CrossAxisAlignment.center,默认是水平居中

    1. start ,垂直主轴方向(垂直方向)顶部对齐;
    2. end,垂直主轴方向(垂直方向)底部对齐;
    3. center,垂直主轴方向(垂直方向)居中对齐;
    4. stretch ,垂直主轴方向(垂直方向)拉伸子child;
    5. baseline,这个要和textBaseline一起使用,;
  7. mainAxisAlignment:主轴布局方式如下:

  • crossAxisAlignment: 交叉轴的布局方式,对于row来说就是垂直方向的布局方式,如下:

点赞
收藏

评论区

加载中...

相关推荐

CSS布局方式-自适应布局

原文链接:什么是自适应布局?在不同屏幕分辨率下,能够以最佳的方式进行展示,元素的宽度尺寸可能会改变,但是原有的展示方式不会改变。通常使用%单位来实现自适应布局。优点页面能够兼容不同分辨率的屏幕。缺点因为开发的时候需要考虑多种分辨率下的情况,会额外增加一些工

CSS布局方式-静态布局

原文链接:什么是静态布局?静态布局是平时开发中最常见的一种布局。就是给布局的元素设置固定的宽度和高度,无论你的屏幕分辨率是多大,它永远都是固定大小。通常使用px单位来实现静态布局。优点它的优点也比较明显,是一种最简单的布局方式,开发者只需要按照设计图1:1

CSS布局方式-响应式布局

原文链接:什么是响应式布局?在不同屏幕分辨率下,能够以最佳的方式进行展示,元素的宽度尺寸以及展示方式可能会改变。通常使用@media多媒体查询来实现响应式布局。优点页面能够兼容不同分辨率的屏幕。缺点工作量大,UI需要设计多个平台的版本。场景一套代码兼容we

【Flutter实战】流式布局(Wrap、Flow)

4.4流式布局在介绍Row和Colum时,如果子widget超出屏幕范围,则会报溢出错误,如:dartRow(children:<WidgetText("xxx"100),);可以看到,右边溢出部分报错。这是因为Row默认只有一行,如果超出屏幕不会折行。我们把超出屏幕显示范围会自动折行的布局称为流式布局。Flutt

【Flutter实战】线性布局(Row、Column)

4.2线性布局(Row和Column)所谓线性布局,即指沿水平或垂直方向排布子组件。Flutter中通过Row和Column来实现线性布局,类似于Android中的LinearLayout控件。Row和Column都继承自Flex,我们将在弹性布局一节中详细介绍Flex。主轴和纵轴对于线性布局,有主轴和纵轴之分,如果

【Flutter实战】布局类组件简介

4.1布局类组件简介布局类组件都会包含一个或多个子组件,不同的布局类组件对子组件排版(layout)方式不同。我们在前面说过Element树才是最终的绘制树,Element树是通过Widget树来创建的(通过Widget.createElement()),Widget其实就是Element的配置数据。在Flutter中,根据Widget是否