Question

我的按钮在颤动中扩展时遇到问题，我需要将图标对准按钮的左侧，我使用小部件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)
      )
     ],
    )
   ),
  ),

结果是

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

Answer 1

您可以尝试两种常见方法，我尚未实现，但我只是向您提供了核心思想：

使用ListTile，并将Icon设置为leading属性，将对齐的Text设置为title属性。这种方法看起来更干净，更容易，但是我怀疑您可能在对齐Text方面遇到相同的问题。
使用Stack，并用Icon小部件包装Align，并设置其alignment属性以适应您的需求。然后，用Expanded的{{1}}小部件替换Center，您将不需要Text属性。我认为这可能对您更好。

Answer 2

问题出在行内的两个元素。该代码应该对您有用

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 个答案: