flutter - 如何在 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)
    )
)