将图标与左按钮对齐展开答案

【问题标题】：Align icon to left button expanded将图标与左按钮对齐展开
【发布时间】：2020-02-25 01:43:12
【问题描述】：

我在颤动中扩展按钮时遇到问题，我需要将图标对齐到按钮的左侧，我使用小部件 Row 制作它，因为这是我找到的最佳方式。但是，文本没有正确居中。

   SizedBox(
    width: double.infinity,
    child: RaisedButton(
    onPressed: () => {},
    color: Colors.blue,
    textColor: Colors.white,
    child: Row(
     children: <Widget>[
      Icon(Icons.send),
      Expanded(
       child: Text('Enviar', textAlign: TextAlign.center)
      )
     ],
    )
   ),
  ),

结果是

有没有更好的方法来制作具有这种样式的按钮（文本在所有按钮中居中，不仅在它的空间中）？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

问题在于行内的两个元素。这段代码应该适合你

SizedBox(
        width: double.infinity,
        child: RaisedButton(
            onPressed: () => {},
            color: Colors.blue,
            textColor: Colors.white,
            child: Stack(
              alignment: Alignment.centerLeft,
              children: <Widget>[
                Icon(Icons.send),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('Enviar'),
                  ],
                ),
              ],
            )
        ),
      ),

【讨论】：

【解决方案2】：

有两种常见的方法你可以尝试，我没有实现它们，但我只是给你核心思想：

使用ListTile 并将Icon 设置为leading 属性，并将对齐的Text 设置为title 属性。这种方法可能看起来更简洁、更容易，但我怀疑您可能对对齐的Text 有同样的问题。
使用Stack 并用Align 小部件包装您的Icon，设置其alignment 属性以满足您的需求。然后，将您的Expanded 替换为您的Center 小部件以用于您的Text，您将不需要textAlign: TextAlign.center 属性。我认为这可能更适合您。

【讨论】：

List tile 不太好用，我用 Stack 试试，谢谢。