如何在 Flutter 的 AppBar 中有可点击的文本

Posted 2023-02-23

【中文标题】如何在 Flutter 的 AppBar 中有可点击的文本

【英文标题】：How can I have clickable text in the AppBar in Flutter

【发布时间】：2019-03-13 19:01:21

【问题描述】：

我知道我可以在 Flutter 的 AppBar 的操作中使用 IconButton。但我希望用户看到的不是图标，而是“保存”或“返回”或“取消”字样，然后在 AppBar 中单击它们。我怎样才能做到这一点？这是我显示 AppBar 的代码的一部分。而不是保存图标，我想使用“保存”

return Scaffold(
    appBar: AppBar(
      leading: IconButton(icon: Icon(Icons.arrow_back),
      tooltip: "Cancel and Return to List",
      onPressed: () 
        Navigator.pop(context, true);
      ,
    ),
      automaticallyImplyLeading: false,
      title: Text(title),
      actions: <Widget>[

        IconButton(
          icon: Icon(Icons.save),
          tooltip: "Save Todo and Retrun to List",
          onPressed: () 
            save();
          ,
        )
      ],
    ),//AppBar

【问题讨论】：

你可以使用 FlatButton.icon(onPressed: ()save();, icon: Icon(Icons.save), label: 'Save');而不是 Iconbutton。

非常感谢！我实际上需要一个平面按钮。

但它对arrow_back不起作用

确切地说：在前导部分没有足够的空间来放置单词“取消”而不是箭头

对于那些想要图标而不是文本的人，请参阅How to add icon to AppBar in Flutter

【参考方案1】：

您可以在AppBar 的actions 列表中使用FlatButton：

appBar: AppBar(
  title: Text("Test Screen"),
  actions: <Widget>[
    FlatButton(
      textColor: Colors.white,
      onPressed: () ,
      child: Text("Save"),
      shape: CircleBorder(side: BorderSide(color: Colors.transparent)),
    ),
  ],
),

onPressed 必须定义，否则按钮将显示为禁用。 另请注意，默认情况下，按钮的形状将为 InkWell 效果创建一个填充矩形。通过将shape 属性设置为CircleBorder，我们可以获得更好的按下状态效果。

例如

未按下：

按下：

【参考方案2】：

使用TextButton：

appBar: AppBar(
  actions: <Widget>[
    TextButton(
      onPressed: () ,
      child: Text('Save'),
    ),
  ],
)

【讨论】：

不要使用这种方式，因为你必须添加样式来修复位置

@TuGordoBello 更新了代码。感谢您指出，当时我没有意识到我使用的是一种普通的旧方法。

对1.22版本没有影响

@EricYuan 如果我没记错的话TextButton 是在 Flutter 2.0 之后添加的。

【参考方案3】：

如果您有短字符串，那么您可以将Text 小部件代替Icon 传递到IconButton.icon 参数中：

IconButton(
  icon: Text(
    "Save",
    style: Theme.of(context).textTheme.button.apply(
      color: Theme.of(context).appBarTheme.actionsIconTheme.color,
    ),
  ),
  onPressed: _save,
),

很遗憾，它不适用于像 Cancel 这样较长的文本。

【讨论】：

这可行，但您必须更改图标大小。 IconButton(iconSize: 50, icon: Text("DONE"), ),

同意。默认情况下，它适用于大多数单个字母（例如 R、S），但不适用于像“m”这样较长的字母。

【参考方案4】：

这是我第二次来这个帖子寻找解决方案。实际上，我对一些我觉得有趣的答案投了赞成票。

@sosite 解决方案几乎完美，更改iconSize 可以显示更长的文本。但是，它并不完美，因为按钮的飞溅半径会太大。

最好的方法是使用constraints: BoxConstraints(width: ...)。它将模仿默认 IconButton 的飞溅半径。

我们可以使用更大的文本，多世界的文本并将文本对齐到中心以完美对齐。

IconButton(
            constraints: BoxConstraints.expand(width: 80),
            icon: Text('CREATE GAME', textAlign: TextAlign.center),
            onPressed: () ,
          ),

如果文字被剪切，增加宽度值:)

【参考方案5】：

您也可以通过在Center 小部件中使用GestureDetector 小部件来实现此目的

   Center(
      child: GestureDetector(
        onTap: (),
        child: Text(
          "Ssave",
          textScaleFactor: 1.5,
          style: TextStyle(
            fontSize: 12.0,
            color: Colors.white,
          ),
        ),
      ),
    )

【参考方案6】：

关键是使用Center 包裹你的控件，并在控件最右边的时候给它右边一点空间。里面的东西都不重要。

AppBar(
      title: Text('The tile'),
      actions: [Center(
        child: Padding(
          padding: const EdgeInsets.fromLTRB(0,0,8,0),
          child: InkWell(
            onTap: (),
            child: Text(
              'Send',
              textScaleFactor: 1.5,
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ),
      )],
    ),

【参考方案7】：

使用新版本Flutter 2.0

appBar: AppBar(
  title: Text("Test Screen"),
  actions: <Widget>[
    TextButton(
      textColor: Colors.white,
      onPressed: () ,
      child: Text("Save"),
      shape: CircleBorder(side: BorderSide(color: Colors.transparent)),
    ),
  ],
),