我怎样才能在 Flutter 的 AppBar 中有可点击的文本

Question

我知道我可以在 Flutter 的 AppBar 操作中使用 IconButton。但我希望用户看到的不是图标，而是 'Save' 或 'Back' 或 'Cancel' 并在 AppBar 中单击它们。我怎样才能做到这一点？这是我显示 AppBar 的代码的一部分。我想使用 '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

Answer 1

使用TextButton:

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

Answer 2

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

例如

未按下：

按下：

Answer 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,
),

不幸的是，它不适用于较长的文本，例如取消。

Answer 4

第二次来这个帖子找解决办法了。我实际上已经对一些我觉得有趣的答案投了赞成票。

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

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

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

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

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

Answer 5

使用新版本Flutter 2.0

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

Answer 6

您还可以通过在 Center 小部件

中使用 GestureDetector 小部件来实现此目的

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

Answer 7

关键是用Center把你的控件包裹起来，当控件最右边的时候给它一点space向右。里面有什么都不重要

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,
              ),
            ),
          ),
        ),
      )],
    ),

我怎样才能在 Flutter 的 AppBar 中有可点击的文本

How can I have clickable text in the AppBar in Flutter

appbar

flutter