flutter - 如何布局彼此相邻但重叠的小部件

问题描述

我一直在搞乱，Stack因为Column不允许子小部件重叠。但是，我看到的每个小部件可以相邻布置的示例都需要硬编码的宽度和高度。

在我的布局中，孩子的高度取决于孩子的内容，在我的build功能中不知道。理想情况下，我想Column使用绿色和蓝色容器上的负上边距来布局我的小部件，但是这是不允许的。如果我知道每个小部件的渲染高度，那么绝对定位它们并不困难，但这似乎是不可能的。

Marc Glasberg 有一个不错的库，名为assorted_layout_widgets，它有一个ColumnSuper允许重叠列的小部件，但它同样适用于所有子级。

对其他人可能有的想法感兴趣。

标签： flutterlayoutuser-experience

您可以尝试的一种方法是使用FractionalTranslation将孩子移动其大小的一小部分。或者Transform.translate将孩子移动一个硬编码的距离。这些不要求孩子具有硬编码的大小。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        FractionalTranslation(
          translation: Offset(0, 0.2),
          child: Container(
            width: 200,
            height: 80,
            color: Colors.red.withOpacity(1),
          ),
        ),
        Container(
          width: 500,
          height: 80,
          color: Colors.greenAccent.withOpacity(0.7),
        ),
        Transform.translate(
          offset: Offset(0, -10),
          child: Container(
            width: 500,
            height: 80,
            color: Colors.deepPurple.withOpacity(0.7),
          ),
        ),
      ],
    );
  }
}

结果：

编辑：

为了让绿色盒子上的红色盒子，我们可以做这样的事情。

  Widget build(BuildContext context) {
    return Column(
      children: [
        FractionalTranslation(
          translation: Offset(0, 1),
          child: Container(
            width: 500,
            height: 80,
            color: Colors.greenAccent.withOpacity(0.7),
          ),
        ),
        FractionalTranslation(
          translation: Offset(0, -0.8),
          child: Container(
            width: 200,
            height: 80,
            color: Colors.red.withOpacity(0.7),
          ),
        ),
        Transform.translate(
          offset: Offset(0, -10),
          child: Container(
            width: 500,
            height: 80,
            color: Colors.deepPurple.withOpacity(0.7),
          ),
        ),
      ],
    );
  }

flutter - 如何布局彼此相邻但重叠的小部件

问题描述

解决方案

推荐阅读