Flutter之ListView 嵌套不同的Item

本文展示了如何在Flutter中使用ListView创建嵌套不同类型的Item。通过`home_page.dart`和`home_list_item.dart`两个关键文件的代码实现,详细解析了ListView的构建过程,实现了展示多样化列表项的效果。
摘要由CSDN通过智能技术生成

效果

实现代码如下

home_page.dart

import 'dart:convert';
import 'dart:ffi';

import 'package:flutter/material.dart';
import 'package:flutterwncq/constants/constants.dart' show AppUrls;
import 'package:flutterwncq/models/index_data_bean.dart';
import 'package:flutterwncq/utils/net_utils.dart';
import 'package:flutterwncq/widgets/error.dart';
import 'package:flutterwncq/widgets/home_list_item.dart';
import 'package:flutterwncq/widgets/loading.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  IndexdataBean _data;
  bool _showLoading = false;
  bool _isFirst = true;

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: _pullToRefresh,
      child: _buildListView(),
    );
  }

  Future<Void> _pullToRefresh() async {
    _indexData();
  }

  _buildListView() {
    if (_data == null|| _showLoading) {
      if(_isFirst || _showLoading) {
        _isFirst = false;
        _showLoading = false;
        _indexData();
      }
      return Loading();//加载中视图
    }

    if(_data.errcode!='200'){
      return Error(
        onRetry: (){
          setState(() {
            _showLoading = true;
          });
        },
      );//加载出错显示的视图
    }

    //成功加载数据 显示界面
    return ListView.separated(
        padding: const EdgeInsets.all(0.0),
        itemBuilder: (context,index){
          return HomeListItem(
            indexDatas: _data.data.indexDatas[index],
          );
        },
        separatorBuilder: (context,index)=>Container(height: 2,),
        itemCount: _data.data.indexDatas.length,
    );
  }

  //网络加载数据
  void _indexData() {
    var params = new Map<String, dynamic>();
    params['pageV
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值