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

问题描述

我正在处理一个颤振项目，我想在另一个具有特定大小的项目中显示一个 Container。但是，当我指定 Container 的大小时，它没有考虑。

这是一个代码示例：

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。

发生了什么，我该怎么办？

解决方法

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

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,),);
  }
}

,

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

   Container(
        width: 200.0,color: Colors.orange,// where to position the child
        child: Container(
          width: 50.0,height: 50.0,

,

实际上，这里发生的情况是您直接将 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,child: Container(
        alignment: Alignment.center,width: 20.0,);
  }
}