我爱模板网 > 建站教程 > dart >  dart笔记3:下拉刷新,上拉加载正文

dart笔记3:下拉刷新,上拉加载

dart笔记3:flutter的下拉刷新,上拉加载
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

List<String> cityNames = [
  '北京',
  '上海',
  '广东',
  '深圳',
  '南京',
  '合肥',
  '武汉',
  '拉萨',
  '天津',
  '沈阳'
];

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ScrollController _scrollController = ScrollController();
  final title = '高级功能列表下拉刷新与上拉加载';

  @override
  void initState() {
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        _loadData();
      }
    });
    super.initState();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: RefreshIndicator(
            child: ListView(
              controller: _scrollController,
              children: _buildList(),
            ),
            onRefresh: _handleRefresh),
      ),
    );
  }

  _loadData() async {
    await Future.delayed(Duration(milliseconds: 200));
    setState(() {
      //复制数组
      List<String> list = List<String>.from(cityNames);
      list.addAll(cityNames);
      cityNames = list;
    });
  }

  Future<Null> _handleRefresh() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      cityNames = cityNames.reversed.toList();
    });
    return null;
  }

  List<Widget> _buildList() {
    return cityNames.map((city) => _item(city)).toList();
  }

  Widget _item(city) {
    return Container(
      height: 80,
      margin: EdgeInsets.only(bottom: 5),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.amber),
      child: Text(
        city,
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    );
  }
}



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:dart笔记2:顶部tabbar 下一篇:dart笔记4:flutter折叠菜单
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢