如何左对齐 Flutter 中的 OutlineButton 图标

Posted 2023-03-05

【中文标题】如何左对齐 Flutter 中的 OutlineButton 图标

【英文标题】：How to left align the OutlineButton icon in Flutter

【发布时间】：2019-03-09 07:01:53

【问题描述】：

如何在 Flutter 中左对齐OutlineButton 图标？ 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)));

【参考方案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)
    )
)

【参考方案2】：

你可以尝试一些常用的方法，我已经实现了这个：

   OutlineButton(
        onPressed: () => null,
        child: Stack(
          alignment: Alignment.centerLeft,
          children: <Widget>[
            Icon(Icons.save_alt_rounded),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Title'),
              ],
            ),
          ],
        ),
        highlightedBorderColor: Colors.orange,
        color: Colors.green,
        borderSide: new BorderSide(color: Colors.green),
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(5.0)
        )
    );

【参考方案3】：

我用扩展小部件包裹文本小部件。

         OutlinedButton.icon(

                      icon: Icon(
                        Icons.lock,
                        color: MyAppTheme.accentColor,
                        size: 20,
                      ),
                      label: Expanded(
                        child: Text(
                          '      Login',
                          style: TextStyle(
                              color: MyAppTheme.primaryColor,
                              fontSize: 16),
                        ),
                      ),
                      style: OutlinedButton.styleFrom(
                          shape: RoundedRectangleBorder(
                              borderRadius: new BorderRadius.circular(5.0)),
                          side: BorderSide(color: MyAppTheme.primaryColor)
                      ),
                     
                    ),