布局Widget_Flutter 基础教程

布局Widget

布局是 Flutter 中非常重要的一个概念，它决定了 UI 中各个组件的位置和大小。在 Flutter 中，布局 Widget 是通过 Widget 树来实现的，通过嵌套不同的布局 Widget，可以实现各种复杂的 UI 布局。

以下是一些常用的布局 Widget：

Column：垂直排列子 Widget

Column(
  children: <Widget>[
    Text('Widget 1'),
    Text('Widget 2'),
    Text('Widget 3'),
  ],
)

Row：水平排列子 Widget

Row(
  children: <Widget>[
    Text('Widget 1'),
    Text('Widget 2'),
    Text('Widget 3'),
  ],
)

Stack：层叠排列子 Widget

Stack(
  children: <Widget>[
    Positioned(
      top: 10.0,
      left: 10.0,
      child: Text('Widget 1'),
    ),
    Positioned(
      top: 50.0,
      left: 50.0,
      child: Text('Widget 2'),
    ),
  ],
)

Container：容器 Widget，可以设置宽高、边距、背景色等

Container(
  width: 100.0,
  height: 100.0,
  margin: EdgeInsets.all(10.0),
  padding: EdgeInsets.all(10.0),
  color: Colors.blue,
  child: Text('Container Widget'),
)

SingleChildScrollView：滚动视图，当子 Widget 超出屏幕范围时可以滚动查看

SingleChildScrollView(
  child: Column(
    children: <Widget>[
      // 大量的子 Widget
    ],
  ),
)

以上是几种常用的布局 Widget，通过组合这些 Widget，可以实现丰富多样的 UI 布局效果。希望对你有帮助！