Flutter常用布局方式

最新推荐文章于 2025-10-24 10:02:01 发布

原创

最新推荐文章于 2025-10-24 10:02:01 发布 · 1w 阅读

41 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #css #android

本文详细介绍了Flutter中的几种基本布局：Container的属性及使用，包括对齐、填充和装饰；线性布局的Row和Column，强调了主轴和纵轴的概念以及对齐方式；弹性布局Flex的属性和Expanded的运用；流式布局Wrap的特性及应用场景；最后讲解了层叠布局Stack，如何通过Positioned实现子组件的绝对定位。此外，还展示了Card和ListTile的属性用法。

flutter 布局介绍

一、Container 布局

1.属性

属性	类型	说明
child	Widget	声明子组件
alignment	Alignment	控制child的对齐方式，如果container或者container父节点尺寸大于child的尺寸，这个属性设置会起作用，有很多种对齐方式。
padding	EdgeInsets	decoration内部的空白区域，如果有child的话，child位于padding内部。padding与margin的不同之处在于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应。
color	Color	用来设置container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果
decoration	BoxDecoration	边框、圆角、渐变、阴影、背景图片，绘制在child后面的装饰，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置。
foregroundDecoration	BoxDecoration	绘制在child前面的装饰。如果设置decoration，此时foregroundDecoration 样式会叠加在decoration样式上边
width	double	container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局。
height	double	container的高度，设置为double.infinity可以强制在高度上撑满。
constraints	BoxConstraints	maxHeight、 maxWidth、 minHeight、 minWidth 添加到child上额外的约束条件。
margin	EdgeInsets	外边距
transform	Matrix4	动画、平移-translate、旋转- rotation、缩放 - scale、斜切-skew）

2. 示例

在这里插入图片描述
代码如下（示例）：

class Body extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return Container(
      alignment: Alignment.bottomCenter,
      padding: EdgeInsets.all(50.0),
      // color: Colors.red,
      // foregroundDecoration: BoxDecoration(
      //   color: Colors.brown,
      //   border: Border.all(color: Colors.blue, width: 2.0),
      //   borderRadius: BorderRadius.all(Radius.circular(20)),
      // ),
      decoration: BoxDecoration(
        color: Colors.red,
        border: Border.all(color: Colors.blue, width: 2.0),
        borderRadius: BorderRadius.all(Radius.circular(20)),
      ),
      child: Text('Alignment 对齐方式'),
      width: double.infinity,
      height: double.infinity,
      constraints: BoxConstraints(maxHeight: 500, maxWidth: 300),
      margin: EdgeInsets.all(100),
      transform: Matrix4.rotat