flutter 开发一个应用 5, tab的bug修正,添加下拉上拉

分支切换到dev_1.1了.

当切换多个tab的时候,会发现,原来的列表又初始化了一次.这个解决也简单,就是使用胶水类.

class _GankJsonListPageState extends State<GankJsonListPage>
    with AutomaticKeepAliveClientMixin {//加上这一句,

重写
@override
bool get wantKeepAlive => true; 
} 

这样就行了.这样做无疑会增加内存的消耗,如果页面比较多.

再将原来的列表项拆分:

Widget buildRow(int i) {
    var beans = gankToday.beans;
    //print('bean i:$i data:$beans');
    if (beans == null) {
      return Text("no items:");
    }
    var bean = beans[i];
    if (bean.images == null || bean.images.length < 1) {
      return GankListNoImageItem(
          bean: bean,
          onPressed: () {
            detail(bean);
          });
    } else {
      return GankListImageItem(
          bean: bean,
          onPressed: () {
            detail(bean);
          });
    }
  }

有图的项:

class GankListImageItem extends StatelessWidget {
  GankListImageItem({Key key, this.bean, this.onPressed}) : super(key: key);
  final GankBean bean;
  final VoidCallback onPressed;

  void detail(GankBean bean) {}

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        onPressed();
      },
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
              padding: EdgeInsets.only(
                  left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
              child: Text("Title:${bean.publishedAt}")),
          Padding(
              padding: EdgeInsets.only(
                  left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
              child: Text("Url:${bean.images[0]}")),
          Padding(
            padding: EdgeInsets.only(left: 10.0, right: 10.0),
            child: Image(
              image: CachedNetworkImageProvider(bean.images[0]),
              //width: album.images.width.toDouble(),
              //height: album.images.height.toDouble(),
              fit: BoxFit.fitWidth,
            ),
          ),
        ],
      ),
    );
  }
}

无图的就不粘贴了,上github看源码就行了.

如果添加进了SmartRefresher,在加载图片时,没有设置图片的高与宽,会出现RenderFlex overflowed异常.

所以,上拉与下拉的列表,就不在这修改了.

建立一个PullWidget.

这里参考了gsy的代码.
class PullWidget extends StatefulWidget {
  PullWidget(
      {Key key,
      this.pullController,
      this.items,
      this.itemBuilder,
      this.onLoadMore,
      this.onRefresh})
      : super(key: key);
  final List items;
  final PullWidgetController pullController;
  final IndexedWidgetBuilder itemBuilder;
  final RefreshCallback onLoadMore;
  final RefreshCallback onRefresh;

  @override
  _PullWidgetState createState() => new _PullWidgetState();
}

class _PullWidgetState extends State<PullWidget> {
  RefreshController _refreshController =
      RefreshController(initialRefresh: false);
  ScrollController _scrollController;

  _PullWidgetState() : super();

  @override
  void initState() {
    super.initState();
    _scrollController = new ScrollController();
    widget.pullController.needLoadMore?.addListener(() {
      _refreshController.loadComplete(); 加载完成,通过它刷新,如果列表项是StatefulWidget ,则无法刷新数据.
    });
    widget.pullController.needRefresh?.addListener(() {
      _refreshController.refreshCompleted();
    });

    ///增加滑动监听
    _scrollController.addListener(() {
      ///判断当前滑动位置是不是到达底部，触发加载更多回调
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        if (widget.pullController.needLoadMore.value) {
          widget.onLoadMore?.call();
        }
      }
    });
  }

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

  void _onRefresh() async {
    // monitor network fetch
    /*await Future.delayed(Duration(milliseconds: 1000));
    // if failed,use refreshFailed()
    _refreshController.refreshCompleted();*/
    widget.pullController.needRefresh.value = false;
    widget.onRefresh?.call();
  }

  void _onLoading() async {
    // monitor network fetch
    /*await Future.delayed(Duration(milliseconds: 1000));
    // if failed,use loadFailed(),if no data return,use LoadNodata()
    widget.items.add((widget.items.length + 1).toString());
    if (mounted) setState(() {});
    _refreshController.loadComplete();*/
    widget.pullController.needLoadMore.value = false;
    widget.onLoadMore?.call();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SmartRefresher(
        enablePullDown: true,
        enablePullUp: true,
        header: MaterialClassicHeader(),
        footer: CustomFooter(
          builder: (BuildContext context, LoadStatus mode) {
            Widget body;
            if (mode == LoadStatus.idle) {
              body = Text("pull up load");
            } else if (mode == LoadStatus.loading) {
              body = CircularProgressIndicator();
            } else if (mode == LoadStatus.failed) {
              body = Text("Load Failed!Click retry!");
            } else {
              body = Text("No more Data");
            }
            return Container(
              height: 55.0,
              child: Center(child: body),
            );
          },
        ),
        controller: _refreshController,
        onRefresh: _onRefresh,
        onLoading: _onLoading,
        child: new ListView.builder(
          ///保持ListView任何情况都能滚动，解决在RefreshIndicator的兼容问题。
          physics: const AlwaysScrollableScrollPhysics(),
          itemBuilder: (context, index) {
            return _getItem(index);
          },

          itemExtent: 100.0,
          itemCount: _getListCount(),
          controller: _scrollController,
        ),
      ),
    );
  }

  int _getListCount() {
    return widget.items.length;
  }

  _getItem(int index) {
    return widget.itemBuilder(context, index);
    //return Card(child: Center(child: Text(items[index])));
  }
}

class PullWidgetController {
  List dataList = new List();

  ValueNotifier<bool> needLoadMore = new ValueNotifier(false);
  ValueNotifier<bool> needRefresh = new ValueNotifier(false);
}

建立一个测试页::

class TestListPage extends StatefulWidget {
  TestListPage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _TestListPageState createState() => new _TestListPageState();
}

class _TestListPageState extends State<TestListPage>
    with AutomaticKeepAliveClientMixin {
  List items = [
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "11",
    "12",
    "13",
    "14",
    "15",
    "16",
    "17",
    "18",
  ];
PullWidgetController _pullController = new PullWidgetController();

  @override
  void initState() {
    super.initState();
    _pullController.dataList = items;
  }

  @override
  bool get wantKeepAlive => true;
  int page = 1;
  bool isLoading = false;
  bool isRefreshing = false;
  bool isLoadMoring = false;

  _lockToAwait() async {
    ///if loading, lock to await
    doDelayed() async {
      await Future.delayed(Duration(seconds: 1)).then((_) async {
        if (isLoading) {
          return await doDelayed();
        } else {
          return null;
        }
      });
    }

    await doDelayed();
  }

  @protected
  Future<Null> handleRefresh() async {
    if (isLoading) {
      if (isRefreshing) {
        return null;
      }
      await _lockToAwait();
    }
    isLoading = true;
    isRefreshing = true;
    page = 1;
    var res = await requestRefresh();
    print("res:$res;");
    if (res != null) {
      resolveRefreshResult(res);
      setState(() {
        _pullController.needRefresh.value =  true;
      });
    }
    isLoading = false;
    isRefreshing = false;
    return null;
  }

  @protected
  resolveRefreshResult(res) {
    if (res != null) {
      _pullController?.dataList?.clear();
      setState(() {
        _pullController?.dataList?.addAll(res);
        //print("resolveRefreshResult:$res;");
      });
    }
  }

  @protected
  Future<Null> onLoadMore() async {
    if (isLoading) {
      if (isLoadMoring) {
        return null;
      }
      await _lockToAwait();
    }
    isLoading = true;
    isLoadMoring = true;
    page++;
    var res = await requestLoadMore();
    if (res != null) {
      setState(() {
        _pullController?.dataList?.addAll(res);
      });
    }
    setState(() {
      _pullController.needLoadMore.value = (res != null);
    });
    isLoading = false;
    isLoadMoring = false;
    return null;
  }

  //下拉刷新数据
  @protected
  requestRefresh() async {
    return [
      "11",
      "12",
      "13",
      "14",
      "15",
      "16",
      "17",
      "18",
    ];
  }

  ///上拉更多请求数据
  @protected
  requestLoadMore() async {
    return [(_pullController.dataList.length + 1).toString()];
  }

  _renderItem(int index) {
    if (_pullController.dataList.length == 0) {
      return null;
    }
    //print("item:${_pullController.dataList[index]}");
    switch (index) {
      case 2:
        return new TestListItem(bean: _pullController.dataList[index], onPressed: () {});
      default:
        return new TestListItem(bean: _pullController.dataList[index], onPressed: () {});
    }
  }

//关键部分,把这个参数传入,这样,pullwidget是可重用的. 外部关心的是加载数据与渲染列表项.
  @override
  Widget build(BuildContext context) {
    return new PullWidget(
      pullController: _pullController,
      items: _pullController.dataList,
      itemBuilder: (BuildContext context, int index) => _renderItem(index),
      onLoadMore: onLoadMore,
      onRefresh: handleRefresh,
    );
  }
}

列表项就是普通的控件

class TestListItem extends StatelessWidget {
  TestListItem({this.bean, this.onPressed}) : super();
  final String bean;
  final VoidCallback onPressed;

  void detail(String bean) {}

  @override
  Widget build(BuildContext context) {
    return Card(child: Center(child: Text(bean)));
  }
}

把这两个 列表放到TabBarPageWidget里面;

_renderPage() {
  return [
    new GankJsonListPage(),
    new TestListPage(),
    new TestListPage(),
    new TestListPage(),
  ];
}

就样,就可以切换tab了.