Flutter下拉刷新插件ptr的使用

Flutter下拉刷新插件ptr的使用

🚧 构建中 🚧

在Flutter中，ptr 插件提供了强大的下拉刷新功能。下面是一个完整的示例，演示如何使用 ptr 插件来实现下拉刷新。

示例代码

import 'package:flutter/material.dart';
import 'package:ptr/ptr.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RefreshDemo(),
    );
  }
}

class RefreshDemo extends StatefulWidget {
  @override
  _RefreshDemoState createState() => _RefreshDemoState();
}

class _RefreshDemoState extends State<RefreshDemo> {

  List<String> items = List.generate(20, (index) => "Item $index");

  Future<void> onRefresh() async {
    // 模拟网络请求
    await Future.delayed(Duration(seconds: 2));
    
    // 更新数据源
    setState(() {
      items = List.generate(20, (index) => "New Item $index");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PTR 下拉刷新'),
      ),
      body: PtrIndicator(
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
        onRefresh: onRefresh,
      ),
    );
  }
}

在这个示例中，我们创建了一个包含20个项目的列表，并使用 PtrIndicator 封装了 ListView。当用户下拉时，会触发 onRefresh 方法。该方法模拟了一个耗时2秒的网络请求，然后更新数据源并重新渲染列表。

代码解析

  1. 导入必要的库

    import 'package:flutter/material.dart';
import 'package:ptr/ptr.dart';

  2. 定义主应用

    void main() {
  runApp(MyApp());
}

  3. 定义 MyApp 类

    class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RefreshDemo(),
    );
  }
}

  4. 定义 RefreshDemo 类

    class RefreshDemo extends StatefulWidget {
  @override
  _RefreshDemoState createState() => _RefreshDemoState();
}

  5. 定义 _RefreshDemoState 类

    class _RefreshDemoState extends State<RefreshDemo> {
  List<String> items = List.generate(20, (index) => "Item $index");

  Future<void> onRefresh() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      items = List.generate(20, (index) => "New Item $index");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PTR 下拉刷新'),
      ),
      body: PtrIndicator(
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
        onRefresh: onRefresh,
      ),
    );
  }
}

更多关于Flutter下拉刷新插件ptr的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter下拉刷新插件ptr的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，pull_to_refresh 是一个常用的下拉刷新和上拉加载更多的插件。它支持自定义刷新样式和加载更多样式，使用起来非常灵活。下面是一个简单的使用示例，帮助你快速上手。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 pull_to_refresh 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  pull_to_refresh: ^2.0.0

然后运行 flutter pub get 来安装依赖。

2. 基本使用

import 'package:flutter/material.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

class RefreshExample extends StatefulWidget {
  [@override](/user/override)
  _RefreshExampleState createState() => _RefreshExampleState();
}

class _RefreshExampleState extends State<RefreshExample> {
  RefreshController _refreshController = RefreshController(initialRefresh: false);

  List<String> items = ["Item 1", "Item 2", "Item 3"];

  void _onRefresh() async {
    // 模拟网络请求
    await Future.delayed(Duration(milliseconds: 1000));
    items.clear();
    items.addAll(["Refreshed Item 1", "Refreshed Item 2", "Refreshed Item 3"]);
    setState(() {});
    _refreshController.refreshCompleted();
  }

  void _onLoading() async {
    // 模拟网络请求
    await Future.delayed(Duration(milliseconds: 1000));
    items.add("New Item ${items.length + 1}");
    setState(() {});
    _refreshController.loadComplete();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Pull to Refresh Example"),
      ),
      body: SmartRefresher(
        enablePullDown: true,
        enablePullUp: true,
        header: ClassicHeader(
          idleText: "Pull down to refresh",
          releaseText: "Release to refresh",
          refreshingText: "Refreshing...",
          completeText: "Refresh complete",
        ),
        footer: ClassicFooter(
          idleText: "Pull up to load more",
          loadingText: "Loading...",
          noDataText: "No more data",
        ),
        controller: _refreshController,
        onRefresh: _onRefresh,
        onLoading: _onLoading,
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: RefreshExample(),
  ));
}

3. 代码解析

  • RefreshController: 用于控制刷新和加载更多的状态。你可以通过它来控制刷新完成、加载完成等操作。

  • SmartRefresher: 这是 pull_to_refresh 的核心组件，包装了 ListView 或其他滚动组件，使其支持下拉刷新和上拉加载更多。

  • ClassicHeader: 默认的下拉刷新头部，你可以自定义文本或使用其他样式。

  • ClassicFooter: 默认的上拉加载更多底部，同样可以自定义文本或使用其他样式。

  • _onRefresh: 当下拉刷新时触发的回调函数，通常在这里执行数据刷新操作。

  • _onLoading: 当上拉加载更多时触发的回调函数，通常在这里执行数据加载操作。

4. 自定义样式

你可以通过继承 Header 或 Footer 来创建自定义的刷新和加载更多样式。例如：

class CustomHeader extends RefreshIndicator {
  [@override](/user/override)
  Widget build(BuildContext context, RefreshStatus? mode) {
    return Container(
      height: 60.0,
      child: Center(
        child: Text(
          mode == RefreshStatus.refreshing ? "Refreshing..." : "Pull to refresh",
          style: TextStyle(color: Colors.blue),
        ),
      ),
    );
  }
}
回到顶部