如何在flutter中实现这个标记部分?

问题描述 投票:0回答:1

enter image description here

我学习 flutter 有几个月了,我在这种类型的 ui 设计中苦苦挣扎。你能帮我实现这种设计吗? 我尝试过使用堆栈,但它不起作用。 如何让容器漂浮在容器中?

android flutter dart responsive-design frontend
1个回答
0
投票

在代码中尝试像下面这样的堆栈。

Stack(alignment: Alignment.topCenter, children: [
          Container(
            height: MediaQuery.of(context).size.height,
            color: Colors.pinkAccent,
            child: Align(
              alignment: Alignment.topCenter,
              child: Container(
                height: MediaQuery.of(context).size.height / 2.5,
                color: Colors.orange,
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.only(topRight: Radius.circular(50), topLeft: Radius.circular(5))),
            margin: EdgeInsets.only(top: MediaQuery.of(context).size.height / 3.5),
            width: 100,
            height: 100,
          ),
    ])
© www.soinside.com 2019 - 2024. All rights reserved.