Flutter中的Stack与Positioned：实现层叠布局

Flutter中的Stack与Positioned：实现层叠布局

5 回复

Stack用于叠加子widget，Positioned定位子widget位置。

更多关于Flutter中的Stack与Positioned：实现层叠布局的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，Stack用于层叠布局，Positioned用于精确控制子组件在Stack中的位置，常结合使用以实现复杂布局。

在Flutter中，Stack和Positioned常用于实现层叠布局。Stack允许子组件堆叠在一起，默认情况下子组件从左上角开始排列。通过Positioned，可以精确控制子组件在Stack中的位置，如指定top、bottom、left、right等属性来调整位置。例如：

Stack(
  children: <Widget>[
    Positioned(
      top: 50,
      left: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
    Positioned(
      top: 100,
      left: 100,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)

此代码创建了两个堆叠的矩形，分别位于不同的位置。

Stack使子部件可以重叠，Positioned定位Stack中子部件的位置。

在Flutter中，Stack 和 Positioned 是用于实现层叠布局的两个重要组件。Stack 允许你将多个子组件堆叠在一起，而 Positioned 则用于精确控制子组件在 Stack 中的位置。

Stack 组件

Stack 组件允许你将其子组件按顺序堆叠在一起。默认情况下，子组件会从左上角开始堆叠，后面的子组件会覆盖前面的子组件。

Stack(
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.green,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
  ],
)

在上面的例子中，三个 Container 会依次堆叠在一起，蓝色容器会覆盖绿色容器，绿色容器会覆盖红色容器。

Positioned 组件

Positioned 组件用于在 Stack 中精确控制子组件的位置。你可以通过 top、bottom、left、right 等属性来指定子组件在 Stack 中的位置。

Stack(
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Positioned(
      top: 50,
      left: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Container(
        width: 80,
        height: 80,
        color: Colors.blue,
      ),
    ),
  ],
)

在这个例子中，绿色容器被放置在距离 Stack 顶部和左侧各 50 像素的位置，而蓝色容器被放置在距离 Stack 底部和右侧各 20 像素的位置。

总结

Stack 和 Positioned 是 Flutter 中实现层叠布局的强大工具。通过 Stack，你可以将多个子组件堆叠在一起，而 Positioned 则允许你精确控制每个子组件的位置。这种组合非常适合实现复杂的 UI 布局。

回到顶部