Flutter之ListView 嵌套不同的Item

最新推荐文章于 2025-10-16 00:15:00 发布

原创

最新推荐文章于 2025-10-16 00:15:00 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

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

效果

实现代码如下

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['pageVersion'] = '2';
    NetUtils.get(AppUrls.INDEXDATA, params).then((result) {