如何在Flutter中左对齐OutlineButton图标

Question

如何OutlineButton在Flutter中左对齐图标？ Icon可以如下添加，但图标和文本在按钮中居中对齐。有没有办法将图标向左对齐，文本是否居中对齐？

return new OutlineButton.icon(
  onPressed: onPressed,
  label: new Text(title),
  icon: icon,
  highlightedBorderColor: Colors.orange,
  color: Colors.green,
  borderSide: new BorderSide(color: Colors.green),
  shape: new RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(5.0)));

Answer 1

您可以通过多种方法来执行此操作，但是使用您提到的工厂构造函数是不可能的OutlineButton.icon，您可以更深入地检查源代码以查看其如何构建窗口小部件。

您可以创建自己Widget的图标，将图标放在左侧，文本居中。

另外，您也可以使用OutlineButton小部件并以小孩子的身分通过堆栈/行，请检查此示例

OutlineButton(
    onPressed: () => null,
    child: Stack(
        children: <Widget>[
            Align(
                alignment: Alignment.centerLeft,
                child: Icon(Icons.access_alarm)
            ),
            Align(
                alignment: Alignment.center,
                child: Text(
                    "Testing",
                    textAlign: TextAlign.center,
                )
            )
        ],
    ),
    highlightedBorderColor: Colors.orange,
    color: Colors.green,
    borderSide: new BorderSide(color: Colors.green),
    shape: new RoundedRectangleBorder(
        borderRadius: new BorderRadius.circular(5.0)
    )
)

Answer 2

您可以使用OutlinedButton.icon，然后简单地用 in 包裹您的文本，Center如下所示：

return new OutlinedButton.icon(
  onPressed: onPressed,
  label: Center(child: new Text(title)),
  icon: icon,
)

如果您希望文本左对齐，这也适用：

return new OutlinedButton.icon(
  onPressed: onPressed,
  label: Align(alignment: Alignment.centerLeft, child: new Text(title)),
  icon: icon,
)