如何在 flutter 中在 AppBar 上显示文本？

Question

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

我怎样才能用 flutter 实现这个？

提前致谢！

Answer 1

脚手架 -> 正文 -> 列 -> [ ...小部件，AppBar() ]

Answer 2

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

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

Answer 3

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

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

Answer 4

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

import 'package:flutter/services.dart';

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

另一方面，appBar title属性是一个widget，你可以随意修改！

如何在 flutter 中在 AppBar 上显示文本？

How to display text over AppBar in flutter?

dart

flutter

flutter-layout