如何在 Flutter 中左对齐 OutlineButton 图标

Question

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

Answer 1

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

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

您还可以使用 OutlineButton 小部件并将 Stack/Row 作为子项传递，检查此示例

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

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

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

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

如何在 Flutter 中左对齐 OutlineButton 图标

How to left align the OutlineButton icon in Flutter

button

alignment

dart

flutter

flutter-layout