无需滚动的弹力listView和刷新器

发布于 2025-01-23 12:37:15 字数 1068 浏览 0 评论 0原文

我有以下带有listView的刷新,我想使用一个拉动到换句手势,但没有滚动列表的滚动(即元素留在原处。在正常状态下,Appbar将触摸系统行)。

这是代码

 RefreshIndicator(
      key: _refreshIndicatorKey,
      onRefresh: () => widget.refreshState(),
      color: Palette.primary,
      child: Container(child: 
          ListView.builder(
                itemBuilder: (c, i) {
                  var core = (widget.tabContent[selected] == null)
                      ? waitingWidget()
                      : widget.tabContent[selected];

                  var list = List<Widget>.from([
                    top,
                    core,
                    SizedBox(
                        height:
                        max(16.0, MediaQuery.of(context).padding.bottom))
                  ]);
                  return list[i];
                },
                itemCount: 3
           )
      ),
 );

I have the following RefreshIndicator with ListView and I would like to use a pull-to-refresh gesture but without the scrolling of the list (i.e. the elements stay where they are. In a normal state the appbar will touch the system row).

enter image description here

This is the code

 RefreshIndicator(
      key: _refreshIndicatorKey,
      onRefresh: () => widget.refreshState(),
      color: Palette.primary,
      child: Container(child: 
          ListView.builder(
                itemBuilder: (c, i) {
                  var core = (widget.tabContent[selected] == null)
                      ? waitingWidget()
                      : widget.tabContent[selected];

                  var list = List<Widget>.from([
                    top,
                    core,
                    SizedBox(
                        height:
                        max(16.0, MediaQuery.of(context).padding.bottom))
                  ]);
                  return list[i];
                },
                itemCount: 3
           )
      ),
 );

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

一页 2025-01-30 12:37:15

Alex,

我要做的是创建一个包含您的标题/顶部和您的ListView/core> core的列。基本上,将标题从listView中移出,这将使其不可滚动,而ListView可以保持滚动和刷新。

我假设您的图片中所有紫色的东西都在top中。我还为您的listView打开了sharinkwrap,因为根据内容的不同,可能是这种情况。如果您遇到错误,则可以将其关闭。

最后,您有一个包含标头和内容的不可滚动列,并且只有内容部分才能滚动为listView(包括刷新指标)。这是大多数应用程序所遵循的设计,并且将对您的用户熟悉,

因此类似的内容:

Column(
        children: [
          top, //Top has been moved out of the listview
          RefreshIndicator(
            key: _refreshIndicatorKey,
            onRefresh: () => widget.refreshState(),
            color: Palette.primary,
            child: Container(child:
            ListView.builder(
              shrinkWrap: true, //I've set this as true here depending on what your listview content is
              physics: NeverScrollableScrollPhysics(),//This prevents scrolling, but may inhibit refresh indicator, remove as you need
                itemBuilder: (c, i) {
                  var core = (widget.tabContent[selected] == null)
                      ? waitingWidget()
                      : widget.tabContent[selected];

                  var list = List<Widget>.from([
                    core,
                    SizedBox(
                        height:
                        max(16.0, MediaQuery.of(context).padding.bottom))
                  ]);
                  return list[i];
                },
                itemCount: 3
            )
            ),
          ),
        ],
      );

Alex,

What I would do is create a Column that contains your header/top and your listview/core. Basically move your header out of the listview, which would make it non scrollable, while the listview can remain scrollable and refreshable.

I'm assuming all the purple-blueish stuff in your picture is in top. I've also turned shrinkWrap on for your listview as that might have to be the case depending on the content. If you are getting errors, you can turn it off.

In the end you have a non-scrollable column that contains the header and content, and only the content portion is scrollable as a listview (including the refresh indicator). This is the design most apps follow and will be familiar to your users

So something like this:

Column(
        children: [
          top, //Top has been moved out of the listview
          RefreshIndicator(
            key: _refreshIndicatorKey,
            onRefresh: () => widget.refreshState(),
            color: Palette.primary,
            child: Container(child:
            ListView.builder(
              shrinkWrap: true, //I've set this as true here depending on what your listview content is
              physics: NeverScrollableScrollPhysics(),//This prevents scrolling, but may inhibit refresh indicator, remove as you need
                itemBuilder: (c, i) {
                  var core = (widget.tabContent[selected] == null)
                      ? waitingWidget()
                      : widget.tabContent[selected];

                  var list = List<Widget>.from([
                    core,
                    SizedBox(
                        height:
                        max(16.0, MediaQuery.of(context).padding.bottom))
                  ]);
                  return list[i];
                },
                itemCount: 3
            )
            ),
          ),
        ],
      );
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文