Я пытаюсь воспроизвести дизайн UX, в котором у нас есть следующие компоненты:
- Верхняя строка, содержащая текст "Desmos"
- Содержание основного сообщения, который состоит из
- Заголовок (значок пользователя, имя пользователя, дата публикации, кнопка настроек)
- Сообщение сообщения
- Любое изображение сообщения, которое может присутствовать
- Панель вкладок, которая позволяет пользователю отображать либо список Комментарии , либо список Реакции .
Особенность этого 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());
},
),
),
),
);
Результат можно увидеть, щелкнув по следующему предварительному просмотру:
Проблемы с этой реализацией заключаются в следующем:
- Поскольку
PostContent
является Column
, как я могу получить его высоту, чтобы я не нужно указать фиксированное значение в атрибуте SliverAppBar
expandedHeight
? - Как можно избежать, чтобы при прокрутке вверх по
ListView
прокрутка прекращалась, когда он достигал AppBar
, без прокрутки дальше вверх?