代码之家 › 专栏 › 技术社区 › Chatura Dilan

如何在flatter中左对齐OutlineButton图标

flutter

Chatura Dilan · 技术社区 · 7 年前

如何左对齐 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 回复 | 直到 5 年前

Sven 7 年前

有很多方法可以做到这一点,但是使用您提到的工厂构造函数是不可能的 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)
    )
)

Paresh Mangukiya 5 年前

有一些常见的方法可以尝试,我已经实现了:

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