如何在Flutter中左对齐OutlineButton图标 [英] How to left align the OutlineButton icon in Flutter

问题描述

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

How to left align the OutlineButton icon in Flutter? Icon can be added as follows, but both icon and text are centered aligned in the button. Is there a way to align the icon to the left and text to the center?

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)));

推荐答案

有很多方法可以使用，但是使用提到的OutlineButton.icon的工厂构造函数是不可能的，您可以更深入地检查源代码看看它如何构建窗口小部件.

There are many ways you can do it, but it's not possible using the factory constructor that you mentioned OutlineButton.icon, you can go deeper and check the source code to see how it build the widget.

您可以创建自己的Widget在图标左侧放置一个文本，并将其居中放置.

You can create your own Widget to put an icon to the left and the text centered.

此外，您还可以使用OutlineButton小部件并以堆栈/行作为子项传递，请检查此示例

Also you can use the OutlineButton widget and pass a Stack/Row as a child, check this sample

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)
    )
)

这篇关于如何在Flutter中左对齐OutlineButton图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！