Виджет NestedScrollView

Виджет NestedScrollView принимает headerSliverBuilder для шапки и body для основного списка. Часто внутри используют SliverOverlapAbsorber и SliverOverlapInjector.

Синтаксис

NestedScrollView(
	headerSliverBuilder: (context, inner) => [SliverAppBar(title: Text('abcde'))],
	body: ListView(),
)

Параметры

Параметр	Описание
`headerSliverBuilder`	Строит слайверы шапки. Обязательный параметр.
`body`	Виджет тела, обычно список. Обязательный параметр.
`controller`	Контроллер для связанной прокрутки.

Пример

Давайте сделаем шапку и список:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: NestedScrollView(
					headerSliverBuilder: (BuildContext context, bool inner)
					{
						return [
							SliverAppBar(title: Text('abcde')),
						];
					},
					body: ListView.builder(
						itemCount: 15,
						itemBuilder: (context, index) => ListTile(title: Text('12345')),
					),
				),
			),
		),
	);
}

На экране шапка и список реагируют на один жест прокрутки.

Пример

Давайте добавим плавающую шапку:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: NestedScrollView(
					headerSliverBuilder: (BuildContext context, bool inner)
					{
						return [
							SliverAppBar(
								floating: true,
								title: Text('abcde'),
							),
						];
					},
					body: ListView(children: [Text('12345')]),
				),
			),
		),
	);
}

На экране шапка может появляться при прокрутке вверх.

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

виджет CustomScrollView,
который часто ставят рядом в прокручиваемых экранах
виджет PageView,
который дополняет работу с прокруткой
виджет SingleChildScrollView,
который помогает собрать сложный список
метод builder,
который задаёт поведение или данные прокрутки