即使我指定了“宽度”和“高度”，容器也会填满屏幕

Question

我正在做一个 flutter 项目，我想在另一个具有特定大小的项目中显示一个 Container。但是，当我指定 Containers 的大小时，它并没有考虑到它。

这是一个代码示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MyWidget());
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200.0,
      height: 200.0,
      color: Colors.blue,
      child: Container(
        width: 20.0,
        height: 20.0,
        color: Colors.red,
      ),
    );
  }
}

这是我得到的，我看不到蓝色 Container。

这是怎么回事，我该怎么办？

Answer 1

您需要指定第二个框的位置

   Container(
        width: 200.0,
        height: 200.0,
        color: Colors.orange,
        alignment: Alignment.center, // where to position the child
        child: Container(
          width: 50.0,
          height: 50.0,
          color: Colors.blue,
        ),
      ),

Answer 2

正如我在评论中提到的，您需要指定第二个框的位置

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200.0,
      height: 200.0,
      color: Colors.blue,
      alignment: Alignment.center,
      child: Container(
        width: 20.0,
        height: 20.0,
        color: Colors.red,
      ),
    );
  }
}

Answer 3

实际上，这里发生的是您直接将 Container 作为根小部件传递。因此，容器必须占据整个屏幕，因为它不知道在后台显示什么。所以，你会看到它占据了整个屏幕。关于红色容器，它似乎也遵循与其父容器相同的属性。所以，它充满了整个屏幕。除非，我们指定 alignment 属性.

我也将对齐方式属性添加到父级。然而，它仍然占据了整个屏幕。

import 'package:flutter/material.dart';

void main() {
  runApp(MyWidget());
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: 40.0,
      height: 40.0,
      color: Colors.blue,
      child: Container(
        alignment: Alignment.center,
        width: 20.0,
        height: 20.0,
        color: Colors.red,
      ),
    );
  }
}

即使我指定了“宽度”和“高度”，容器也会填满屏幕

Container fills the screen even when I specify `width` and `height`

containers

dart

flutter

flutter-container