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

Question

我知道我可以在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

Answer 1

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

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，可以为按下状态带来更好的效果。

例如

未按下：

按下：

Answer 2

使用TextButton：

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

Answer 3

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

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

不幸的是，它不适用于像Cancel这样的较长文本。

Answer 4

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

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

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

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

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

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