SliverAppBar () не сворачивается со ListView во Flutter

Я пытаюсь отобразить вкладки для каждой основной вкладки (панель вложенных вкладок) в SliverAppBar(). Это выглядит так:

См. изображение

Просмотреть GIF

Содержимое вкладки экзамена находится в Container() виджете (откуда возникла ошибка на изображении). Теперь с виджетом Container() SliverAppBar() будет сворачиваться, когда пользователь прокручивает содержимое вкладки экзамена (белый экран на изображении), на данный момент все в порядке.

Итак, после того, как я заменил Container() на ListView.builder(), чтобы сделать содержимое вкладки прокручиваемым, теперь я не могу свернуть SliverAppBar() из содержимого вкладки (белый экран на изображении). но могу от SliverAppBar().

Посмотрите этот GIF после того, как я добавил ListView.builder ()

Итак, как я могу сделать SliverAppBar прокручиваемым (сворачивающимся) с помощью Listview? Может ли кто-нибудь помочь мне? пожалуйста :(

Этот пример (демо):

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(title: 'SliverAppBar App Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: DefaultTabController(
          length: 2,
          child: NestedScrollView(
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return [
                SliverOverlapAbsorber(
                  handle:
                      NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                  child: SliverSafeArea(
                    top: false,
                    sliver: SliverAppBar(
                      pinned: true,
                      title: Text(widget.title),
                      expandedHeight: 500,
                    ),
                  ),
                ),
                SliverPersistentHeader(
                  delegate: _SliverAppBarDelegate(
                    TabBar(tabs: [Tab(text: 'Tab A'), Tab(text: 'Tab B')]),
                    Colors.blue,
                  ),
                  pinned: false,
                ),
              ];
            },
            body: TabBarView(
              children: <Widget>[
                NestedTabs('A'),
                NestedTabs('B'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// This class is to handle the main tabs (Tab A & Tab B)
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate(this._tabBar, this._color);

  TabBar _tabBar;
  final Color _color;

  @override
  double get minExtent => _tabBar.preferredSize.height;
  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new Container(
      color: _color,
      alignment: Alignment.center,
      child: _tabBar,
    );
  }

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

class NestedTabs extends StatelessWidget {
  final String mainTabName;
  NestedTabs(this.mainTabName);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(20),
        child: Container(
          color: Colors.blue,
          alignment: Alignment.bottomCenter,
          child: TabBar(
            tabs: [
              Tab(text: 'Tab $mainTabName-1'),
              Tab(text: 'Tab $mainTabName-2')
            ],
          ),
        ),
      ),
      body: TabBarView(
        children: [
          ListView.builder(
            padding: const EdgeInsets.all(8),
            itemCount: 500,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                  height: 50,
                  width: 200,
                  color: Colors.black45,
                  child: Center(child: Text('Index ${index}')));
            },
          ),
          ListView.builder(
            padding: const EdgeInsets.all(8),
            itemCount: 500,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                  height: 50,
                  width: 200,
                  color: Colors.black45,
                  child: Center(child: Text('Index ${index}')));
            },
          )
        ],
      ),
    );
  }
}


Спасибо :)


person Alyahya    schedule 16.01.2020    source источник
comment
У вас огромное количество информации и нет конкретного вопроса. Пожалуйста, ознакомьтесь с правилами вопроса: stackoverflow.com/help/how-to-ask   -  person João Soares    schedule 17.01.2020
comment
Извините, но я думал, что это ясно :(. Мой вопрос в том, как я могу сделать SliverAppBar прокручиваемым (сворачивающимся) с помощью Listview   -  person Alyahya    schedule 17.01.2020
comment
Я бы посоветовал вам удалить весь код и описания, не относящиеся к вашей проблеме, и оставить только самое необходимое.   -  person João Soares    schedule 17.01.2020
comment
Спасибо, обновил код и написал полный пример   -  person Alyahya    schedule 17.01.2020
comment
Я столкнулся с той же проблемой, и вопрос @ JoãoSoares ясен, почему вы говорите, что это непонятно. GIF говорит само за себя.   -  person Idris Stack    schedule 29.04.2020
comment
@IdrisStack Если вы понимаете и столкнулись с той же проблемой. Пожалуйста, дайте ответ.   -  person João Soares    schedule 29.04.2020
comment
У меня нет ответа   -  person Idris Stack    schedule 29.04.2020
comment
Столкнувшись с той же проблемой :(   -  person Sanjay Kumar    schedule 21.10.2020


Ответы (1)


Используйте SliverList () вместо SliverFillRemaining для ListView

person islam akhrarov    schedule 28.05.2020