dart Flutter如何在appbar中的标题下对齐潜台词?

ev7lccsx  于 2023-04-27  发布在  Flutter
关注(0)|答案(8)|浏览(153)

我有下面的应用程序栏在Flutter,并试图对齐的潜台词“你想要的企业名称”下的标题输入.我已经尝试了不同的方法,但仍然不能得到对齐.它应该有“输入”在顶部,然后对齐中心的潜台词

下面是我的当前代码

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

t5zmwmid1#

要对齐AppBar标题下的文本,您可以使用AppBar的bottom属性,该属性将PreferredSize widget作为参数,还可以帮助您根据需要调整AppBar的高度。
这是密码

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

b1uwtaje

b1uwtaje2#

菜单栏的动作小部件在右边对齐,据我所知,这是不可能获得您的desidered布局。
如果你考虑一个带有标题和副标题的基于列的小部件:

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用于为字幕给予交互性,因为它似乎是你正在尝试做的事情。

l3zydbqr

l3zydbqr3#

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

jqjz2hbq

jqjz2hbq4#

您应该添加列视图。

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),
                 ),
            ]
           ),
8ulbf1ek

8ulbf1ek5#

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

如果你需要文本部件居中,只需将其包裹在一个中心部件中。

whlutmcx

whlutmcx6#

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),
   ),
  )
piztneat

piztneat7#

不知道为什么没有人提到ListTile作为一个可能的解决方案。它提供了titlesubtitle正如我们所需要的。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: ListTile(
          title: Center(
            child: Text(
              'Title',
              style: Theme.of(context).textTheme.headlineSmall,
            ),
          ),
          subtitle: Center(
            child: Text(
              'Subtitle',
              style: Theme.of(context).textTheme.bodyMedium,
            ),
          ),
        ),
      ),
      body: const Center(),
    );
  }
fhity93d

fhity93d8#

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

相关问题