Fatal编程技术网
  • flutter/
  • Flutter 不带滚动视图的刷新指示器

Flutter 不带滚动视图的刷新指示器

flutter

Flutter 不带滚动视图的刷新指示器,flutter,Flutter,我知道使用ListView或SingleChildScrollViewRefreshIndicator只能在本地工作，但我想在不滚动的页面上使用RefreshIndicator。这可能吗？如果可能，如何实现？如果没有不滚动的页面，这可能吗？ -没有 请阅读RefreshIndicator中参数子项的文档： 树中此小部件下方的小部件 刷新指示器将堆叠在此子项的顶部。当子代的可滚动子代被过度滚动时，该指示器将出现 通常是[ListView]或[CustomScrollView] 有解决办法吗？

我知道使用
ListView
或
SingleChildScrollView
RefreshIndicator
只能在本地工作，但我想在不滚动的页面上使用
RefreshIndicator
。这可能吗？如果可能，如何实现？如果没有不滚动的页面，这可能吗？

-没有

请阅读RefreshIndicator中参数子项的文档：

树中此小部件下方的小部件

刷新指示器将堆叠在此子项的顶部。当子代的可滚动子代被过度滚动时，该指示器将出现

通常是[ListView]或[CustomScrollView]

有解决办法吗？

-对

您只能在Listview的子列表中放置一个小部件：

new RefreshIndicator(
  child: new ListView(
    children: <Widget>[
      new Text('This is child with refresh indicator'),
    ],
  ),
  onRefresh: () {},
)

新刷新指示器(
子：新列表视图(
儿童：[
新文本（“这是具有刷新指示器的子项”），
],
),
onRefresh:（）{}，
)
您必须执行以下操作：

  • 使用属性设置为
    AlwaysScrollableScrollPhysics（）
    的
    SingleChildScrollView
  • 确保它的子项具有屏幕大小的高度，这可以通过
    MediaQuery.of（context.size.height
    获得
完整示例：

classs MyWidget扩展了无状态widget{
@凌驾
小部件构建（构建上下文）{
返回刷新指示器(
onRefresh:（）{}，
子：SingleChildScrollView(
物理：AlwaysScrollableScrollPhysics（），
子：容器(
儿童：中心(
child:Text（'Hello World'），
),
高度：MediaQuery.of（context）.size.height，
),
),
);
}
}
所以我想在一个空列表中显示一个占位符：

          RefreshIndicator(
            child: Stack(
              children: <Widget>[
                Center(
                  child: Text("The list is empty"),
                ),
                ListView()
              ],
            ),
            onRefresh: () {},
          )

刷新指示器(
子：堆栈(
儿童：[
居中(
子项：文本（“列表为空”），
),
ListView（）
],
),
onRefresh:（）{}，
)
更灵活的解决方案是将可滚动的空/错误状态小部件放入LayoutBuilder

LayoutBuilder(
  builder: (context, constraints) => SingleChildScrollView(
    physics: AlwaysScrollableScrollPhysics(),
    child: SizedBox(
      height: constraints.maxHeight,
      child: ErrorState(
          subtitle: (snapshot.data as ErrorStateful).errorMessage),
    ),
  ),
);
其他大多数答案都是可行的，但它们都有一些缺点。使用
SingleChildScrollView
而不调整高度将导致“滚动发光效果”不在页面底部。将高度设置为当前视图的最大高度（通过使用
MediaQuery
或
LayoutBuilder
）可以解决此问题，但当内容的高度大于可用空间的高度时，会出现渲染溢出

最后，以下解决方案对我来说非常有效，没有任何问题：

LayoutBuilder(
生成器：（上下文、约束）=>RefreshIndicator(
onRefresh:\u refresh，
子：SingleChildScrollView(
物理：AlwaysScrollableScrollPhysics（），
子：约束框(
约束：BoxConstraints(
最小高度：constraints.maxHeight
),
子：文本（“您的小部件”）
)
)
),
)
在列表视图.builder中使用物理：AlwaysScrollableScrollPhysics（）

例如：

RefreshIndicator(
   onRefresh: () => _onRefresh(),
   child: Center(
            child: ListView.builder(
                     physics: AlwaysScrollableScrollPhysics(),
                      controller: _scrollController,
                      itemCount: 4,
                      addAutomaticKeepAlives: true,
                      itemBuilder: (BuildContext context, int position) {
                            return Text("Hello $position");
                          }
              ),
      ),
)
作为Gustavo答案的补充，您可以使用约束以这种方式定义SingleChildScrollView的最小大小

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: () {},
      child: ConstrainedBox(
        constraints: BoxConstraints(
          minHeight: MediaQuery.of(context).size.height,
        ),
        child: SingleChildScrollView(
          physics: AlwaysScrollableScrollPhysics(),
          child: Center(
            child: Text('Hello World'),
          ),
        ),
      ),
    );
  }
}

推荐使用<代码> AlWAsScLabLabelReloStices（）/<代码> <代码>刷新指示符< /代码>，因为如果<代码>可滚动的< /代码>可能没有足够的内容来过卷，请考虑将其<代码>物理< /COD>属性设置为<代码> AlWAsScLabLabelSelpDeals

不必创建自己的子类，
parent
可以用于组合不同类型的
ScrollPhysics
对象以获得所需的滚动物理。例如：

ListView(
  physics: const AlwaysScrollableScrollPhysics(),
  children: ...
)

注意：一个
刷新指示器
只能与垂直滚动视图一起使用。

您可以将
自定义滚动视图
仅与一个子
SliverFill剩余
一起使用，作为不显示数据小部件的示例：

CustomScrollView(
    slivers: [
    SliverFillRemaining(
        child: Center(
        child: Text(
            AppLocalizations.of(context).noData,
        ),
        ),
    )
    ],
)
这不是一个真正的解决办法，这正是OP想要避免的。一种解决方法是添加一个拖动手势，从顶部引入一个刷新指示器，如果释放距离拖动开始点大约有一些像素，则触发一个刷新，并使用您想要的刷新方法。但是对于listview上面需要用户点击按钮的小部件来说，它不起作用。你是否只复制别人的答案并作为你的答案发布？这是一个例子，你没有做什么特别的事。从现在开始，我会关注你的答案表。是的，我知道，但我认为我没有抄袭，但我想了更多，然后我得到了相关的东西，然后我试图解释这个解决方案。然而，如果你这么认为，那么我准备删除这样的答案。如果你有一些小的东西要添加在一个答案中，那么请编辑他们的帖子并添加你的发言。发布相同的答案没有任何好处，除非您指定一些警告。我希望你不介意。谢谢你，祝你今天愉快！如果不知道它是如何工作的，我们就无法理解它，所以我对它进行研究并获取信息，然后给出一个详细的答案。但现在我明白你的意思了，现在我会小心的，谢谢你提醒我！我理解，但与其解释一个已经写好的答案，不如写一个唯一的答案：）有点相关，我在小部件树的某个地方有一个listview.builder，我只需要使用physics AlwaysScrollableScrollPhysics（）和上面容器中的媒体查询高度相同。如果我想在不使用ListView的情况下滚动视图，该怎么办？请告诉我！我有一个未来的建设者作为子刷新指标，这是可滚动的