Flutter布局4

Stella981
• 阅读 674

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:主轴布局方式如下:Flutter布局4

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

  • Flutter布局4

点赞
收藏
评论区
推荐文章
浩浩 浩浩
3年前
【Flutter实战】流式布局(Wrap、Flow)
4.4流式布局在介绍Row和Colum时,如果子widget超出屏幕范围,则会报溢出错误,如:dartRow(children:<WidgetText("xxx"100),);可以看到,右边溢出部分报错。这是因为Row默认只有一行,如果超出屏幕不会折行。我们把超出屏幕显示范围会自动折行的布局称为流式布局。Flutt
菜园前端 菜园前端
1年前
CSS布局方式-自适应布局
原文链接:什么是自适应布局?在不同屏幕分辨率下,能够以最佳的方式进行展示,元素的宽度尺寸可能会改变,但是原有的展示方式不会改变。通常使用%单位来实现自适应布局。优点页面能够兼容不同分辨率的屏幕。缺点因为开发的时候需要考虑多种分辨率下的情况,会额外增加一些工
浩浩 浩浩
3年前
【Flutter实战】线性布局(Row、Column)
4.2线性布局(Row和Column)所谓线性布局,即指沿水平或垂直方向排布子组件。Flutter中通过Row和Column来实现线性布局,类似于Android中的LinearLayout控件。Row和Column都继承自Flex,我们将在弹性布局一节中详细介绍Flex。主轴和纵轴对于线性布局,有主轴和纵轴之分,如果
菜园前端 菜园前端
1年前
CSS布局方式-响应式布局
原文链接:什么是响应式布局?在不同屏幕分辨率下,能够以最佳的方式进行展示,元素的宽度尺寸以及展示方式可能会改变。通常使用@media多媒体查询来实现响应式布局。优点页面能够兼容不同分辨率的屏幕。缺点工作量大,UI需要设计多个平台的版本。场景一套代码兼容we
菜园前端 菜园前端
1年前
CSS布局方式-静态布局
原文链接:什么是静态布局?静态布局是平时开发中最常见的一种布局。就是给布局的元素设置固定的宽度和高度,无论你的屏幕分辨率是多大,它永远都是固定大小。通常使用px单位来实现静态布局。优点它的优点也比较明显,是一种最简单的布局方式,开发者只需要按照设计图1:1
浩浩 浩浩
3年前
【Flutter实战】布局类组件简介
4.1布局类组件简介布局类组件都会包含一个或多个子组件,不同的布局类组件对子组件排版(layout)方式不同。我们在前面说过Element树才是最终的绘制树,Element树是通过Widget树来创建的(通过Widget.createElement()),Widget其实就是Element的配置数据。在Flutter中,根据Widget是否
Wesley13 Wesley13
3年前
CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用“浮动”从字面上来理解就是“悬浮移动、非固定”的意思。块级元素(div、table、span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观。这就要用到浮动了。被设置浮动的元素会脱离标准流(竖直排列),从而达到水平排列的效果。例如.未设置浮动时图1中的两张图片竖直排列在父级元素(橙色区域)
Stella981 Stella981
3年前
Flutter Stack布局中定位的方式
前言想要记录一下Stack布局中,定位的两种方式代码//……省略无关代码……child:newColumn(children:<WidgetnewSizedBox(height:20.0),new
Stella981 Stella981
3年前
Grid布局和Flex布局
Flex布局(弹性布局)Flex是弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。采用Flex布局的元素,称为Flex容器。flexitem项目是Flex布局的元素,简称项目。容器:水平的主轴(mainaxis)和垂直的交叉轴(crossaxis),单个项目占据的主轴空间叫做m
Stella981 Stella981
3年前
ConstraintLayout 约束布局
  约束布局ConstraintLayout  这种布局方式出现已经有一段时间了,刚出现的时候一直以为这种布局只是针对拖拽使用的布局,最近在新项目里看到了这种布局,又重新学习了这种布局,才发现以前真的是图样图森破啊,这种新的布局方式真的太好用了!1.引入使用之前需要添加这种布局的依赖implementation'com.an