覆盖 Flutter 小部件

Question

我正在尝试叠加两个 Container() 以获得此效果：

但是我不知道该怎么做。

Stack(
                children: <Widget>[
                  Container(
                    height: 300,
                    width: MediaQuery.of(context).size.width,
                    child: Image(
                      image: AssetImage(
                        'assets/images/' + image,
                      ),
                      fit: BoxFit.cover,
                    ),
                  ),
                  Container(
                    height: 200,
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(
                            MediaQuery.of(context).size.height * 0.05),
                      ),
                    ),
                  ),
                ],
              );

你能帮帮我吗？

Answer 1

要将小部件放置在 Stack 内，请使用 Positoned or Align 小部件。

child: SizedBox(
  height: 300 + 200, ///total height of inner children
  child: Stack(
    children: [
      Align(
        alignment: Alignment.topCenter,
        child: Container(
          height: 300,
          ...
        ),
      ),
      Positioned(
        bottom: 0,
        child: Container(
          height: 300,
          ....
        ),
      ),
    ],
  ),
),

你可能也喜欢LayoutBuilder .

覆盖 Flutter 小部件

Overlay Flutter Widgets

dart

flutter