Flutter - SliverAppBar с привязкой панели инструментов и вложенной прокруткой - PullRequest
0 голосов
/ 27 февраля 2020

Я пытаюсь воспроизвести дизайн UX, в котором у нас есть следующие компоненты:

  1. Верхняя строка, содержащая текст "Desmos"
  2. Содержание основного сообщения, который состоит из
    • Заголовок (значок пользователя, имя пользователя, дата публикации, кнопка настроек)
    • Сообщение сообщения
    • Любое изображение сообщения, которое может присутствовать
  3. Панель вкладок, которая позволяет пользователю отображать либо список Комментарии , либо список Реакции .

Особенность этого UX заключается в том, что когда пользователь прокручивает список Комментариев или Реакций (на основе которого он в данный момент просматривает), список вертикальной прокрутки привязывается к панели вкладок.

Оттуда пользователь сможет либо прокрутить список комментариев вниз, либо с помощью дополнительной прокрутки снова показать сообщение. Обратите внимание, что исходное сообщение должно быть размещено таким образом, чтобы для его повторного показа потребовалось большее усилие прокрутки.

Я собрал видео, которое вы можете посмотреть здесь, чтобы лучше понять, как это должно работать:

Wanted UX

Я уже реализовал виджет под названием PostContent, который содержит все вышеупомянутое основное содержание поста. Я также уже пытался написать код для требуемого UX, который выглядит следующим образом:

Scaffold(
  body: SafeArea(
    child: NestedScrollView(
      headerSliverBuilder: (context, _) {
        return [
          SliverAppBar(
            backgroundColor: Colors.white,
            expandedHeight: 310,
            pinned: true,
            primary: true,
            flexibleSpace: PostContent(post: post),
          )
        ];
      },
      body: ListView.builder(
        itemBuilder: (context, index) {
          return Text(index.toString());
        },
      ),
    ),
  ),
);

Результат можно увидеть, щелкнув по следующему предварительному просмотру:

Created UX

Проблемы с этой реализацией заключаются в следующем:

  1. Поскольку PostContent является Column, как я могу получить его высоту, чтобы я не нужно указать фиксированное значение в атрибуте SliverAppBar expandedHeight?
  2. Как можно избежать, чтобы при прокрутке вверх по ListView прокрутка прекращалась, когда он достигал AppBar, без прокрутки дальше вверх?
...