颤振如何在应用程序栏中标题下对齐超文本？

Question

我下面的应用程序栏出现混乱，并尝试将标题下的子文本“您想要的公司名称”对齐。我尝试了不同的方法，但仍然无法对齐。它应该在顶部带有“ enter”，然后将子文本居中对齐

这是我当前的代码

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

Answer 1

我正在使用此代码添加字幕并显示 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

Answer 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，字幕之间存在for互动性，因为这似乎是您要尝试的操作。

Answer 3

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

这是代码

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

Answer 4

在这些情况下，我更喜欢使用 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)),
          )
      ),
    );
}

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