Flutter Column组件：让所有按钮自适应最宽按钮宽度

你可以通过IntrinsicWidth组件结合Column的crossAxisAlignment属性实现需求，无需硬编码宽度：

修改后的代码 #

class MyCustomForm extends StatelessWidget {
  const MyCustomForm({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return IntrinsicWidth(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
            child: ElevatedButton(
              child: const Text('Login'),
              onPressed: () {},
            ),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
            child: ElevatedButton(
              child: const Text('Create new account'),
              onPressed: () {},
            ),
          ),
        ],
      ),
    );
  }
}

关键说明 #

• IntrinsicWidth会自动计算子树中最宽元素的宽度，并将自身宽度设置为该值，确保整个Column的宽度由最宽的按钮决定。
• 设置crossAxisAlignment: CrossAxisAlignment.stretch后，Column内的所有子组件会填满Column的宽度，从而让按钮自动扩展到统一宽度。
• 移除原代码中的Align组件，因为现在需要按钮填充父容器宽度，而非仅适配自身内容宽度。

内容的提问来源于stack exchange，提问作者David Somekh