У меня есть некоторые проблемы с панелью приложений и ее содержимым. Я хочу изменить размер изображения в flexibleSpace, когда я прокручиваю содержимое SliverList (в приведенном ниже коде), чтобы изображение соответствовало верхнему элементу в списке.
Прямо сейчас у меня есть это (удерживая положение перетаскивания здесь):нажмите
И я хочу придумать что-то вроде этого (и отскок к начальной расширенной высоте при перетаскивании закончился):нажмите
Tbh, у меня нет идей о том, как добиться такого поведения с помощью панели приложений sliver, любая помощь будет оценена по достоинству!
Вот мой код
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(slivers: [
SliverAppBar(
elevation: 0,
expandedHeight: 360,
floating: false,
pinned: false,
snap: false,
flexibleSpace: FlexibleSpaceBar(
centerTitle: false,
title: Text('Running running'),
background: Image.asset(
'assets/images/excercise_3.jpg',
fit: BoxFit.cover,
)),
),
SliverList(
delegate: SliverChildListDelegate([
_TopInfo(),
_MainContent(),
]))
]),
);
}
В SliverAppBar
включите свойство растяжения stretch: true
, добавьте BouncingScrollPhysics()
в CustomScrollView
, а также добавьте stretchMode: [StretchMode.zoomBackground]
в виджет FlexibleSpaceBar
, как показано ниже;
CustomScrollView(
physics: const BouncingScrollPhysics(),
slivers: [
SliverAppBar(
elevation: 0,
expandedHeight: 360,
floating: false,
pinned: false,
snap: false,
stretch: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: false,
stretchModes: [StretchMode.zoomBackground],
title: Text('Running running'),
background: Image.asset(
'assets/images/excercise_3.jpg',
fit: BoxFit.cover,
),
),
),
SliverList(
delegate: SliverChildListDelegate(
[
_TopInfo(),
_MainContent(),
],
),
)
],
),
Использование физики: const AlwaysScrollableScrollPhysics() сделает свое дело.
В основном это сработает. Однако он перестает работать, если у вас _MainContent() меньше оставшегося места, например. только первые 2 пункта.