Flutter：如何在其父级中调整长宽比的小部件？

Question

我想在一个容器中放置两个小部件。

长宽比为 1:1 且适合容器的小部件 A。

小部件 B 是一个文本，其高度适合内容，其宽度填充父级。

例如：

纵向模式

横向模式下

这是我尝试过的代码：

  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Text(widget.title),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
                flex: 1,
                child: Container(
                  color: Colors.deepPurple,
                  child: AspectRatio(
                    aspectRatio: 1 / 1,
                    child: Container(color: Colors.yellow),
                  ),
                )),
            Container(
                color: Colors.green,
                child: Center(child: Text("TEST", textAlign: TextAlign.center)))
          ],
        ));
  }

但是结果是这样的：

纵向模式

横向模式下

小部件 A 以纵向模式填充所有空间，而不是适合内部。

如何让Widget A适合容器？

Answer 1

我做了一些改变。你可以试试这个。也许这不是正确且有效的方式。不过你可以试试。

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    //Calculate width and height as your wish
    double width = size.width < size.height ? size.width : size.height * .5;
    double height = width * 1.1;
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              color: Colors.deepPurple,
              child:
                  Container(width: width, height: height, color: Colors.yellow),
            ),
            Container(
                color: Colors.green,
                child: Center(child: Text("TEST", textAlign: TextAlign.center)))
          ],
        ));
  }

Answer 2

看看这个。根据方向，我们更改主黄色框和文本列的父小部件。

我将黄色框放置在对齐小部件中，因为它限制了尺寸，然后将其放置在 AspectRatio 小部件中以保持所需的比例。

return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: OrientationBuilder(
    builder: (context, orientation) {
      if (orientation.name == "portrait") {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Align(
              alignment: Alignment.bottomCenter,
              child: AspectRatio(
                aspectRatio: 1,
                child: Container(
                  color: Colors.yellow,
                ),
              ),
            ),
            const Text("Text"),
          ],
        );
      } else {
        return Row(
          children: [
            Expanded(child: Container()),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: AspectRatio(
                      aspectRatio: 1,
                      child: Container(
                        color: Colors.yellow,
                      ),
                    ),
                  ),
                  const Text("Text"),
                ],
              ),
            ),
            Expanded(child: Container()),
          ],
        );
      }
    },
  ),
);