flutter - 如何在 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

您可以在 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，我们可以获得更好的按下状态效果。

例如

未按下:

按下: