【Flutter】【widget】listview 的快速学习

• 列表，可以滚动，快速创建可滚动列表

功能：

功能：

1. 滚动一个列表
2. 注意点： listview 的元素如果超过的屏幕，那么flutter 会销毁他，包括他的状态state,但是addAutomaticKeepAlives 这个选项默认是true的，保存他们的状态，如果才不会被销毁，你可以尝试下addAutomaticKeepAlives设置为fasle。状态会被销毁

使用实例和代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 const MyApp({super.key});

 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       // This is the theme of your application.
       //
       // Try running your application with "flutter run". You'll see the
       // application has a blue toolbar. Then, without quitting the app, try
       // changing the primarySwatch below to Colors.green and then invoke
       // "hot reload" (press "r" in the console where you ran "flutter run",
       // or simply save your changes to "hot reload" in a Flutter IDE).
       // Notice that the counter didn't reset back to zero; the application
       // is not restarted.
       primarySwatch: Colors.blue,
     ),
     home: const MyHomePage(title: 'Flutter Demo Home Page'),
   );
 }
}

class Car {
 const Car({
   required this.name,
   required this.imageUrl,
 });

 final String name;
 final String imageUrl;
}

class MyHomePage extends StatefulWidget {
 const MyHomePage({super.key, required this.title});

 final String title;
 @override
 State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
//模型数组,图片的地址
 final List<Car> datas = const [
   Car(
     name: '保时捷918 Spyder',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-7d8be6ebc4c7c95b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   Car(
     name: '兰博基尼Aventador',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-e3bfd824f30afaac?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   Car(
     name: '法拉利Enzo',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-a1d64cf5da2d9d99?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   Car(
     name: 'Zenvo ST1',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-bf883b46690f93ce?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   Car(
     name: '迈凯伦F1',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-5a7b5550a19b8342?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   Car(
     name: '萨林S7',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-2e128d18144ad5b8?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   Car(
     name: '科尼赛克CCR',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-01ced8f6f95219ec?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   Car(
     name: '布加迪Chiron',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-7fc8359eb61adac0?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   Car(
     name: '轩尼诗Venom GT',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-d332bf510d61bbc2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   ),
   Car(
     name: '西贝尔Tuatara',
     imageUrl:
         'https://upload-images.jianshu.io/upload_images/2990730-3dd9a70b25ae6bc9?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
   )
 ];

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body:
         //ListView 的一种形式，可以滚动，应用在widget 比较少的情况下。
         ListView(
                 physics: ClampingScrollPhysics(),//滚动的效果，NeverScrollablePhysics，BouncingScrollPhysics，ClampingScrollPhysics，FixedExtentScrollPhysics 自行尝试
       itemExtent: 120, //每个widget 的高，会覆盖到sizebox的高德设置
       children: List.generate(datas.length, (index) {
         return Card(
           elevation: 20,
           surfaceTintColor: Colors.amber,
           margin: const EdgeInsets.all(10),
           child: Image.network(
             datas[index].imageUrl,
             fit: BoxFit.cover,
           ),
         );
       }),
     ),
   );
 }
}

第二种形式：

         // ListView.builder(
            //     itemCount: datas.length //告知widget children 的个数。减少性能损耗
            //     ,
            //     itemBuilder: (context, int index) {
            //       return Card(
            //         elevation: 20,
            //         surfaceTintColor: Colors.red,
            //         margin: const EdgeInsets.all(10),
            //         child: Image.network(
            //           loadingBuilder: (context, child, loadingProgress) {
            //             //如果loadingProgress 已经是null 就显示图片widget
            //             if (loadingProgress == null) {
            //               return child;
            //             }
            //             //laoding widget
            //             return const CupertinoActivityIndicator();
            //           },
            //           datas[index].imageUrl,
            //           fit: BoxFit.cover,
            //         ),
            //       );
            //     }),

截图：

第三种：

            //第三种形式,widget 下面有一个下划线
            ListView.separated(
                itemBuilder: (context, int index) {
                  return Card(
                    elevation: 20,
                    surfaceTintColor: Colors.red,
                    margin: const EdgeInsets.all(10),
                    child: Image.network(
                      loadingBuilder: (context, child, loadingProgress) {
                        //如果loadingProgress 已经是null 就显示图片widget
                        if (loadingProgress == null) {
                          return child;
                        }
                        //laoding widget
                        return const CupertinoActivityIndicator();
                      },
                      datas[index].imageUrl,
                      fit: BoxFit.cover,
                    ),
                  );
                },
                separatorBuilder: (context, int index) {
                  return const Divider(
                    height: 10,
                    thickness: 10,
                    color: Colors.red,
                  ); //也可以是其他的widget
                },
                itemCount: datas.length));

截图：

第四种:

            ListView.custom(
                childrenDelegate: SliverChildBuilderDelegate(
                    childCount: datas.length, (context, int index) {
          return Card(
            elevation: 20,
            surfaceTintColor: Colors.red,
            margin: const EdgeInsets.all(10),
            child: Image.network(
              loadingBuilder: (context, child, loadingProgress) {
                //如果loadingProgress 已经是null 就显示图片widget
                if (loadingProgress == null) {
                  return child;
                }
                //laoding widget
                return const CupertinoActivityIndicator();
              },
              datas[index].imageUrl,
              fit: BoxFit.cover,
            ),
          );
        }))

ScrollController 控制ListView滚动

<1>滚动距离的监听

在listview 里面设置了固定单个widget的高度是120逻辑像素，所以当第一个widget 完全不可见的时候，滚动的具体刚好是120.这样就可以监听滚动的距离

  //控制器，控制滚动的位置等
  late final ScrollController _scrollController;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _scrollController = ScrollController()
      ..addListener(() {
        print(_scrollController.offset);
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body:
          //ListView 的一种形式，可以滚动，应用在widget 比较少的情况下。
          ListView(
        controller: _scrollController,
        itemExtent: 120, //每个widget 的高，会覆盖到sizebox的高德设置
        // scrollDirection: Axis.horizontal, //滚动的方向，水平滚动，还是垂直方向滚动
        children: List.generate(datas.length, (index) {
          return Card(
            elevation: 20,
            surfaceTintColor: Colors.amber,
            margin: const EdgeInsets.all(10),
            child: Image.network(
              datas[index].imageUrl,
              fit: BoxFit.cover,
            ),
          );
        }),
      ),）；

     floatingActionButton: FloatingActionButton(
       onPressed: () {
         //跳转到顶部
         // _scrollController.jumpTo(0);

         //有动画效果的，跳转到顶部
         _scrollController.animateTo(0,
             duration: Duration(seconds: 1), curve: Curves.easeInBack);
       },
       child: Icon(Icons.upload),
     )