zoukankan      html  css  js  c++  java
  • Flutter: 下拉刷新,上拉加载更多

    import 'package:flutter/material.dart';
    import 'package:english_words/english_words.dart';
    
    void main() => runApp(Myapp());
    
    class Myapp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(home: MyHome());
      }
    }
    
    class MyHome extends StatefulWidget {
      @override
      _MyHomeState createState() => _MyHomeState();
    }
    
    class _MyHomeState extends State<MyHome> {
      final _suggestions = <WordPair>[];
      bool _loading = true;
      ScrollController _strollCtrl = ScrollController();
    
      Future<void> _getData() async {
        await Future.delayed(Duration(seconds: 1));
        setState(() {
          _suggestions.addAll(generateWordPairs().take(15));
          _loading = false;
        });
      }
    
      @override
      void initState() {
        _getData();
        _strollCtrl.addListener(() {
          if (_strollCtrl.position.pixels == _strollCtrl.position.maxScrollExtent) {
            if (!_loading) {
              setState(() {
                _loading = true;
              });
            }
            _getData();
          }
        });
        super.initState();
      }
    
      @override
      void dispose() {
        _strollCtrl.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('ListView'),
          ),
          body: Stack(
            children: <Widget>[
              _loading
                  ? Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          RefreshProgressIndicator(
                            semanticsLabel: 'loading more..',
                            semanticsValue: 'loading more..',
                          ),
                          Text(
                            '加载中...',
                            style: Theme.of(context).textTheme.title,
                          ),
                        ],
                      ),
                    )
                  : Container(),
              // 下拉加载更多组件
              RefreshIndicator(
                onRefresh: () async {
                  _suggestions.clear();
                  return _getData();
                },
                child: ListView.builder(
                  physics: const AlwaysScrollableScrollPhysics(), // 确保滚动视图始终可滚动
                  controller: _strollCtrl,
                  itemCount: _suggestions.length,
                  itemBuilder: (context, i) {
                    return ListTile(
                      leading: Text('${(i + 1).toString()}'),
                      title: Text('${_suggestions[i].asPascalCase}'),
                      trailing: Icon(Icons.event),
                    );
                  },
                ),
              ),
            ],
          ),
        );
      }
    }
    
  • 相关阅读:
    sql中关于存在就不做操作的代码块
    mysql插入多条数据时间复杂度比较
    oracle in VS or效率
    如何实现分布式数据库
    angularJS操作键值对象(类似java的hashmap)填坑小结
    angularJS 如何读写缓冲
    angularJs自定义服务(实现签名和加密)
    ajax请求技术
    springboot中使用mybatis显示执行sql
    mysql快速生成truncate脚本清空数据库表记录
  • 原文地址:https://www.cnblogs.com/ajanuw/p/10906602.html
Copyright © 2011-2022 走看看