我是 Flutter 的绝对初学者，如何实现这种布局？答案

【问题标题】：I'm an absolute beginner in Flutter, how can I achieve this layout?我是 Flutter 的绝对初学者，如何实现这种布局？
【发布时间】：2021-10-20 19:47:25
【问题描述】：

我尝试了堆栈，但无法实现布局。

LAYOUT

【问题讨论】：

请分享一些代码，到目前为止你尝试了什么？

标签： flutter user-interface flutter-layout

【解决方案1】：

试试这个。

class Page1 extends StatelessWidget {
  final String pageId;

  const Page1({Key? key, this.pageId = ""}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("UI"),),
      body: Center(
        child: Container(
          height: 100,
          child: Stack(
            alignment: Alignment.topCenter,
            children: [
              Container(
                padding: EdgeInsets.all(15),
                margin:  EdgeInsets.only(top:20),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(50),
                    border: Border.all(color: Colors.black)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      padding:
                          EdgeInsets.symmetric(vertical: 10, horizontal: 30),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        border: Border.all(color: Colors.black),
                      ),
                      child: Text("Right"),
                    ),
                    Container(
                      padding:
                          EdgeInsets.symmetric(vertical: 10, horizontal: 30),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        border: Border.all(color: Colors.black),
                      ),
                      child: Text("Wrong"),
                    )
                  ],
                ),
              ),
              Align(
                alignment: Alignment.topCenter,
                child: Container(
                  height: 40,
                  padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(20),
                    border: Border.all(color: Colors.black),
                  ),
                  child: Text("Choose"),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

【讨论】：

【解决方案2】：

尝试使用下面的代码希望它对你在下面的代码中有所帮助我使用过堆栈、容器、定位的小部件

 Container(
            height: 100,
            margin: EdgeInsets.only(top: 30),
            child: Stack(
              children: [
                Center(
                  child: Container(
                    color: Colors.white,
                    padding: EdgeInsets.all(15),
                    width: double.infinity,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        border: Border.all(color: Colors.black)),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(
                          padding: EdgeInsets.symmetric(
                              vertical: 10, horizontal: 30),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                            border: Border.all(color: Colors.black),
                          ),
                          child: Text("Right"),
                        ),
                        Container(
                          padding: EdgeInsets.symmetric(
                              vertical: 10, horizontal: 30),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                            border: Border.all(color: Colors.black),
                          ),
                          child: Text("Wrong"),
                        )
                      ],
                    ),
                  ),
                ),
                Positioned(
                  top: 0,
                  right: 0,
                  left: 0,
                  child: Center(
                    child: Container(
                      padding: EdgeInsets.symmetric(
                          vertical: 10, horizontal: 30),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(20),
                        border: Border.all(color: Colors.black),
                      ),
                      child: Text("Choose"),
                    ),
                  ),
                ),
              ],
            ),
          ),

你的布局看起来像这样 ->

【讨论】：

【解决方案3】：

嘿路西法，请试试我的代码。

只需将此代码复制并粘贴到您的 android studio 中

Container(
          height: 100,
          margin: EdgeInsets.only(top: 30),
          child: Stack(
            children: [
              Center(
                child: Container(
                  padding: EdgeInsets.all(15),
                  width: Get.width * 0.8,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(50),
                      border: Border.all(color: Colors.black)),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                            border: Border.all(color: Colors.black)),
                        child: Text("Right"),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                            border: Border.all(color: Colors.black)),
                        child: Text("Right"),
                      )
                    ],
                  ),
                ),
              ),
              Positioned(
                top: 0,
                right: 0,
                left: 0,
                child: Center(
                  child: Container(
                    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(20),
                        border: Border.all(color: Colors.black)),
                    child: Text("Choose"),
                  ),
                ),
              ),
            ],
          ),
        )

【讨论】：