Flutter 在Flatter中展开应用程序栏以允许多行标题？

有人知道我如何根据此处显示的材料指南创建多行标题的应用程序栏吗

有什么办法吗？考虑到这是材料指南的一部分，它似乎应该是直截了当的！值得指出的是，标题是用户定义的，因此我希望允许应用程序栏根据用户输入从一行扩展到多行（可能有限制）

---

迈克

这还没有实现

但是，您可以通过使用为

CustomScrollView

设计的

SliverAppBar

获得类似的结果

但请记住，这并非最佳选择。因为它需要硬编码的图标和东西的大小。由于

FlexibleSpacebar

没有宽度约束

导入“包装：颤振/材料.省道”；
导入“包：cloud_firestore/cloud_firestore.dart”；
导入“包：颤振_项目/材料表.dart”；
void main（）=>runApp（新的MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
标题：“颤振演示”，
主题：新主题数据(
主样本：颜色。蓝色，
),
主页：新建MyHomePage（），
);
}
}
类MyHomePage扩展StatefulWidget{
@凌驾
_MyHomePageState createState（）=>new_MyHomePageState（）；
}
类_MyHomePageState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：自定义滚动视图(
条子：[
银条(
标题：“东京和京都夏季之旅”，
领先：IconButton(
按下：（）{}，
图标：图标（图标菜单），
),
行动：[
图标按钮(
按下：（）{}，
图标：图标（Icons.search），
),
图标按钮(
按下：（）{}，
图标：图标（更多图标），
),
],
),
],
),
);
}
}
类SliverMultileappbar扩展了无状态小部件{
最后的字符串标题；
最终引导；
最后行动清单；
SliverMultileappbar（{this.title，this.leading，this.actions}）；
@凌驾
小部件构建（构建上下文）{
final mediaQuery=mediaQuery.of（上下文）；
double availableWidth=mediaQuery.size.width-160；
如果（操作！=null）{
可用宽度-=32*actions.length；
}
if（前导！=null）{
有效宽度-=32；
}
回程滑杆(
扩展高度：120.0，
对,，
领导:领导,，
行动：行动，
flexibleSpace:FlexibleSpaceBar(
标题：约束框(
约束：BoxConstraints(
最大宽度：可用宽度，
),
子项：文本（标题，textScaleFactor:.8，），
),
),
);
}
}

AppBar将让您接近这一点，但是您必须根据文本长度指示底部PreferredSize小部件的高度，这并不理想

@覆盖
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
背景颜色：颜色。深紫色，
前导：图标按钮（图标：图标（Icons.menu）），按下：（{}），
行动：[
图标按钮（图标：图标（Icons.search），按下：（{}），
图标按钮（icon:icon（Icons.more_vert），按下：（）{}），
],
底部：首选尺寸(
孩子：填充(
填充：LTRB（80.0,0.0,80.0,16.0）中的常数边集，
子：文本(
“东京和京都夏季之旅”，
样式：TextStyle(
颜色：颜色，白色，
字体大小：24.0，
),
),
),
首选尺寸：尺寸（0.0,80.0），
),
),
正文：文本（“…”），
);
}

您可以使用RichText：

          SliverAppBar(
        flexibleSpace: FlexibleSpaceBar(
          background: Container(
            color: Colors.indigoAccent,
          ),
          title: RichText(
            text: TextSpan(children: [
              TextSpan(
                text: Constants.homePageTitle,
                style: textTheme.headline,
              ),
              TextSpan(text: "\n"),
              TextSpan(
                text: Constants.homePageSubtitle,
                style: textTheme.subtitle,
              )
            ]),
          ),
          titlePadding: EdgeInsets.only(left: 10, bottom: 20),
        ),
        floating: true,
        backgroundColor: Colors.greenAccent,
        expandedHeight: 150.0,
      ),

---

这可以通过将AppBar的“title”属性替换为“flexibleSpace”来实现：

如果由于高度导致溢出，只需使用PreferredSize小部件包装AppBar，并将高度设置为比默认值更高的值：

  Scaffold(
    appBar: PreferredSize(
      preferredSize: Size.fromHeight(100),
      child: AppBar(...),
    ),
  ),

---

试试下面的代码。这将提供多行，您也可以在其中控制文本样式。 如果不希望所有线条的样式都不同，请使用文本而不是RichText

             AppBar(
                title: RichText(
                  textAlign: TextAlign.center,
                  text: TextSpan(
                      text: "Developer Developer",
                      style: TextStyle(fontSize: 20),
                      children: <TextSpan>[
                        TextSpan(
                          text: '\nTrip List',
                          style: TextStyle(
                            fontSize: 16,
                          ),
                        ),
                      ]
                  ),
                ),
                backgroundColor: MissionGPSTheme.themeBlueColor
            ),

AppBar(
标题：RichText(
textAlign:textAlign.center，
text:TextSpan(
文本：“开发者”，
样式：TextStyle（字体大小：20），
儿童：[
TextSpan(
文本：'\n IP列表'，
样式：TextStyle(
尺寸：16，
),
),
]
),
),
背景颜色：missiongptheme.themeBlueColor
),

---

这段代码将创建一个自定义的

Scaffold

，其中有一个

AppBar

，它支持不接收标题、标题、标题和副标题。如果您不提供标题，它将显示给定的文本（在示例中为应用程序的名称），而如果您设置标题和副标题，它将使用两行样式和适当的材质设计文本样式

导入“包装：颤振/材料.省道”；
类TwoLinesAppBarScaffold扩展了无状态小部件{
最终窗口小部件主体；
最后的字符串标题；
最后一串字幕；
TwoLinesAppBarScaffold（{this.body，this.title=“QuitNow！”，this.subtitle}）；
@凌驾
小部件构建（构建上下文）{
小部件；
如果（副标题==null）{
小部件=文本（标题）；
}否则{
widget=RichText(
textAlign:textAlign.start，
text:TextSpan(
正文：标题，
样式：TextStyle(
字体大小：2
  Scaffold(
    appBar: AppBar(
      flexibleSpace: Center(
        child: Column(
          children: [
            Text('Title Line One'),
            Text('Title Line Two'),
          ],
        ),
      ),
    ),
    body: body
  ),

  Scaffold(
    appBar: PreferredSize(
      preferredSize: Size.fromHeight(100),
      child: AppBar(...),
    ),
  ),

             AppBar(
                title: RichText(
                  textAlign: TextAlign.center,
                  text: TextSpan(
                      text: "Developer Developer",
                      style: TextStyle(fontSize: 20),
                      children: <TextSpan>[
                        TextSpan(
                          text: '\nTrip List',
                          style: TextStyle(
                            fontSize: 16,
                          ),
                        ),
                      ]
                  ),
                ),
                backgroundColor: MissionGPSTheme.themeBlueColor
            ),