如何实现Elevated Button的尺寸设置及居中保存图标添加？

一、自定义按钮尺寸 #

ElevatedButton默认随子元素自适应大小，自定义尺寸有两种实用方式：

• 方式1：用SizedBox包裹
  通过SizedBox直接指定宽高，将ElevatedButton作为子组件：

SizedBox(
  width: 200,
  height: 60,
  child: ElevatedButton(
    onPressed: () {},
    child: const Text("保存"),
  ),
)

• 方式2：通过buttonStyle配置fixedSize
  在ElevatedButton.styleFrom中设置fixedSize属性：

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    fixedSize: const Size(200, 60),
  ),
  child: const Text("保存"),
)

二、添加居中的保存图标 #

将按钮的child替换为Row组件，同时放入图标与文字，通过MainAxisAlignment.center让内容居中对齐：

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    fixedSize: const Size(200, 60),
  ),
  child: const Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.save),
      SizedBox(width: 8), // 图标与文字的间距
      Text("保存"),
    ],
  ),
)

两种需求可以结合实现，比如用SizedBox包裹带图标的ElevatedButton，或直接通过style设置尺寸后添加图标行组件。

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