flutter 实战 之 ListView

ListView 主要用来展示列表，且这个列表是可以滑动的，可以自适应你设置的内容长度
我们先来看看ListView的属性

1. children (List<Widget>): 这是最常用的属性之一，它接收一个包含 Widget 的列表。每个 Widget 代表列表中的一个子项。您可以使用 ListView.builder 或 ListView.separated 代替该属性，以构建大型列表或带有分隔符的列表。

2. itemBuilder (IndexedWidgetBuilder): 当 ListView.builder 使用时，该属性是一个回调函数，它根据给定的索引构建列表项。这种方式适用于大型列表，因为它只会在需要显示项目时才会构建它，从而提高性能。

3. separatorBuilder (IndexedWidgetBuilder): 当 ListView.separated 使用时，该属性类似于 itemBuilder，但它用于构建分隔符（divider）而不是普通的列表项。可以用于在列表项之间添加分隔符。

4. scrollDirection (Axis): 定义列表的滚动方向，可以是 Axis.vertical（垂直滚动）或 Axis.horizontal（水平滚动）。

5. reverse (bool): 设置为 true 时，列表将反转滚动方向。例如，如果 scrollDirection 是 Axis.vertical，则列表从底部向上滚动，而不是默认的从上到下滚动。

6. controller (ScrollController): 通过该属性，您可以自定义 ListView 的滚动控制器。您可以使用 ScrollController 来监听滚动事件，跳转到特定位置或控制滚动位置。

7. primary (bool): 当页面嵌套多个滚动组件时，如果设置为 true，则表示该 ListView 是主滚动组件，将尝试尽可能多地占用滚动事件。

8. physics (ScrollPhysics): 定义了滚动的物理特性，例如滚动的边界效果、滚动是否可以超出边界等。可以设置为 ClampingScrollPhysics（默认）、BouncingScrollPhysics 等。

9. shrinkWrap (bool): 设置为 true 时，ListView 的高度将与其内容一样高。这在嵌套 ListView 或在其他滚动组件中使用时很有用。

10. padding (EdgeInsetsGeometry): 定义列表的内边距，可以用于设置列表与容器边界之间的间距。

11. cacheExtent (double): 仅在使用 ListView.builder 时有效。它定义了在滚动时在列表的顶部和底部保留的额外空间，以避免在滚动时重复构建列表项。

12. addAutomaticKeepAlives (bool): 当列表项滚出视图后，设置为 true 时，会尝试保持列表项的状态，以避免不必要的重建。适用于带有动态内容的列表项。

13. addRepaintBoundaries (bool): 设置为 true 时，会为列表项添加重绘边界，可以防止列表项重复重绘。

14. itemExtent (double): 如果列表项具有固定高度，可以使用此属性来指定每个列表项的高度。这样可以避免 Flutter 计算每个列表项的高度，提高性能。

15. semanticChildCount (int): 用于指定语义子节点的数量，通常在构建具有大量子节点的大型列表时使用。

可以用 children 来装载 <Widget> 组件 
可以用 ListTile 来添加文字

 如何实现上面效果呢？
我们主要利用ListTile来设置，用Divider来设置下划线，leading来设置前面的图标，用trailing来设置后面的图标。
上代码：
 

import 'package:flutter/material.dart';
import 'package:pivot_chat/widgets/button/_PCHomePageButton.dart';

class test extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            leading: IconButton(
              onPressed: (){},
              icon: Icon(ItyingFont.icon1,
              color: Colors.pinkAccent,
              ),
            ),
          ),
          body: ListView(

            children: [
              ListTile(
                leading: IconButton(
                  onPressed: (){},
                  icon: Icon(Icons.home),
                ),
                title: Text("this is a title"),
                trailing: Icon(ItyingFont.icon3),
              ),
              Divider(),
              ListTile(
                leading: Icon(ItyingFont.icon1,
                color: Colors.amber,),
                title: Text("screen"),),
              Divider(),
              ListTile(
                leading: Icon(ItyingFont.icon2,
                color: Colors.blue,),
                title: Text("lala"),

              ),
              Divider(),
              ListTile(
                leading: Icon(ItyingFont.icon3,
                color: Colors.amberAccent,),
                title: Text("dart"),
              ),
              Divider(),
              ListTile(
                leading: Icon(Icons.home,
                color: Colors.green,),
                title: Text("java"),
                
              )

            ],
          ),
        ),

    );
  }

}

如果要实现下面的效果呢？

我们来看看代码如何实现
 

import 'package:flutter/material.dart';
import 'package:pivot_chat/widgets/button/_PCHomePageButton.dart';

class test extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            leading: IconButton(
              onPressed: (){},
              icon: Icon(ItyingFont.icon1,
              color: Colors.pinkAccent,
              ),
            ),
          ),
          body: ListView(

            children: [
              ListTile(
                leading: IconButton(
                  onPressed: (){},
                  icon: Icon(Icons.home,
                  color: Colors.green,),
                ),
                title: Text("this is a title"),
                subtitle: Text("what are you doing",
                ),
                trailing: Icon(ItyingFont.icon3),
              ),
              Divider(),
              ListTile(
                leading: Icon(ItyingFont.icon1,
                color: Colors.amber,),
                title: Text("screen"),),
              Divider(),
              ListTile(
                leading: Icon(ItyingFont.icon2,
                color: Colors.blue,),
                title: Text("lala"),

              ),
              Divider(),
              ListTile(
                leading: Icon(ItyingFont.icon3,
                color: Colors.amberAccent,),
                title: Text("dart"),
              ),
              Divider(),
              ListTile(
                leading: Icon(Icons.home,
                color: Colors.green,),
                title: Text("java"),
                
              ),
              Divider(),
              ListTile(
                leading:Image.network("https://th.bing.com/th/id/R.84dbeedae8c4a4200a94f26da30a2179?rik=IrmYiODcJ5swYA&riu=http%3a%2f%2fd.paper.i4.cn%2fmax%2f2016%2f12%2f02%2f10%2f1480645225499_464906.jpg&ehk=1wGgzhGo8cFwOCAapVbyWhd9T0rxrp4GtJYRb7WypoY%3d&risl=&pid=ImgRaw&r=0",
                width: 100.0,
                  height: 100.0,
                ) ,
                title: Text("海绵宝宝最近很开心"),
                subtitle: Text("为什么呢，因为今天是星期六，不用上班呀"),
              ),
              Divider(),
              ListTile(
                leading: Image.network("https://th.bing.com/th/id/OIP.ZEi_9tjnaj2OSwQG_VXmVwAAAA?pid=ImgDet&w=199&h=261&c=7&dpr=1.3",
                width: 100.0,
                  height: 100.0,
                ),
                title: Text("海绵宝宝最近很难过"),
                subtitle: Text("今天又要加班啦"),
                trailing: Image.network("https://photo.16pic.com/00/56/24/16pic_5624993_b.jpg"),

              )

            ],
          ),
        ),

    );
  }

}

 注意 ListView 里面如果是垂直排布添加 Container ，Container 的宽度是自适应的。同理如果是水平布局，Container的高度的自适应的。