flutter之Container控件

本文深入讲解Flutter中的Container组件,包括宽度、高度设置,对齐、填充及边距控制,背景色与装饰设置,以及如何应用变换矩阵。通过实例代码演示,帮助读者掌握Container的灵活运用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Width:设置Container的宽度,设置为double.infinity可以强制在宽度上撑满,不设置,则根据child和父节点两者一起布局

Height:设置Container的高度,设置为double.infinity可以强制在高度上撑满,不设置,则根据child和父节点两者一起布局

 

alignment:控制child的对齐方式,如果Container或者Container父节点尺寸大于child的尺寸,这个属性设置会起作用,有很多种对齐方式

padding:Decoration内部的空白区域,如果有child的话,child位于padding内部

margin:围绕在Decoration和child之外的空白区域,不属于内容区域

color:color用来设置Container背景色,如果foregroundDecoration设置的话color可能会遮盖color效果

decoration:绘制在child后面的装饰,设置了Decoration的话就不能设置color属性,否则会报错,此时应该在Decoration中进行颜色的设置

foregroundDecoration:绘制在child前面的装饰

constraints:添加到child上额外的约束条件

使用new BoxConstraints.loose(new Size(280.0, 280.0))对Container进行布局约束,宽高不得超过300,即使我们之前设置的宽高是300,也无效

transform:设置Container的变换矩阵

如:new Matrix4.rotationZ(0.2),//沿着Z轴旋转一定的角度

实例代码:

 

 

 效果图:

Child:Container中的内容Widget

 

aints.loose(new Size(280.0, 280.0))对Container进行布局约束,宽高不得超过300,即使我们之前设置的宽高是300,也无效

transform:设置Container的变换矩阵

如:new Matrix4.rotationZ(0.2),//沿着Z轴旋转一定的角度

Child:Container中的内容Widget

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值