隐藏以继续显示 Sliver 应用栏底部

Question

如何继续仅显示 Sliver 应用栏的“底部”属性，以便当栏本身最小化时它不会在滚动时隐藏？

如屏幕截图所示，我想在应用栏隐藏时继续显示蓝色进度条。在我的代码中，底部属性位于FlexibleSpace块之外，以尝试实现这一目标。

 Widget _buildSliverAppBar(BuildContext context) {
  return CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        actions: actionWidgets,
        **bottom: const ProgressIndicatorWidget(),**
        expandedHeight: 50.0,
        flexibleSpace: FlexibleSpaceBar(
          title: _buildAppTitle(context),
          centerTitle: centerTitle,
        ),
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return sliverBody;
          },
          childCount: 20,
        ),
      ),
    ]
  );
}

谢谢你

Answer 1

你可以试试这个小技巧。您可以将其设置为

ProgressIndicatorWidget

/

SliverPersistentHeader

内的

CustomScrollView

，而不是将

slivers[]

放在应用程序栏的底部。

示例：

SliverPersistentHeader(
      pinned: true, // <---- IMPORTANT!
      delegate: YourDelegateImpl(...),
)

YourDelegateImpl

是抽象类

SliverPersistentHeaderDelegate

的实现。这很简单，你可以这样编码：

import 'package:flutter/material.dart';

class CustomSliverDelegate extends SliverPersistentHeaderDelegate {
  const CustomSliverDelegate({
    required this.builder,
    required this.height,
  });

  final WidgetBuilder builder;
  final double height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return builder(context);
  }

  @override
  double get maxExtent => height;

  @override
  double get minExtent => height;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
      true;
}