2

我正在尝试重现一个 UX 设计，其中我们有以下组件：

  1. 包含文本“Desmos”的顶部栏
  2. 一个主要的帖子内容，由
    • 标题（用户图标、用户名、发布日期、选项按钮）
    • 发布消息
    • 任何可能存在的帖子图片
  3. 一个标签栏，允许用户显示评论列表或反应列表。

这种 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());
        },
      ),
    ),
  ),
);

通过单击以下预览可以看到结果：

创建用户体验

此实现的问题如下：

  1. 由于PostContentis a Column，我怎样才能得到它的高度，这样我就不必在SliverAppBar'sexpandedHeight属性中指定一个固定值？
  2. 如何避免在向上ListView滚动时，滚动在到达时停止AppBar而不进一步向上滚动？
4

0 回答 0