Flutter中父组件为ListView时ElevatedButton宽度无法缩小如何解决

问题原因 #

ListView对其子组件的横向约束为匹配自身最大宽度，当子组件Container未指定对齐方式时，会忽略自身设置的width参数，直接撑满父级最大宽度，因此你给Container设置的50%宽度未生效。另外旧版ButtonTheme的配置对ElevatedButton不生效，该组件的样式优先读取自身style属性或全局elevatedButtonTheme配置。

解决方案 #

提供两种可直接生效的修改方式：

• 方案1：在外层添加对齐组件，保留原有Container宽度配置

Align(
  // 可根据需求调整对齐方式：Alignment.centerLeft/center/centerRight
  alignment: Alignment.center,
  child: Container(
    width: MediaQuery.of(context).size.width * 0.5,
    child: ElevatedButton(
      child: Text('Go to screen two'),
      onPressed: () {},
    ),
  ),
)

• 方案2：直接通过ElevatedButton自身属性控制尺寸，无需外层Container

Center(
  child: ElevatedButton(
    style: ElevatedButton.styleFrom(
      // 第一个参数为宽度，第二个参数为自定义按钮高度
      fixedSize: Size(MediaQuery.of(context).size.width * 0.5, 50),
    ),
    child: Text('Go to screen two'),
    onPressed: () {},
  ),
)

内容的提问来源于stack exchange，提问作者Kavach Dheer