技術標籤：flutter

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:dio/dio.dart';

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

  _NewsPageState createState() => _NewsPageState();
}

class _NewsPageState extends State<NewsPage>
 
 {
  List _list = [];
  int _page = 1;
  bool hasMore = true; //判斷有沒有資料
  ScrollController _scrollController = new ScrollController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this._getData();

    //監聽滾動條事件
    _scrollController.addListener(() {
      print
 
(_scrollController.position.pixels); //獲取滾動條下拉的距離

      print(_scrollController.position.maxScrollExtent); //獲取整個頁面的高度

      if (_scrollController.position.pixels >
          _scrollController.position.maxScrollExtent - 40) {
        this._getData();
      }
    });
  }

  void _getData() async {
    if
 
 (this.hasMore) {
      var apiUrl =
          "http://192.168.1.91/appapi.php?a=getPortalList&catid=20&page=${_page}";

      var response = await Dio().get(apiUrl);
      var res = json.decode(response.data)["result"];   

      setState(() {
        this._list.addAll(res);  //拼接
        this._page++;
      });
      //判斷是否是最後一頁
      if (res.length < 20) {
        setState(() {
          this.hasMore = false;
        });
      }
    }
  }

  //下拉重新整理
  Future<void> _onRefresh() async {
    await Future.delayed(Duration(milliseconds: 2000), () {
      print('請求資料完成');
      _getData();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("新聞列表"),
      ),
      body: this._list.length > 0
          ? RefreshIndicator(
              onRefresh: _onRefresh,
              child: ListView.builder(
                controller: _scrollController,
                itemCount: this._list.length, //20
                itemBuilder: (context, index) {//19                  
                  if (index == this._list.length-1) {   //列表渲染到最後一條的時候加一個圈圈
                    //拉到底
                     return Column(
                      children: <Widget>[
                        ListTile(
                          title: Text("${this._list[index]["title"]}",
                              maxLines: 1),
                        ),
                        Divider(),
                        _getMoreWidget()
                      ],
                    );

                  } else {
                    return Column(
                      children: <Widget>[
                        ListTile(
                          title: Text("${this._list[index]["title"]}",
                              maxLines: 1),
                        ),
                        Divider()
                      ],
                    );
                  }
                },
              ))
          : _getMoreWidget(),
    );
  }

  //載入中的圈圈
  Widget _getMoreWidget() {

    if(hasMore){
      return Center(
        child: Padding(
          padding: EdgeInsets.all(10.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              // Text(
              //   '載入中...',
              //   style: TextStyle(fontSize: 16.0),
              // ),
              Container(
                height: 20,
                width: 20,
                child: CircularProgressIndicator(
                  strokeWidth: 3.0,
                ),
              ),

            ],
          ),
        ),
      );
    }else{
       return Center(
         child: Text("--我是有底線的--"),
       );
    }
  }
}