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

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

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

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

您应该添加列视图。

KdTree::float2map(std::vector<float3>& data)
    {    
       std::vector<std::map<int, float> > m_pnts;
       int cnt = 0;
       for(int i = 0; i = data.size(); i++)
          {
             std::map<int, float> tmp;
             tmp.insert(std::make_pair(0, data[i].x));
             tmp.insert(std::make_pair(1, data[i].y));
             tmp.insert(std::make_pair(2, data[i].z));

             m_pnts.push_back(tmp);
             std::cout << m_pnts.size() << std::endl;
            }

       }

       return m_pnts;
    }

Answer 4

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

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

Answer 6

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

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

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

Answer 7

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

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

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

7 个答案: