如何在颤动中创建加载更多列表视图

Question

我想在列表视图中创建加载更多滚动视图。我的应用程序流程将 youtube 链接存储在 csv 文件中，并从我的应用程序中获取此链接并显示在我的列表视图中。但问题是我不想在应用程序打开时等待太多的加载时间。如果我的 csv 中有很多 youtube 链接。我会花费很多时间。所以，例如我只想显示 5视频处于初始状态，当加载更多时，在我的列表视图中显示更多 5 个视频。我该怎么做。我的代码如下。

import 'package:flutter/material.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';
import 'videolist.dart';
import './models/models.dart';
import 'package:csv/csv.dart' as csv;
import 'package:http/http.dart' as http;

class DisplayVideo extends StatefulWidget {
  String id;
  @override
  DisplayVideo(this.id);
  _DisplayVideoState createState() => _DisplayVideoState();
}

class _DisplayVideoState extends State<DisplayVideo> {
  late YoutubePlayerController _controller ;
  Future<List<YoutubeDetail>> _loadCSV() async {
    Map<String, String> allData = {
      'login': '',
      'password': '',
    };
    final Uri url = Uri.parse(
        'https://raw.githubusercontent.com/JornaldRem/bedtime_story/main/videoId.csv');
    final response = await http.get(url);
    csv.CsvToListConverter converter =
        new csv.CsvToListConverter(eol: '\r\n', fieldDelimiter: ',');
    List<List> listCreated = converter.convert(response.body);
    // the csv file is converted to a 2-Dimensional list
    List<YoutubeDetail> youtubeDetailList = [];
    for (int i = 0; i < listCreated.length; i++) {
      YoutubeDetail temp = YoutubeDetail(
        listCreated[i][0],
        listCreated[i][1],
      );

      youtubeDetailList.add(temp);
    }
    return youtubeDetailList;
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = YoutubePlayerController(
      initialVideoId: widget.id,
      flags: YoutubePlayerFlags(
        autoPlay: true,
        mute: false,
      ),
    );
  }
  @override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(
          elevation: 0,
          title: Text('Title'),
          toolbarHeight: 60,
          backgroundColor: const Color(0xFF006666),
        ),
        body: Column(
          children: [
            Container(
              child: YoutubePlayer(
                controller: _controller,
                liveUIColor: Colors.amber,
              ),
            ),
            Expanded(
              child: Container(
                child: FutureBuilder(
                    future: _loadCSV(),
                    builder: (BuildContext context,
                        AsyncSnapshot<List<YoutubeDetail>> snapshot) {
                      if (snapshot.hasData) {
                        List<YoutubeDetail> videoDetail = snapshot.data!;
                        return ListView.builder(
                            shrinkWrap: true,
                            scrollDirection: Axis.vertical,
                            itemCount: videoDetail.length,
                            itemBuilder: (_, int index) {
                              if (index > 0) {
                                return GestureDetector(
                                  child: Container(
                                    height: 80,
                                    child: DisplayVideoView(
                                        videoDetail[index].url,
                                        videoDetail[index].title),
                                  ),
                                  onTap: (){
                                    String url = videoDetail[index].url;
                                    String id = url.substring(url.length - 11);
                                    print("HEllo");
                                    _controller.load(id);
                                    // DisplayVideo(id);
                                  }
                                );
                              } else {
                                return Container();
                              }
                            });
                      } else {
                        return Container();
                      }
                    }),
              ),
            ),
          ],
        ));
  }
}

class DisplayVideoView extends StatelessWidget {
  String videopath;
  String title;
  DisplayVideoView(this.videopath, this.title);
  @override
  Widget build(BuildContext context) {
    String url = videopath;
    String id = url.substring(url.length - 11);
    // TODO: implement build
    return Card(
      clipBehavior: Clip.antiAlias,
      child: Container(
        height: 150,
        padding: const EdgeInsets.all(0),
        child: Row(children: [
          Expanded(
            flex: 6,
            child: Container(
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: NetworkImage(
                          'https://img.youtube.com/vi/$id/mqdefault.jpg'),
                      fit: BoxFit.fill)),
            ),
          ),
          Spacer(
            flex: 1,
          ),
          Expanded(
            flex: 14,
            child: Container(
              padding: const EdgeInsets.only(top: 2),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(title,
                      style: TextStyle(
                          fontSize: 16.0, fontWeight: FontWeight.bold)),
                ],
              ),
            ),
          ),
        ]),
      ),
    );
  }
}

Answer 1

您如何看待这种方法：

import 'package:flutter/material.dart';

class ExampleWidget extends StatefulWidget {
  const ExampleWidget({Key? key}) : super(key: key);

  @override
  _ExampleWidgetState createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> {
  List<Widget> _myList = [];

  void _loadFiveMore() {
    _myList = <Widget>[
      ..._myList,
      for (int i = _myList.length; i < _myList.length + 5; i++)
        ListTile(title: Text('item $i')),
    ];
  }

  @override
  void initState() {
    _loadFiveMore();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(children: [
          ..._myList,
          OutlinedButton(
              onPressed: () {
                setState(() => _loadFiveMore());
              },
              child: const Text('get 5 more'))
        ]),
      ),
    );
  }
}

void main() {
  runApp(const ExampleWidget());
}