Flutter42.Opensource China New界面(14)

news_list_page.dart下拉刷新和加载更多

import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutterapp2/common/event_bus.dart';
import 'package:flutterapp2/constants/Constants.dart';
import 'package:flutterapp2/utils/data_utils.dart';
import 'package:flutterapp2/utils/net_utils.dart';
import 'package:flutterapp2/widgets/NewsListItem.dart';

import 'login_web_page.dart';

/**
 * 主界面News
 */
class NewsListPage extends StatefulWidget {
  @override
  _NewsListPageState createState() => _NewsListPageState();
}

class _NewsListPageState extends State<NewsListPage> {
  bool isLogin = false;
  int curPage = 1;//页数，加载更多的时候参数会改变
  List newsList;
  ScrollController _controller = ScrollController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //下拉的监听
    _controller.addListener(() {
      var maxScroll = _controller.position.maxScrollExtent;
      var pixels = _controller.position.pixels;
      if (maxScroll == pixels) {
        curPage++;
        getNewsList(true);
      }
    });
    //登录成功
    DataUtils.isLogin().then((isLogin) {
      if (!mounted) return;
      setState(() {
        this.isLogin = isLogin;
      });
    });
    //EventBus监听登录事件
    eventBus.on<LoginEvent>().listen((event) {
      if (!mounted) return;
      setState(() {
        this.isLogin = true;
      });
      //获取新闻列表
      getNewsList(false);
    });
    eventBus.on<LogoutEvent>().listen((event) {
      if (!mounted) return;
      setState(() {
        this.isLogin = false;
      });
    });
  }

  //NEWS_LIST
  getNewsList(bool isLoadMore) async {
    DataUtils.isLogin().then((isLogin) {
      if (isLogin) {
        DataUtils.getAccessToken().then((accessToken) {
          if (accessToken == null || accessToken.length == 0) {
            return;
          }
          Map<String, dynamic> params = Map<String, dynamic>();
          params['access_token'] = accessToken;
          params['catalog'] = 1;
          params['page'] = curPage;
          params['pageSize'] = 10;//每次刷新10条
          params['dataType'] = 'json';

          ///action/openapi/news_list
          NetUtils.get(AppUrls.NEWS_LIST, params).then((data) {
            //{
            //    "newslist": [
            //        {
            //            "id": 26754,
            //            "author": "test33",
            //            "pubDate": "2013-09-17 16:49:50.0",
            //            "title": "asdfa",
            //            "authorid": 253469,
            //            "commentCount": 0,
            //            "type": 4
            //        }
            //    ],
            //    "notice": {
            //        "replyCount": 0,
            //        "msgCount": 0,
            //        "fansCount": 0,
            //        "referCount": 0
            //    }
            //}
            print('Debug NEWS_LIST=====: $data');
            if (data != null && data.isNotEmpty) {
              Map<String, dynamic> map = json.decode(data);
              List _newsList = map['newslist'];
              if (!mounted) return;
              setState(() {
                if (isLoadMore) {
                  //加载更多
                  newsList.addAll(_newsList);
                } else {
                  newsList = _newsList;
                }
              });
            }
          });
        });
      }
    });
  }


  @override
  Widget build(BuildContext context) {
    //没有登录就去登录
    if (!isLogin) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('由于openapi限制，必须登录才能获取资讯！'),
            InkWell(
              onTap: () async {
                final result = await Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => LoginWebPage()));
                if (result != null && result == 'refresh') {
                  //登录成功
                  eventBus.fire(LoginEvent());
                }
              },
              child: Text('去登录'),
            ),
          ],
        ),
      );
    }

    //下拉刷新
    Future<Null> _pullToRefresh() async {
      curPage = 1;
      getNewsList(false);
      return null;
    }

    //下拉刷新的
    return RefreshIndicator(
      onRefresh: _pullToRefresh,
      child: buildListView(),
    );
  }

  Widget buildListView() {
    if (newsList == null) {
      getNewsList(false);
      //返回转圈圈
      return CupertinoActivityIndicator();
    }
    return ListView.builder(
        controller: _controller,
        itemCount: newsList.length,
        itemBuilder: (context, index) {
          return NewsListItem(newsList: newsList[index]);
        });
  }
}

NewsListItem.dart单个条目的布局，点击以后会跳转到详情的信息

import 'package:flutter/material.dart';
import 'package:flutterapp2/pages/news_detail_page.dart';

/**
 * 新闻主界面Item的布局
 */
class NewsListItem extends StatelessWidget {
  final Map<String, dynamic> newsList;
  //构造函数
  NewsListItem({this.newsList});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Navigator.of(context).push(MaterialPageRoute(
            builder: (context) => NewsDetailPage(id: newsList['id'])));
      },
      child: Container(
        margin: const EdgeInsets.only(left: 20.0),
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: Color(0xffaaaaaa),
              width: 1.0,
            ),
          ),
        ),
        padding: const EdgeInsets.only(top: 10.0, bottom: 10.0, right: 20.0),
        child: Column(
          children: <Widget>[
            Text('${newsList['title']}',
              style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
              maxLines: 2,//最多2行
              overflow: TextOverflow.ellipsis,//超出是...
            ),
            SizedBox(height:10.0),
            Row(
              //分布在左右两边
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  '@${newsList['author']} ${newsList['pubDate'].toString().split(' ')[0]}',
                  style: TextStyle(color: Color(0xaaaaaaaa), fontSize: 14.0),
                ),
                Row(
                  children: <Widget>[
                    Icon(Icons.message),
                    Text('${newsList['commentCount']}',
                      style:TextStyle(color: Color(0xaaaaaaaa), fontSize: 14.0),
                    ),
                  ],
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

显示如下：