Flutter-ListView组件的简单使用

配图来自网络，如侵必删

在Flutter开发当中，我们可能会遇到以下的需求：

实现一个功能列表

这篇博客主要分享容器组件的ListView组件的使用，希望对看文章的小伙伴有所帮助。

简单示例代码

ListView(
        scrollDirection: Axis.vertical,
        padding: const EdgeInsets.all(8),
        itemExtent: 100,
        children: <Widget>[
          Container(
            height: 44,
            color: Colors.red,
            child: const Center(
              child: Text('一'),
            ),
          ),
          Container(
            height: 44,
            color: Colors.yellow,
            child: const Center(
              child: Text('二'),
            ),
          ),
          Container(
            height: 44,
            color: Colors.blue,
            child: const Center(
              child: Text('三'),
            ),
          ),
        ],
      ),

效果如下所示：

image.png

组件源码

ListView({
    Key? key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController? controller,
    bool? primary,
    ScrollPhysics? physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry? padding,
    this.itemExtent,
    this.prototypeItem,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double? cacheExtent,
    List<Widget> children = const <Widget>[],
    int? semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    String? restorationId,
    Clip clipBehavior = Clip.hardEdge,
  }) : assert(
         itemExtent == null || prototypeItem == null,
         'You can only pass itemExtent or prototypeItem, not both.',
       ),
       childrenDelegate = SliverChildListDelegate(
         children,
         addAutomaticKeepAlives: addAutomaticKeepAlives,
         addRepaintBoundaries: addRepaintBoundaries,
         addSemanticIndexes: addSemanticIndexes,
       ),
       super(
         key: key,
         scrollDirection: scrollDirection,
         reverse: reverse,
         controller: controller,
         primary: primary,
         physics: physics,
         shrinkWrap: shrinkWrap,
         padding: padding,
         cacheExtent: cacheExtent,
         semanticChildCount: semanticChildCount ?? children.length,
         dragStartBehavior: dragStartBehavior,
         keyboardDismissBehavior: keyboardDismissBehavior,
         restorationId: restorationId,
         clipBehavior: clipBehavior,
       );

组件部分属性说明

这里针对源码做出相应的属性说明，熟悉控件的属性方便大家的使用。

属性名称	属性说明
scrollDirection	滚动方向
padding	内边距
children	列表的子组件
itemExtent	列表的滚动长度
prototypeItem	列表项原型长度，itemExtent 和prototypeItem 互斥，不能同时指定它们。
shrinkWrap	该属性表示是否根据子组件的总长度来设置ListView的长度，默认值为false 。

完整的源码

以下的代码，可以直接复制到编译器去运行，方便小伙伴查看运行结果或者直接使用：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView组件的使用"),
      ),
      body: ListView(
        scrollDirection: Axis.vertical,
        padding: const EdgeInsets.all(8),
        itemExtent: 100,
        children: <Widget>[
          Container(
            height: 44,
            color: Colors.red,
            child: const Center(
              child: Text('一'),
            ),
          ),
          Container(
            height: 44,
            color: Colors.yellow,
            child: const Center(
              child: Text('二'),
            ),
          ),
          Container(
            height: 44,
            color: Colors.blue,
            child: const Center(
              child: Text('三'),
            ),
          ),
        ],
      ),
    );
  }
}