Flutter——listview的三种加载方式

main.dart

import 'package:flutter/material.dart';
import 'SwipeToDissmissDemo.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
            title: "我的列表",
            theme: ThemeData.light(),
            home: SwipeToDissmissDemo(),
        );
    }
}

SwipeToDissmissDemo.dart

import 'package:flutter/material.dart';

class SwipeToDissmissDemo extends StatefulWidget {
    @override
    State<StatefulWidget> createState() {
        // TODO: implement createState
        return new _SwipeToDissmissState();
    }
}

class _SwipeToDissmissState extends State<SwipeToDissmissDemo> {
    List<String> list = List.generate(20, (index) => "我的列表 $index 元素");

    @override
    Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
            appBar: AppBar(
                title: Text('我的列表'),
            ),
            body: ListView.builder(
                itemCount: list.length,
                itemBuilder: (context, index) {
                    return Dismissible(
                        key: Key(list[index]),
                        direction: DismissDirection.endToStart,
                        child: ListTile(title: Text('${list[index]}')),
                        background: Container(
                            color: Colors.redAccent,
                        ),
                        onDismissed: (direction) {
                            setState(() {
                            Scaffold.of(context)
                                .showSnackBar(SnackBar(content: Text("${list[index]}")));
                            list.removeAt(index);
                            });
                        },
                    );
                },
            )
        );
    }
}

ListView的三种加载方式
1、ListTitle
2、List.generate一次性加载所有
3、ListView.builder不是一次性加载所有、懒加载

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                appBar: AppBar(
                    title: Text('listview'),
                ),
                //不是一次性加载,懒加载
                body: ListView.builder(
                    itemCount: 100,
                    itemBuilder: (context, index) {
                        print('$index');
                        //奇数
                        if (index.isOdd) {
                        return Divider();
                        }
                        return ListTile(
                        leading: Icon(Icons.title),
                        title: Text('$index' + 'favorite_border'),
                        subtitle: Text('1111'),
                        trailing: Icon(Icons.arrow_right),
                        );
                    })
                //右键->refector-extract->widget或method
                //HorizontalListViewWidget()
                //NormalListView()
                ),
            );
    }

    ListView NormalListView() {
        return ListView(
            children: <Widget>[
                ListTile(
                    leading: Icon(Icons.title),
                    title: Text('favorite_border'),
                    subtitle: Text('1111'),
                    trailing: Icon(Icons.arrow_right),
                ),
                Divider(),
                ListTile(
                    leading: Icon(Icons.title),
                    title: Text('favorite_border'),
                    subtitle: Text('1111'),
                    trailing: Icon(Icons.arrow_right),
                ),
                Divider(),
                ListTile(
                    leading: Icon(Icons.title),
                    title: Text('favorite_border'),
                    subtitle: Text('1111'),
                    trailing: Icon(Icons.arrow_right),
                ),
                Divider(),
                ListTile(
                    leading: Icon(Icons.title),
                    title: Text('favorite_border'),
                    subtitle: Text('1111'),
                    trailing: Icon(Icons.arrow_right),
                ),
            ],
        );
    }
}

class HorizontalListViewWidget extends StatelessWidget {
    const HorizontalListViewWidget({
        Key key,
    }) : super(key: key);

    @override
    Widget build(BuildContext context) {
        return ListView(
            scrollDirection: Axis.horizontal,
            //一次性加载所有
            children: List.generate(50, (index) {
                return Text(
                    '$index',
                    style: TextStyle(fontSize: 20),
                );
            }),
        );
    }
}