Flutter中Container组件宽度设置无效问题求助

1. 先修复代码中的语法错误 #

你的代码里child字段缺少冒号，这会导致编译失败，正确写法如下：

Container(
  width: MediaQuery.of(context).size.width * 0.50,
  padding: EdgeInsets.symmetric(vertical: 15),           
  decoration: BoxDecoration(
    border: Border.all(color: Color.fromARGB(255, 210, 210, 210)),
    borderRadius: BorderRadius.all(Radius.circular(20)),
    color: Colors.grey[100],
  ),
  child: Text('50 percent container'), // 补充缺失的冒号
)

2. 处理父组件的布局约束问题 #

如果修复语法后宽度仍不生效，核心原因是父组件的布局约束强制Container占满可用宽度（比如直接把Container作为Scaffold.body的子组件，或放在Row/Column这类强制子组件填充的容器里）。

解决方法是用Align或Center包裹Container，让它可以按照自身设置的尺寸布局：

用Align包裹（支持自定义对齐方式）

Align(
  alignment: Alignment.center, // 可按需改为左对齐/右对齐等
  child: Container(
    width: MediaQuery.of(context).size.width * 0.50,
    padding: EdgeInsets.symmetric(vertical: 15),           
    decoration: BoxDecoration(
      border: Border.all(color: Color.fromARGB(255, 210, 210, 210)),
      borderRadius: BorderRadius.all(Radius.circular(20)),
      color: Colors.grey[100],
    ),
    child: const Text('50 percent container'),
  ),
)

用Center包裹（快速实现居中对齐）

Center(
  child: Container(
    width: MediaQuery.of(context).size.width * 0.50,
    padding: EdgeInsets.symmetric(vertical: 15),           
    decoration: BoxDecoration(
      border: Border.all(color: Color.fromARGB(255, 210, 210, 210)),
      borderRadius: BorderRadius.all(Radius.circular(20)),
      color: Colors.grey[100],
    ),
    child: const Text('50 percent container'),
  ),
)

原理说明 #

Flutter布局遵循约束传递规则：父组件会给子组件传递约束条件，如果父组件要求子组件必须占满可用空间，子组件设置的width/height会被忽略。Align和Center会将父组件的约束转换为“允许子组件使用自身尺寸”，从而让Container的宽度设置生效。

内容的提问来源于stack exchange，提问作者Cliff Odebala Clarke