Перечисление CollapseMode

Перечисление CollapseMode передают в collapseMode у SliverAppBar вместе с FlexibleSpaceBar.

Синтаксис

CollapseMode.pin

Значения

Значение	Описание
`pin`	Заголовок flexibleSpace остаётся на месте, фон сжимается.
`parallax`	Фон двигается медленнее контента, эффект параллакса.
`none`	FlexibleSpace не сжимается вместе с шапкой.

Пример

Давайте закрепим заголовок режимом pin:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: CustomScrollView(
					slivers: [
						SliverAppBar(
							expandedHeight: 120,
							collapseMode: CollapseMode.pin,
							flexibleSpace: FlexibleSpaceBar(title: Text('abcde')),
						),
						SliverList.list(children: [Text('12345')]),
					],
			),
		),
	);
}

На экране заголовок остаётся видимым при сжатии шапки.

Пример

Давайте включим parallax:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: CustomScrollView(
					slivers: [
						SliverAppBar(
							expandedHeight: 140,
							collapseMode: CollapseMode.parallax,
							flexibleSpace: FlexibleSpaceBar(
								background: ColoredBox(color: Colors.teal),
								title: Text('12345'),
							),
						),
						SliverList.list(children: [Text('abcde')]),
					],
			),
		),
	);
}

На экране фон шапки смещается плавнее текста при прокрутке.

Смотрите также

виджет SliverOverlapInjector,
который часто ставят рядом в прокручиваемых экранах
виджет SliverOverlapAbsorber,
который дополняет работу с прокруткой
виджет SliverSafeArea,
который помогает собрать сложный список
виджет SliverVisibility,
который задаёт поведение или данные прокрутки