Flutter之ListView 嵌套不同的Item

效果

實現代碼如下

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) {
      print(result);
      var indexData = json.decode(result);
      setState(() {
        _data = IndexdataBean.fromJson(indexData);
      });
    });
  }
}

home_list_item.dart

import 'package:flutter/material.dart';
import 'package:flutterwncq/models/index_data_bean.dart';
import 'package:flutterwncq/page/chewie_page.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:marquee_flutter/marquee_flutter.dart';

import 'banner_widget.dart';

class HomeListItem extends StatelessWidget {
  final IndexDatas indexDatas;

  HomeListItem({this.indexDatas});

  List<BannerItem> bannerList = [];

  @override
  Widget build(BuildContext context) {
    //根據不同的type加載不同的item
    switch (indexDatas.type) {
      case 2:
        return CachedNetworkImage(
          height: MediaQuery.of(context).size.width * indexDatas.aspectRatio,
          imageUrl: indexDatas.picUrl,
          placeholder: (context, url) => Center(
            child: CircularProgressIndicator(),
          ),
          errorWidget: (context, url, error) => Icon(Icons.error),
          fit: BoxFit.cover,
        );

      /*return FadeInImage.memoryNetwork(
          placeholder: kTransparentImage,
          image: indexDatas.picUrl,
          height: MediaQuery.of(context).size.width * indexDatas.aspectRatio,
          fit: BoxFit.cover,
        );*/
      /*return Image.network(
          indexDatas.picUrl,
          height: MediaQuery.of(context).size.width * indexDatas.aspectRatio,
          fit: BoxFit.cover,
        );*/
      /*return Container(
          color: Colors.green,
          height: MediaQuery.of(context).size.width * indexDatas.aspectRatio,
        );*/
      case 4:
        return Container(
          color: Color(0xff0b0b0b),
          height: 50.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SizedBox(
                width: 10.0,
              ),
              Image.asset(
                'assets/images/icon_notice.webp',
                width: 20.0,
                height: 20.0,
              ),
              SizedBox(
                width: 5.0,
              ),
              Expanded(
                //權重
                child: MarqueeWidget(
                  text: indexDatas.title,
                  textStyle: TextStyle(
                    color: Color(0xffe2b866),
                    fontSize: 10.0,
                    fontWeight: FontWeight.normal,
                    decoration: TextDecoration.none,
                  ),
                  scrollAxis: Axis.horizontal,
                ),
                /*Text(
                  indexDatas.title,
                  maxLines: 1,
                  style: TextStyle(color: Color(0xffe2b866),fontSize: 12.0,fontWeight: FontWeight.normal,decoration: TextDecoration.none,),
                  overflow: TextOverflow.ellipsis,
                ),*/
                flex: 1, //設置比例參數
              ),
              SizedBox(
                width: 5.0,
              ),
              Image.asset(
                'assets/images/icon_nextdolden.png',
                width: 15.0,
                height: 15.0,
              ),
              SizedBox(
                width: 8.0,
              ),
            ],
          ),
        );
      case 5:
        return GestureDetector(
          onTap: () {
            //Navigator.of(context).push(MaterialPageRoute(builder: (context)=>VideoPlayerPage(indexDatas.objUrl)));
            Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => ChewiePage(
                      indexDatas.objUrl,
                      picUrl: indexDatas.picUrl,
                    )));
          },
          child: Stack(
            children: <Widget>[
              CachedNetworkImage(
                width: MediaQuery.of(context).size.width,
                height:
                    MediaQuery.of(context).size.width * indexDatas.aspectRatio,
                imageUrl: indexDatas.picUrl,
                placeholder: (context, url) => Center(
                  child: CircularProgressIndicator(),
                ),
                errorWidget: (context, url, error) => Icon(Icons.error),
                fit: BoxFit.cover,
              ),
              Image.asset(
                'assets/images/player.png',
                width: 45,
                height: 45.0,
              )
            ],
            alignment: AlignmentDirectional.center,
          ),
        );
      case 6:
        if (bannerList.length <= 0) {
          for (var o in indexDatas.contentDatas) {
            bannerList.add(BannerItem(itemImagePath: o.picUrl));
          }
        }
        return BannerWidget(
          MediaQuery.of(context).size.width * indexDatas.aspectRatio,
          bannerList,
          build: (index, bannerItem) {
            return Scaffold(
              body: CachedNetworkImage(
                height:
                    MediaQuery.of(context).size.width * indexDatas.aspectRatio,
                imageUrl: bannerItem.itemImagePath,
                placeholder: (context, url) => Center(
                  child: CircularProgressIndicator(),
                ),
                errorWidget: (context, url, error) => Icon(Icons.error),
                fit: BoxFit.cover,
              ),
              /*FadeInImage.memoryNetwork(
                placeholder: kTransparentImage,
                image: bannerItem.itemImagePath,
                width: MediaQuery.of(context).size.width,
                height:
                    MediaQuery.of(context).size.width * indexDatas.aspectRatio,
                fit: BoxFit.cover,
              ),*/
              /*Image.network(
                bannerItem.itemImagePath,
                width: MediaQuery.of(context).size.width,
                height:MediaQuery.of(context).size.width * indexDatas.aspectRatio,
                fit: BoxFit.cover,
              ),*/
            );
//            return Image.network(
//              bannerItem.itemImagePath,
//              width: MediaQuery.of(context).size.width,
//              height:MediaQuery.of(context).size.width * indexDatas.aspectRatio,
//            );
          },
          bannerPress: (pos, item) {
            print('第$pos點擊了');
          },
        );
      case 8:
        return Container(
          color: Color(0xff000000),
          height: MediaQuery.of(context).size.width * 0.267,
          child: Row(
            children: <Widget>[
              Expanded(
                child: CachedNetworkImage(
                  imageUrl: indexDatas.contentDatas[0].picUrl,
                  placeholder: (context, url) => Center(
                    child: CircularProgressIndicator(),
                  ),
                  errorWidget: (context, url, error) => Icon(Icons.error),
                  fit: BoxFit.cover,
                ),
                flex: 1,
              ),
              Expanded(
                child: CachedNetworkImage(
                  imageUrl: indexDatas.contentDatas[1].picUrl,
                  placeholder: (context, url) => Center(
                    child: CircularProgressIndicator(),
                  ),
                  errorWidget: (context, url, error) => Icon(Icons.error),
                  fit: BoxFit.cover,
                ),
                flex: 1,
              ),
              Expanded(
                child: CachedNetworkImage(
                  imageUrl: indexDatas.contentDatas[2].picUrl,
                  placeholder: (context, url) => Center(
                    child: CircularProgressIndicator(),
                  ),
                  errorWidget: (context, url, error) => Icon(Icons.error),
                  fit: BoxFit.cover,
                ),
                flex: 1,
              ),
            ],
          ),
        );
    }
  }
}