Почему SliverFillRemaining слишком сильно расширяется?
Я пытаюсь создать SliverAppBar, который реагирует на свою высоту, показывая разные вещи в зависимости от того, расширен он или нет.
Я основал его на https://medium.com/flutter-community/flutter-sliverappbar-snap-those-headers-544e097248c0, но у меня проблема:
Пустое место в конце списка слишком велико.
Удаление SliverFillRemaining не требуется, если количество элементов велико, но изменение
numberOfItems
например, для 3 элементов (вместо 30) необходим SliverFillRemaining.
Проверьте этот блокнот для кода: https://dartpad.dev/2c434ddf2d4d1e87bd4b421f0a673c2d
CustomScrollView(
physics: AlwaysScrollableScrollPhysics(),
controller: _controller,
slivers: [
SliverAppBar(
pinned: true,
backgroundColor: Colors.grey[100],
stretch: true,
automaticallyImplyLeading: false,
flexibleSpace: Header(
maxHeight: maxHeight,
minHeight: minHeight,
),
collapsedHeight: minimizedHeight,
expandedHeight: maxHeight - MediaQuery.of(context).padding.top,
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return _buildCard(index);
},
childCount: numberOfItems,
),
),
SliverFillRemaining(
hasScrollBody: true), // ** <-- this will add space, but too much **
],
),
4 ответа
если вы просто добавляете определенную высоту пространства, я предлагаю вам использовать SliverToBoxAdapter:
SliverToBoxAdapter(
child: SizedBox(
height: 50,
),
),
сделайте значение hasScrollBody ложным, например:
SliverFillRemaining(
hasScrollBody: false
),
Чтобы избежать вашегоWidget
внутри твоегоSliverToBoxAdapter
от расширения. Вы можете обернуть его внутриAlign
илиCenter
илиColumn
вот так :
SliverToBoxAdapter(
child: Align(
alignment: Alignment.centerLeft,
child: YourWidget(),
),
)
Этот пакет делает именно то, что вы ожидаете, я пытался уже несколько дней и, наконец, использовал его. Он работает так же, как SliverToBoxAdapter, но достаточно расширяется и не вызывает чрезмерной прокрутки.
CustomScrollView(
physics: AlwaysScrollableScrollPhysics(),
controller: _controller,
slivers: [
SliverAppBar(
pinned: true,
backgroundColor: Colors.grey[100],
stretch: true,
automaticallyImplyLeading: false,
flexibleSpace: Header(
maxHeight: maxHeight,
minHeight: minHeight,
),
collapsedHeight: minimizedHeight,
expandedHeight: maxHeight - MediaQuery.of(context).padding.top,
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return _buildCard(index);
},
childCount: numberOfItems,
),
),
SliverFillRemainingBoxAdapter(
child: // Your content goes here),
],
),