如何在 Flutter 中实现应用栏操作文本而不是操作图标？

Posted 2023-02-23

【中文标题】如何在 Flutter 中实现应用栏操作文本而不是操作图标？

【英文标题】：How to implement app bar action text instead of action icon in Flutter?

【发布时间】：2018-12-13 14:14:33

【问题描述】：

我正在尝试在颤振应用程序中实现 appbar。我可以添加一个关闭应用程序的操作图标。我愿意在关闭操作图标旁边显示用户名。我尝试在 appar 部分的操作小部件数组中添加 new Text() 。但无法对齐它。有没有办法直接添加动作文本？

代码：

@override
  Widget build(BuildContext context) 
    //build a form widget using the form key we created above
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(StringRef.appName),
        actions: <Widget>[

          new Container(),

        new Text(
        userName,
        textScaleFactor: 1.5,
        style: new TextStyle(
          fontSize: 12.0,
          color: Colors.white,
        ),
      ),

      new IconButton(
        icon: new Icon(Icons.close),
        tooltip: 'Closes application',
        onPressed: () => exit(0),
      ),
        ],
      ),

【参考方案1】：

将您的 Text 小部件包装在 Center 小部件中为

new Center(
    new Text(
        userName,
        textScaleFactor: 1.5,
        style: new TextStyle(
          fontSize: 12.0,
          color: Colors.white,
        ),
   ),
)

【讨论】：

很高兴它有帮助！如果答案解决了您的问题，请点赞/接受答案。

我和这个问题的作者有同样的问题，我尝试了上面的答案，但对我不起作用，你在这段代码中缺少一个括号

【参考方案2】：

您还可以将 Text 小部件包装在 Align 小部件中，并提供如下所示的 alignment: Alignment.center

Align(
  alignment: Alignment.center,
  child: Text(
    "Save",
    textScaleFactor: 1.5,
    style: TextStyle(
      fontSize: 12.0,
      color: Colors.white,
    ),
  ),
)

您也可以使用TextButton 来实现这一点

TextButton(
  onPressed: () ,
  child: Text('Save', style: TextStyle(color: Colors.white),),
)