Блог

Если быть кратким, я хотел бы такого поведения (несколько вкладок с скрытой панелью приложений при прокрутке вниз и отображением панели приложений при прокрутке вверх), и я хотел бы сохранить позиции прокрутки для каждой вкладки:

У меня уже есть все мои вкладки с контроллером прокрутки для каждой, но, если я хорошо понимаю, для реализации SliverAppBar мне нужен только один контроллер прокрутки, используемый в основном NestedScrollView , верно?

И a ScrollController может быть прикреплен только к одному ScrollView . Итак, как я могу управлять своими ScrollViews (StaggeredGridView), чтобы сохранить свои позиции прокрутки?

Я видел свойство ScrollController.positions и PrimaryScrollController класс, но я не знаю, являются ли они решениями.

Если у кого-то есть идея 🙂

Простым решением будет этот пакет extended_nested_scroll_view .

Вот как я реализовал желаемое поведение прокрутки (несколько вкладок с панелью приложений скрываются при прокрутке вниз и AppBar отображаются при прокрутке вверх):

(Он не отшлифован, но с ним можно работать)

 import 'package:flutter/material.dart';

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return NestedScrollView(
      headerSliverBuilder: (context, isScrolled) {
        return [SliverAppBar(
          leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {},
          ),
          title: Text('Pets'),
          centerTitle: false,
          actions: [
            IconButton(
              icon: Icon(Icons.share),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.pets),
              onPressed: () {},
            ),
          ],
        )];
      },
      body: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: TabBar(
            labelColor: Colors.black,
            tabs: [
              Tab(text: 'Dogs',),
              Tab(text: 'Cats'),
              Tab(text: 'Birds'),
            ],
          ),
          body: TabBarView(
            children: [
              Center(child: Icon(Icons.pets, color: Colors.blue)),
              Center(child: Icon(Icons.pets, color: Colors.green)),
              Center(child: Icon(Icons.pets, color: Colors.red)),
            ],
          ),
        ),
      )
    );
  }
}
  

Результат:

Я использовал каркас внутри NestedScrollView с помощью a SliverAppBar , с ними вы получаете практически 2 отдельных AppBar элемента и SliverAppBar скрываете их при прокрутке вверх. Чтобы сохранить позиции прокрутки каждой вкладки, я бы использовал 3 независимых ScrollController . Если вам нужна дополнительная помощь с ними, просто напишите комментарий 😉