如何在颤动的 AppBar 上显示文本？答案

【问题标题】：How to display text over AppBar in flutter?如何在颤动的 AppBar 上显示文本？
【发布时间】：2021-12-01 10:29:29
【问题描述】：

我想像这样在应用栏上方显示短信，

如何使用颤振实现这一目标？

提前致谢！

【问题讨论】：

如果你使用Column没有问题，但问题是......当你滚动时会发生什么？ “正在连接”标签消失，appbar 保持可见？
@Maikzen 应用栏在滚动时保持可见。
还有连接标签吗？
是的，滚动时也可以看到连接标签。

【解决方案1】：

Scaffold(
      appBar: PreferredSize(
          preferredSize: Size.fromHeight(customSize),
          child: Column(
            children: [
              Text('Connecting...'),
              AppBar(
                title: Text('Recents'),
              )
            ],
          )),
      body: content...,
    );

您可以添加父SafeArea以避免操作系统入侵

【讨论】：

我运行你的代码。我得到了这个结果：drive.google.com/file/d/1dkTN6Yp1FKrYj6gaywYAq8FpzBBDrTgv/… Connecting... 消息显示在状态栏上方。我想要连接...就在 AppBar 之前。
就像我说的那样，把SafeArea 作为 Scaffold 的父级：D
谢谢它的工作。

【解决方案2】：

您也可以使用填充来对齐。

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool _showConnecting = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 24 for default icon size
        toolbarHeight: _showConnecting ? kToolbarHeight + 24 : kToolbarHeight,
        centerTitle: false,
        leadingWidth: 0,
        titleSpacing: 0,
        automaticallyImplyLeading: false,
        title: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            if (_showConnecting)
              Container(
                color: Colors.black,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.network_cell_sharp),
                    Text("Connecting.."),
                  ],
                ),
              ),
            Container(
              height: kToolbarHeight,
              alignment: Alignment(-.8, 0),
              color: Theme.of(context).primaryColor,
              child: Text("Recent Mentions"),
            ),
          ],
        ),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            ...List.generate(
              44,
              (index) => Container(
                height: 100,
                color: index.isEven ? Colors.amber : Colors.cyanAccent,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _showConnecting = !_showConnecting;
          });
        },
      ),
    );
  }}

【讨论】：

根据您的代码结果：drive.google.com/file/d/1CTfPiK-otg3yXoj0lcfaUMPkEj1l3IBr/… 如何在抽屉和操作中也提供全宽消息？
而不是使用leading 和actions 使用第二个Container(child:Row(<leading, title,Actions >)) 来放置它们
谢谢@Yeasin Sheikh

【解决方案3】：

Scaffold -> Body -> Column -> [ ...widgets, AppBar() ]

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案4】：

如果你想实现相同的设计，考虑使用这个来实现appBar和statusBar之间颜色的一致性：

import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.black, // status bar color
  ));
}

另一方面，appBar title 属性是一个小部件，你可以随意修改它！

【讨论】：

感谢您的回答。首先，我想在 appbar 上方显示消息。