Flutter中下拉刷新

2024-04-05

我的仪表板代码如下所示, 这里我在 getReport 方法中做 get req ,我添加了RefreshIndicator在代码中,当在容器内下拉时应该进行刷新,我正在调用我的 getData(),但我没有得到刷新的内容,我在下面添加我的代码,如果我在任何地方犯了错误,请告诉我。

在我的dashboard.dart下面

class Window extends StatefulWidget {
  @override
  _WindowState createState() => _WindowState();
}

class _WindowState extends State<Window> {
  Future reportList;    
  @override
  void initState() {
    super.initState();
    reportList = getReport();
  }    

  Future<void> getReport() async {
    http.Response response =
        await http.get(reportsListURL, headers: {"token": "$token"});
    switch (response.statusCode) {
      case 200: 
        String reportList = response.body;
        var collection = json.decode(reportList);
        return collection;

      case 403:
          break;

      case 401:
        return null;

      default:
        return 1;
    }
  }

  getRefreshScaffold() {
    return Center(
      child: RaisedButton(
        onPressed: () {
          setState(() {
            reportList = getReport();
          });
        },
        child: Text('Refresh, Network issues.'),
      ),
    );
  }

  getDashBody(var data) {
    double maxHeight = MediaQuery.of(context).size.height;
    return Column(
      children: <Widget>[
        Container(
          height: maxHeight - 800,
        ),
        Container(
          margin: new EdgeInsets.all(0.0),
          height: maxHeight - 188,
          child: new Center(
          child: new RefreshIndicator(          //here I am adding the RefreshIndicator
          onRefresh:getReport,                  //and calling the getReport() which hits the get api
          child: createList(context, data),
          ),),
        ),
      ],
    );
  }

  Widget createList(BuildContext context, var data) {
    Widget _listView = ListView.builder(
      itemCount: data.length,
      itemBuilder: (context, count) {
        return createData(context, count, data);
      },
    );
    return _listView;
  }

  createData(BuildContext context, int count, var data) {
    var metrics = data["statistic_cards"].map<Widget>((cardInfo) {
      var cardColor = getColorFromHexString(cardInfo["color"]);
      if (cardInfo["progress_bar"] != null && cardInfo["progress_bar"]) {
        return buildRadialProgressBar(
          context: context,
          progressPercent: cardInfo["percentage"],
          color: cardColor,
          count: cardInfo["value"],
          title: cardInfo["title"],
        );
      } else {
        return buildSubscriberTile(context, cardInfo, cardColor);
      }
    }).toList();

    var rowMetrics = new List<Widget>();
    for (int i = 0; i < metrics.length; i += 2) {
      if (i + 2 < metrics.length)
        rowMetrics.add(Row(children: metrics.sublist(i, i + 2)));
      else
        rowMetrics.add(Row(children: [metrics[metrics.length - 1], Spacer()]));
    }
    return SingleChildScrollView(
      child: LimitedBox(
        //  maxHeight: MediaQuery.of(context).size.height / 1.30,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: rowMetrics,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: reportList,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.none:
          case ConnectionState.waiting:
          case ConnectionState.active:
            return Center(
              child: CircularProgressIndicator(),
            );
          case ConnectionState.done:
            var data = snapshot.data;
            if (snapshot.hasData && !snapshot.hasError) {
              return getDashBody(data);
            } else if (data == null) {
              return Center(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Text("Timeout! Log back in to continue"),
                    Padding(
                      padding: EdgeInsets.all(25.0),
                    ),
                    RaisedButton(
                      onPressed: () {
                        setState(() {
                          token = null;
                        });
                        Navigator.of(context).pushReplacement(
                          CupertinoPageRoute(
                              builder: (BuildContext context) => LoginPage()),
                        );
                      },
                      child: Text('Login Again!'),
                    ),
                  ],
                ),
              );
            } else {
              getRefreshScaffold();
            }
        }
      },
    );
  }
}

基本示例

下面是 StatefulWidget 的 State 类,其中:

  • a ListView被包裹在一个RefreshIndicator
  • numbersList状态变量是其数据源
  • onRefresh calls _pullRefresh更新数据和ListView的功能
  • _pullRefresh是一个异步函数,不返回任何内容(aFuture<void>)
  • when _pullRefresh的长时间运行的数据请求完成,numbersList成员/状态变量在a中更新setState()呼吁重建ListView显示新数据
import 'package:flutter/material.dart';
import 'dart:math';

class PullRefreshPage extends StatefulWidget {
  const PullRefreshPage();

  @override
  State<PullRefreshPage> createState() => _PullRefreshPageState();
}

class _PullRefreshPageState extends State<PullRefreshPage> {
  List<String> numbersList = NumberGenerator().numbers;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RefreshIndicator(
        onRefresh: _pullRefresh,
        child: ListView.builder(
          itemCount: numbersList.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(numbersList[index]),
            );
          },),
      ),
    );
  }

  Future<void> _pullRefresh() async {
    List<String> freshNumbers = await NumberGenerator().slowNumbers();
    setState(() {
      numbersList = freshNumbers;
    });
    // why use freshNumbers var? https://stackoverflow.com/a/52992836/2301224
  }
}

class NumberGenerator {
  Future<List<String>> slowNumbers() async {
    return Future.delayed(const Duration(milliseconds: 1000), () => numbers,);
  }

  List<String> get numbers => List.generate(5, (index) => number);


  String get number => Random().nextInt(99999).toString();
}

Notes

  • 如果你的异步onRefresh功能完成得非常快,您可能需要添加一个await Future.delayed(Duration(seconds: 2));之后,只是让用户体验更加愉快。
  • 这为用户提供了完成滑动/下拉手势的时间,以及刷新指示器渲染/动画/旋转的时间,指示数据已被获取。

FutureBuilder 示例

这是上面的另一个版本State<PullRefreshPage>使用 FutureBuilder 的类,这在从数据库或 HTTP 源获取数据时很常见:

class _PullRefreshPageState extends State<PullRefreshPage> {
  late Future<List<String>> futureNumbersList;

  @override
  void initState() {
    super.initState();
    futureNumbersList = NumberGenerator().slowNumbers();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<String>>(
        future: futureNumbersList,
        builder: (context, snapshot) {
          return RefreshIndicator(
            child: _listView(snapshot),
            onRefresh: _pullRefresh,
          );
        },
      ),
    );
  }

  Widget _listView(AsyncSnapshot snapshot) {
    if (snapshot.hasData) {
      return ListView.builder(
        itemCount: snapshot.data.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(snapshot.data[index]),
          );
        },);
    }
    else {
      return Center(
        child: Text('Loading data...'),
      );
    }
  }

  Future<void> _pullRefresh() async {
    List<String> freshNumbers = await NumberGenerator().slowNumbers();
    setState(() {
      futureNumbersList = Future.value(freshNumbers);
    });
  }
}

Notes

  • slowNumbers()功能与中相同基本示例上面,但是数据被包装在Future.value() since FutureBuilder期望一个Future, but setState() should not等待异步数据
  • according to Rémi, Collin & other Dart/Flutter demigods it's good practice to update Stateful Widget member variables inside setState() (futureNumbersList in FutureBuilder example & numbersList in Basic example), after its long running async data fetch functions have completed.
    • see https://stackoverflow.com/a/52992836/2301224 https://stackoverflow.com/a/52992836/2301224
  • 如果你尝试设置 setStateasync,你会得到一个例外
  • 更新外部的成员变量setState并有一个空的setState关闭,将来可能会导致拍手/代码分析警告
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter中下拉刷新 的相关文章

随机推荐

  • 如何在 echo 调用中运行函数

    这是一个快速但简单的问题 我今天过得很糟糕 不知道该怎么做 我需要做的是这个 我正在检查 url 中的 PMD 如果是这样 请回显
  • 使用curl上传本地目录中的所有文件

    我想上传一个目录中的所有文件 并且我知道如何使用curl上传一个文件 如下所示 curl T local xxx suffix u xxx psw ftp 192 168 1 158 public demon test xxx suffix
  • 有没有一种方法可以编辑符号链接而不先删除它? [复制]

    这个问题在这里已经有答案了 所以我创建了一个符号链接 https en wikipedia org wiki Symbolic link ln s location to link linkname 现在我想更改符号链接链接到的位置 我怎么
  • 如何在打字稿中将 Observable 中存储的值转换为字符串?

    您好 我是 Angular 和 TypeScript 的新手 我需要一个值Observable在字符串的格式中 如何做到这一点 BmxComponent 文件 export class BmxComponent asyncString th
  • 组件加载时如何设置角度垫选择值?

    我使用了有角的材料 角度 材料 7 1 0 mat select box 然后我使用表单控件而不是 ng model 现在的问题是我无法在组件加载时设置值 我需要将第一个值设置为列表中的 mat select box 我尝试过 但我做不到
  • Gradle 不包括 FXML 和图像

    我一直在寻找将 FXML 和图像包含在build gradle以便将它们构建到罐子中 我有看here https stackoverflow com questions 21128652 location is required in ja
  • 比较数据网格中同一行的两个单元格

    使用 C NET 4 5 MS Visual Studio 2012 WPF 你好 刚刚让这段代码终于起作用了 它基本上是通过数据网格进行迭代来进行行的 请注意 他可能会冒犯所有 WPF 奇才 public IEnumerable
  • 如何下载 Telegram 群组的聊天记录?

    我想下载 Telegram 公共群组中发布的聊天记录 所有消息 我怎样才能用Python做到这一点 我在API中找到了这个方法https core telegram org method messages getHistory https
  • 使用 ssh-keygen 创建 JSch 接受的 SSH 私钥 [重复]

    这个问题在这里已经有答案了 不是直接的编程问题 但有某种相关性 JSch Java SSH 库 似乎不允许 macOS 10 14 使用以下命令创建私钥 ssh keygen t rsa b 4096 我应该使用什么命令来创建具有这种格式的
  • 需要一个支持自动布局的可视化java库

    我需要一个用于可视化的 java 图形库 我可以将其合并到我自己的应用程序中 我发现 jgraph 非常适合可视化 但需要明确定位节点 有没有支持自动布局的开源java图形库 任何建议都会对我非常有帮助 有许多软件包可以做到这一点 如果你习
  • 如何在 Haskell 中获取 Maybe 的值

    我对 Haskell 比较陌生 并开始阅读 Real World Haskell 我刚刚偶然发现了 Maybe 类型 并且有一个关于如何从 a 接收实际值的问题Just 1例如 我编写了以下代码 combine a b c eliminat
  • 使用 npm 安装 Angular-cli 时出错

    当我尝试使用 npm 安装 Angular cli 时 出现错误 代码为 ETIMEDOUT 我尝试删除代理 代理和 HTTP 代理 尝试在管理模式下运行 cmd 更改 Nodejs 目标的路径 npm ERR code ETIMEDOUT
  • document.documentElement.scrollTop 返回值在 Chrome 中有所不同

    我正在尝试根据 处理一些代码document documentElement scrollTop 价值 它返回 348 在 FF 和 IE 中 但在 Chrome 中它返回 0 我需要做些什么来克服这个问题吗 FF gt gt gt doc
  • 具有 Visual Studio 编辑器功能的独立文本编辑器

    有人知道任何具有 Visual Studio 编辑器功能的文本编辑器吗 具体来说 我正在寻找以下功能 CTRL C 行中任意位置 未选择任何文本 gt 复制整行 在线任意位置按 CTRL X 或 SHIFT DEL 未选择任何文本 gt 剪
  • Perl 逐行读取

    我有一个简单的 Perl 脚本来逐行读取文件 代码如下 我想显示两行并打破循环 但这不起作用 错误在哪里 file SnPmaster txt open INFO file or die Could not open file count
  • 将ArrayList数据传递到android中的SOAP Web服务

    您好 我需要将数组列表数据传递到soap web 服务中 到目前为止 我有以下代码 public class ResultActivity extends Activity public final String NAMESPACE pub
  • 在 iOS 上发送 HTTP POST 请求

    我正在尝试使用我正在开发的 iOS 应用程序发送 HTTP Post 但推送从未到达服务器 尽管我确实收到了代码 200 作为响应 来自 urlconnection 我从未收到服务器的响应 服务器也没有检测到我的帖子 服务器确实检测到来自
  • 为什么fork后关闭文件描述符会影响子进程?

    我想通过单击按钮在linux中运行程序 因此我编写了一个函数execute void execute const char program call const char param pid t child vfork if child 0
  • 对灰度 NSImage(或 CIImage)进行着色

    我有一个灰度图像 我想用它来绘制 Cocoa 控件 图像具有不同的灰度级别 在最暗的地方 我希望它绘制最暗的指定色调 我希望它在源图像是白色的地方是透明的 基本上 我想重现在 iPhone 上的 UINavigationBar 中看到的ti
  • Flutter中下拉刷新

    我的仪表板代码如下所示 这里我在 getReport 方法中做 get req 我添加了RefreshIndicator在代码中 当在容器内下拉时应该进行刷新 我正在调用我的 getData 但我没有得到刷新的内容 我在下面添加我的代码 如