如何在appbar中的标题下对齐子文件？

Question

我有以下应用程序栏在颤动，并尝试在标题输入下对齐潜在客户“您想要的商家名称”。我尝试了不同的方法，但仍然无法对齐。它应该在顶部“输入”，然后在子文本对齐的中心

这是我目前的代码

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

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

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

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用于交互字幕，因为它似乎是你想要做的。

Answer 2

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

这是代码

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

Answer 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

Answer 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),
                 ),
            ]
           ),