面试题：Flutter中Container样式与约束的常见应用

Question

在Flutter中，Container组件的width和constraints属性都可对容器大小进行限制，请问它们在使用场景和效果上有什么区别？如果要实现一个自适应宽度但高度固定为200像素的Container，并且背景颜色为蓝色，文字颜色为白色，该如何编写代码？

Answer 1

1. width 和 constraints 的区别：
   • width：
     • 使用场景：当你明确知道容器的宽度应该是一个固定值时使用。例如，一个按钮的宽度，你希望它在任何情况下都保持特定的像素宽度。
     • 效果：直接设置容器的固定宽度，容器宽度不会再根据父容器或子组件的情况自动调整，除非通过代码动态修改。
   • constraints：
     • 使用场景：适用于需要更灵活地限制容器大小范围的情况。比如，你希望容器宽度在一定的最小值和最大值之间，根据父容器或子组件情况动态调整。
     • 效果：它可以设置最大和最小宽度（或高度）等限制，容器会在这个限制范围内尽量适应内容或父容器的布局需求。
2. 实现自适应宽度但高度固定为200像素的Container代码如下：

Container(
  constraints: BoxConstraints(maxWidth: double.infinity),
  height: 200,
  color: Colors.blue,
  child: Center(
    child: Text(
      '内容',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

上述代码中，constraints 设置了 maxWidth 为 double.infinity，表示宽度自适应（尽量占据父容器允许的最大宽度），height 设置为200像素，color 设置背景颜色为蓝色，Center 组件包裹 Text 用于使文本在容器中居中显示，Text 的 style 设置文字颜色为白色。