Flutter如何在appbar的标题下对齐字幕？答案

【问题标题】：Flutter how to get subtext aligned under title in appbar?Flutter如何在appbar的标题下对齐字幕？
【发布时间】：2018-12-21 06:42:59
【问题描述】：

我有以下应用栏在颤动，并试图对齐标题下的潜文本“您想要的公司名称”输入。我尝试了不同的方法，但仍然无法对齐。它应该在顶部有“输入”，然后是潜台词对齐中心

这是我当前的代码

Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
          preferredSize: Size.fromHeight(75.0), 
          child: AppBar(
            centerTitle: true,
            title: Text('enter'),
            actions: <Widget>[
              new Container(),
              new Center(
                  child: Text(
                'Your desired business name',
                textAlign: TextAlign.center,
                style: new TextStyle(
                  fontSize: 14.0,
                  color: Colors.white,
                ),
              )),
            ],
          )),  
    );
  }

【问题讨论】：

标签： dart flutter

【解决方案1】：

要对齐AppBar标题下的文本，您可以使用AppBar的bottom属性，该属性将PreferredSize小部件作为参数，还可以帮助您根据需要调整AppBar的高度。

这是代码

AppBar(
    title: Text('Title 1'),
    centerTitle: true,
    bottom: PreferredSize(
        child: Text("Title 2"),
        preferredSize: null),
  )

【讨论】：

离底部太近了。

【解决方案2】：

菜单栏操作小部件在右侧对齐，据我所知，无法获得您想要的布局。

您是否应该考虑使用带有标题和副标题的基于列的小部件：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: new AppBar(
      centerTitle: true,
      title: Column(children: [
        Text(
          "Title",
        ),
        GestureDetector(
          child: Text('subtitle'),
          onTap: () {
            print("tapped subtitle");
          },
        )
      ]),
      ...

在此示例中，有一个 GestureDetector 用于为字幕提供交互性，因为这似乎是您正在尝试做的事情。

【讨论】：

这效果最好，但我删除了 GestureDetector，因为我不需要它。谢谢

【解决方案3】：

我正在使用此代码添加字幕并显示 UserIcon

//name,status and userPic are variable's

@override
  Widget build(BuildContext context) 
  {
    return new Scaffold(
      appBar: new AppBar(
        title: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              name,
              style: TextStyle(color: Colors.white, fontSize: 16.0),
            ),
            Text(
              status,
              style: TextStyle(color: Colors.white, fontSize: 14.0),
            )
          ],
        ),

        leading: new Padding(
          padding: const EdgeInsets.all(5.0),
          child: new CircleAvatar(
            backgroundImage: new NetworkImage(userPicUrl),
          ),
        ),
        actions: <Widget>[new Icon(Icons.more_vert)],
      ),
    );
  }

Output

【讨论】：

【解决方案4】：

您应该添加列视图。

title: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
             Text(
                  "Title",
                   style: TextStyle(color: Colors.white, fontSize: 16.0),
                 ),
             Text(
                 "Sub Title",
                 style: TextStyle(color: Colors.white, fontSize: 14.0),
                 ),
            ]
           ),

【讨论】：

【解决方案5】：

在这些情况下，我更喜欢使用 ListTile：

@override
Widget build(BuildContext context) {

  return Scaffold(
    appBar:
      AppBar(
        title:
          ListTile(
            title:
              Text("Enter", style: TextStyle(color:Colors.white)),
            subtitle:
              Text("Your desired business name", style: TextStyle(color:Colors.white)),
          )
      ),
    );
}

如果您需要将 Text 小部件居中，只需将其包装在 Center 小部件中即可。

【讨论】：

【解决方案6】：

https://stackoverflow.com/a/53880971/9185192 中的答案有效，但在 Dart 中安全着陆为 null 时，不允许将 preferredSize 设置为 null。

因此解决方案是将preferredSize 设置为零或任何其他有效数字。

appBar: AppBar(
    title: Text('Title 1'),
    centerTitle: true,
    bottom: PreferredSize(
        child: Text("Title 2"),
        preferredSize: Size.fromHeight(0),
   ),
  )

【讨论】：

【解决方案7】：

appBar: AppBar(
      title: Center(
        child: Text('Flutter Tutorial'),
      ),

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。
希望它能解决问题，但请添加对代码的解释，以便用户完全理解他/她真正想要的。