flutter - 如何通过在 Flutter 中尊重它们的大小来重叠小部件？

Question

我只想Container通过尊重 firstContainer的宽度来重叠 2 。

这就是我想要实现的。

Containers当我使用Stack小部件时不占用空间。所以我认为堆栈小部件不适合我。

当我使用它时它不会重叠Row。所以 Row 也不起作用。

在 CSS 中，我只是给正确的元素负边距，它就完成了。但我无法弄清楚在颤振中实现这一目标的方法。

我将这些Containers放入堆栈。因为我必须用它溢出一个 Card 小部件Containers

标签： flutterdart

Answer 1

试试下面的代码希望对你有帮助

您可以为此使用 Stack Widget

  Container(
      height: 60,
      margin: EdgeInsets.symmetric(
          horizontal: 4), 
      child: Stack(
        children: [
          Positioned.fill(
            child: Container(
              decoration: BoxDecoration(
                color: Colors.yellow,
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(6),
                  bottomRight: Radius.circular(6),
                ),
              ),
              margin: EdgeInsets.symmetric(vertical: 4),
              padding: EdgeInsets.symmetric(horizontal: 20),
              alignment: Alignment.centerRight,
              child: Text('Ends after 1 Hour'),
            ),
          ),
          Positioned(
            top: 0,
            bottom: 0,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.redAccent,
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(6),
                  bottomRight: Radius.circular(6),
                ),
              ),
              alignment: Alignment.center,
              padding: EdgeInsets.only(right: 8, left: 20),
              child: Text('40% Discount'),
            ),
          ),
        ],
      ),
    ),

您的结果屏幕 ->