我想在彼此下面放置 4 个容器。但是当我这样写时，红色容器在其他容器之上

Question

     Container(
       color: BColors.tealBackground,
       height: MediaQuery.of(context).size.height,
     ), 
     Container(
       color: BColors.greenBackground,
       height: MediaQuery.of(context).size.height / 2,
     ),  
     Container(
       color: BColors.yellowBackground,
       height: MediaQuery.of(context).size.height / 2/2,
     ),

I think something is wrong with the last Container, because the color is over the other. How should i can the "1/2" so that they are in order?

     Container(
       color: BColors.redBackground,
       height: MediaQuery.of(context).size.height ***, // I do not know what to do with this Container, when i delete this one it looks like the image.
     )

Answer 1

用列包装容器

 Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          color: Colors.teal,
          height: MediaQuery.of(context).size.height / 4,
        ),
        Container(
          color: Colors.green,
          height: MediaQuery.of(context).size.height / 4,
        ),
        Container(
          color: Colors.yellow,
          height: MediaQuery.of(context).size.height / 4,
        ),
        Container(
          color: Colors.red,
          height: MediaQuery.of(context).size.height / 4,
        )
      ],
    );
  }

Answer 2

更好的方法是使用 LayoutBuilder。我认为多次调用 MediaQuery 是不合适的，而且它的 child 完全取决于 Parent 的大小，这就是为什么我更喜欢 LayoutBuilder.

Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          return Column(
            children: [
              Container(
                height: constraints.maxHeight / 4,
                color: Colors.teal,
              ),
              Container(
                height: constraints.maxHeight / 4,
                color: Colors.green,
              ),
              Container(
                height: constraints.maxHeight / 4,
                color: Colors.yellow,
              ),
              Container(
                height: constraints.maxHeight / 4,
                color: Colors.red,
              ),
            ],
          );
        },
      ),
    );

我想在彼此下面放置 4 个容器。但是当我这样写时，红色容器在其他容器之上

I want to have 4 containers under each other. But the red container is above the others when I write it like this

size

height

containers

flutter

flutter-layout