flutter Как отобразить `floating: true` так же, как размер высоты виджета в SliverAppBar? (в CustomScrollView)

Я создаю прокрутку списка с помощью CustomScrollViewsво Флаттере.

Я хочу

  • 1-й и 3-й ряд исправлен
  • 2-й ряд должен быть скрыт
  • При прокрутке вниз виджет (=2-я строка) отображается полностью без разрывов.

Скриншот

IMG_0358 IMG_0360

Видео о действиях в приложении

вниз)(+ Небольшая высота при прокрутке

код

      @override
  Widget build(BuildContext context) {
    final list = List<int>.generate(100, (i) => i + 1);
    return CandySafeScaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            flexibleSpace: ATimelineTop(),
            elevation: 0.5,
          ),
          SliverAppBar(
            floating: true,
            flexibleSpace: _buildSearchFilter(context),
            expandedHeight: 60,
            elevation: 0.5,
          ),
          SliverAppBar(
            pinned: true,
            flexibleSpace: _buildBodyTop(context),
            elevation: 0.5,
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, idx) {
                return ListTile(title: Text(list[idx].toString()));
              },
              childCount: list.length,
            ),
          )
        ],
      ),
    );

1 ответ

Попробуйте это, сначала создайте класс заголовка persister sliver и примените его к sliverAppBar:

      class _SliverHeaderDelegate extends SliverPersistentHeaderDelegate {
  _SliverTabDelegate(this.minHeight, this.maxHeight, this.child);

  final Widget child;
  final double minHeight;
  final double maxHeight;

  @override
  double get minExtent => minHeight;

  @override
  double get maxExtent => maxHeight;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Theme.of(context).primaryColor,
      height: max(maxHeight - shrinkOffset, minHeight),
      child: Container(
        color: Theme.of(context).primaryColor,
        child: PreferredSize(
          preferredSize: Size.fromHeight(30),
          child: child,
        ),
      ),
    );
  }

  @override
  bool shouldRebuild(_SliverTabDelegate oldDelegate) {
    return false;
  }
}

где вы поместите свой заголовок:

      slivers: [
  SliverPersistentHeader(
      pinned: true,
      delegate: _SliverTabDelegate(
        46,
        46,
        SliverAppBar() or AppBar()
...
  SliverPersistentHeader(
      pinned: true,
      delegate: _SliverTabDelegate(
        46,
        46,
        SliverAppBar() or AppBar()
]
Другие вопросы по тегам