flutter - 在 Flutter 中，当 SliverAppBar 不是主要的时，如何使 SliverAppBar 尊重浮动状态的顶部安全区域

Question

我有一个 SliverAppBar 看起来这是我想要的正常状态：

但是当向下滚动时，应用栏不尊重其浮动状态的顶部安全区域：

这是我的构建方法代码

      return Scaffold(
      body: CustomScrollView(
        controller: _scrollController,
        slivers: <Widget>[
          SliverSafeArea(
            bottom: false,
            sliver: SliverPadding(
              padding: const EdgeInsets.symmetric(horizontal: 5),
              sliver: SliverAppBar(
                primary: false,
                centerTitle: true,
                actions: actions,
                floating: true,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
                title: const Text('title'),
              ),
            ),
          ),
          SliverGrid(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  margin: const EdgeInsets.all(20),
                  color: Colors.amber,
                );
              },
              childCount: 130,
            ),
          ),
        ],
      ),
    );

Answer 1

我认为您需要一个自定义应用栏来满足您的目的。

像这样的东西

class FloatingAppBar extends StatelessWidget {
  const FloatingAppBar(
    this.title, {
    this.actions = const <Widget>[],
    Key? key,
    this.leading = const BackButton(),
    this.height = 48,
  }) : super(key: key);

  final String? title;
  final List<Widget> actions;
  final Widget leading;
  final double height;

  @override
  Widget build(BuildContext context) {
    //final Color bgColor = isDark(context) ? Colors.grey.shade800 : Colors.white;
    return Center(
      child: Container(
        height: height,
        width: MediaQuery.of(context).size.width - 20,
        constraints: const BoxConstraints(maxWidth: 600),
        decoration: BoxDecoration(
          color: isDark(context) ? Colors.grey.shade800 : Colors.white,
          borderRadius: BorderRadius.circular(8),
          boxShadow: <BoxShadow>[
            BoxShadow(
              color: isDark(context) ? Colors.black54 : Colors.grey.shade500,
              blurRadius: 1,
              spreadRadius: 0.1,
              offset: const Offset(0, 0.7),
            ),
          ],
        ),
        padding: const EdgeInsets.all(0),
        margin: const EdgeInsets.only(top: 5),
        child: Row(
          children: <Widget>[
            leading,
            Expanded(
              child: Center(
                child: Text(
                  title ?? '',
                  textDirection: getTextDirection(title ?? ''),
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    //color: Colors.black87,
                  ),
                ),
              ),
            ),
            if (actions.isEmpty)
              const IconButton(
                padding: EdgeInsets.all(0),
                iconSize: 20,
                icon: Icon(iconArrowLeft, color: Colors.transparent),
                onPressed: null,
              ),
            //
            ...actions
          ],
        ),
      ),
    );
  }
}