【问题标题】:Refresh widget or page in Flutter without ListView et al在没有 ListView 等的情况下刷新 Flutter 中的小部件或页面
【发布时间】:2026-01-07 04:15:02
【问题描述】:

我想在没有可滚动内容的情况下刷新我的页面,即没有ListView 等。

当我想使用RefreshIndicator 时,文档说它需要一个scrollable 小部件,例如ListView

但如果我想刷新并想使用RefreshIndicator 的刷新动画而不使用ListViewGridView 或任何其他可滚动小部件,我该怎么做?

【问题讨论】:

  • 添加 SingleChildScrollView 作为小部件的父级,因为您需要一个可滚动的小部件

标签: flutter flutter-animation


【解决方案1】:

你可以直接使用GestureDetector,我已经为你创建了一个示例,但它并不完美,你可以根据自己的需要自定义它,它只会检测你何时从顶部滑动。

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {

  var refresh=false;

  void  refreshData(){
    if(!refresh){
      refresh=true;
      print("Refreshing");
      Future.delayed(Duration(seconds: 4),(){
        refresh =false;
        print("Refreshed");
      });
    }
  }



  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text("Test"),
          centerTitle: true,
        ),
        body: GestureDetector(
          child: Container(
            color: Colors.yellow,
            height: double.infinity,
            width: double.infinity,
            child: Center(child: Text('TURN LIGHTS ON')),
          ),
          onVerticalDragUpdate: (DragUpdateDetails details){
            print("direction ${details.globalPosition.direction}");
            print("distance ${details.globalPosition.distance}");
            print("dy ${details.globalPosition.dy}");
            if(details.globalPosition.direction < 1 && (details.globalPosition.dy >200 && details.globalPosition.dy < 250)){

              refreshData();

            }
          },
        ));
  }
} 

【讨论】:

    【解决方案2】:

    您可以简单地将内容包装在SingleChildScrollView 中,这样您就可以使用RefreshIndicator。为了使下拉刷新交互起作用,您必须使用AlwaysScrollableScrollPhysics,因为如果没有滚动视图,您的内容很可能不会覆盖比可用空间更多的空间:

    RefreshIndicator(
          onRefresh: () async {
            // Handle refresh.
          },
          child: SingleChildScrollView(
            physics: const AlwaysScrollableScrollPhysics(),
            child: /* your content */,
          ),
        );
    

    【讨论】:

      最近更新 更多