flutter - 如何在 flutter 中在容器内制作固定大小的容器

Question

我正在尝试进行应用布局，其中主容器将占设备高度的 45%，并且主容器内的容器应具有固定大小。

我编写了以下代码，但内部容器将全高作为其父(主)容器。

class TestContainer extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          width: 50,
          height:MediaQuery.of(context).size.height * 0.45,
          color: Colors.red
          child:Container(
          width: 50,
          height: 100,
          color: Colors.green
          )
        );
      }
    }

知道我做错了什么吗？

Answer 1

通过用 Center 小部件包裹它来修复它:

class TestContainer extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          width: 50,
          height:MediaQuery.of(context).size.height * 0.45,
          color: Colors.red,
          // wrap with a center widget
          child:Center(
            child: Container(
            width: 50,
            height: 100,
            color: Colors.green
            ),
          )
        );
      }
    }

将内部容器放在底部中心

class TestContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: MediaQuery.of(context).size.height * 0.45,
      color: Colors.red,
      // wrap with a align widget
      child: Align(
        // set the alignment property
        alignment: Alignment.bottomCenter,
        child: Container(
          width: 50,
          height: 100,
          color: Colors.green,
        ),
      ),
    );
  }
}

在此处阅读有关 Flutter 中布局约束的更多信息:https://flutter.dev/docs/development/ui/layout/constraints