Flutter入门之Row、Column、Container布局


写过Android的都知道Android中有个很常用布局LinearLayout,它可以实现线性的横向或纵向的布局结构。对于学习Flutter的Android开发者来说,肯定也想知道Flutter中该如何实现线性布局结构。

在Flutter中线性布局结构的实现是通过两个不同的widget分别来实现横向和纵向布局结构的。组件Row用来实现横向的线性布局,而组件Column则用来实现纵向的线性布局,而Container则是用来设置背景、设置大小、设置边距(padding)的布局。

下面来分别介绍三个组件的相关属性:

Container
Container的构造函数如下:

属性
key: 该属性代表当前widget的唯一标识符(类似于Android中的id),在程序运行过程中,如果想调用该widget的某个方法,那就需要设置该属性值,该属性不是必须值
alignment: 子元素的对齐方式,官方已经提供了几种常用的对齐方式
padding: 这个比较好理解,跟Android中的是一个意思,内边距
color: 设置组件的背景色
decoration: 与color属性功能一样,都是设置背景,不过decoration功能更强大,它可以设置背景图片、圆角、渐变、阴影、边框等
width & height: 组件的宽高
constraints: 组件的宽高限制
margin: 外边距
transform: 矩阵转换
child: 子元素
另外在使用过程中,Container如果作为应用的根节点的话,它的宽高会自动填充为屏幕大小。

Row
Row的构造函数如下

https://blog.csdn.net/huyongl1989/article/details/83745871?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值