我如何在Flutter的AppBar中获得可点击的文本 [英] How can I have clickable text in the AppBar in Flutter

问题描述

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

I am aware that I can use IconButton in the actions of the AppBar in Flutter. But instead of the icon, I'd like the user to see the words 'Save' or 'Back' or 'Cancel' and click on them in the AppBar. How can I achieve this? Here is part of my code that shows the AppBar. Instead of the save Icon, I'd like to use 'Save'

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

推荐答案

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

You can use FlatButton within an AppBar's actions list:

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

onPressed must be defined or the button will appear disabled. Also note that by default the shape of the button will create a filled rectangle for the InkWell effect. By setting the shape property to CircleBorder, we get a nicer effect for the pressed state.

例如

未按下:

按下:

这篇关于我如何在Flutter的AppBar中获得可点击的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！