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的{{1}}列表中使用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)), ), ], ),必须定义，否则该按钮将显示为禁用。另请注意，默认情况下，按钮的形状将为InkWell效果创建一个填充的矩形。通过将onPressed属性设置为shape，可以使按下状态得到更好的效果。

例如

未按下：

按下：

Answer 2

您可以将Text包装在GestureDetector中，并使用其onTap属性处理事件。

示例

actions: <Widget>[
  GestureDetector(child: Text("Save"), onTap: save)
],

Answer 3

如果字符串较短，则可以将Text的{{1}}小部件传递到Icon参数中

IconButton.icon

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

Answer 4

这是我第二次来到此线程来寻找解决方案。实际上，我已经提出了一些有趣的答案。

@sosite解决方案几乎是完美的，更改HtmlNode[] nodes = doc.DocumentNode .SelectNodes("//a[@href]") .ToArray(); foreach (HtmlNode item in nodes) { Console.WriteLine(item.InnerHtml); } List<string> outputList = new List<string>(); foreach (HtmlNode link in doc.DocumentNode.SelectNodes("//div[@class='rc']")) { outputList.Add(link.InnerText); }可以显示更长的文本。但是，这并不完美，因为按钮的飞溅半径太大。

最好的方法是使用iconSize。它将模仿默认的IconButton的飞溅半径。

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

constraints: BoxConstraints(width: ...)

如果文本被剪切，请增加宽度值：）

Answer 5

使用新版本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)),
    ),
  ],
),

Answer 6

新版本 flutter2

文本按钮( 样式：TextButton.styleFrom( primary: Colors.red, // 前景 ), onPressed: () { }, child: Text('带有自定义前景的TextButton'), )

Answer 7

您也可以通过在 GestureDetector 小部件中使用 Center 小部件来实现这一点

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

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

7 个答案:

新版本 flutter2