我正在尝试将一个 materialbutton 小部件制作成一个正方形。我想要其中的 4 个按钮形成它们自己的正方形。像这样:

所以我尝试了这个:

@override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.green,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Row(
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                AspectRatio(
                  aspectRatio: 1,
                  child: MaterialButton(
                    child: Icon(
                      Icons.camera_alt,
                      color: Colors.blue,
                      size: 42,
                    ),
                    color: Colors.red,
                    onPressed: () => {},
                  ),
                ),
              ],
            )
          ],
        ));
  }

我希望在左上角有一个方形的 materialbutton，但我只是得到一个空的(绿色)屏幕。

最佳答案

您需要做几件事。您可以将 InstrisicWidth 和 IntrinsicHeight 小部件与您的行和列一起使用:

Material(
      child: IntrinsicHeight(
        child: IntrinsicWidth(
          child: Container(
            color: Colors.blue,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 5),
              child: Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 5),
                    child: Column(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(5),
                          child: Container(
                            color: Colors.red,
                            child: Padding(
                              padding: const EdgeInsets.all(10),
                              child: Center(
                                child: Icon(Icons.camera_alt),
                              ),
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(5),
                          child: Container(
                            color: Colors.red,
                            child: Padding(
                              padding: const EdgeInsets.all(10),
                              child: Center(
                                child: Icon(Icons.info),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 5),
                    child: Column(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(5),
                          child: Container(
                            color: Colors.red,
                            child: Padding(
                              padding: const EdgeInsets.all(10),
                              child: Center(
                                child: Icon(Icons.home),
                              ),
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(5),
                          child: Container(
                            color: Colors.red,
                            child: Padding(
                              padding: const EdgeInsets.all(10),
                              child: Center(
                                child: Icon(Icons.thumb_up),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );

这段代码的最终结果就是您所需要的，4 平方创建一个新的正方形:

关于flutter - 如何修复隐藏其子项的 Aspectratio 小部件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56700499/