flutter - 在 flutter 中重新创建此布局

Question

我想在 flutter 中制作这个布局:

Layout

它由五个按钮组成，其中第五个按钮位于其他四个按钮的中间，给人一种其他按钮不是矩形的错觉。

这在 flutter 中甚至可能吗？欢迎提供一些指南。

谢谢。

Answer 1

您可以使用 Stack 小部件将 Circle 按钮放置在中心。

这是我做的例子:

    @override
    Widget build(BuildContext context) {
      return new Scaffold(
        backgroundColor: Colors.grey[800],
        body: Center(
          child: Stack(
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      MyButton(),
                      MyButton(),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      MyButton(),
                      MyButton(),
                    ],
                  ),
                ],
              ),
              Center(
                child: MyCircleButton(),
              ),
            ],
          ),
        ),
      );
    }
  }

  class MyButton extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Container(
        width: 120,
        margin: EdgeInsets.all(5),
        height: 120,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: () {
              print("On click");
            },
          ),
        ),
      );
    }
  }

  class MyCircleButton extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(60.0)),
        child: Container(
          width: 120,
          height: 120,
          decoration: BoxDecoration(
            color: Colors.black,
            borderRadius: BorderRadius.circular(10.0),
          ),
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              highlightColor: Colors.red,
              onTap: () {
                print("On circle click");
              },
            ),
          ),
        ),
      );
    }
  }

尝试阅读更多关于 Flutter 布局的信息，这里有很多信息:https://flutter.dev/docs/development/ui/layout