在没有 ListView 等的情况下刷新 Flutter 中的小部件或页面

Posted 2023-02-23

【中文标题】在没有 ListView 等的情况下刷新 Flutter 中的小部件或页面

【英文标题】：Refresh widget or page in Flutter without ListView et al

【发布时间】：2019-11-21 18:42:10

【问题描述】：

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

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

但如果我想刷新并想使用RefreshIndicator 的刷新动画而不使用ListView、GridView 或任何其他可滚动小部件，我该怎么做？

【问题讨论】：

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

【参考方案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 */,
      ),
    );