Flutter组件--ListView组件

Flutter中我们可以通过ListView来定义列表,支持垂直和水平方向展示.通过一个属性就可以控制列表的方向.列表有一下分类:

 

1.垂直列表;

2.垂直图文列表;

3.水平列表;

4.动态列表.

列表组件常用的参数

名称类型说明
scrollDirectiionAxis

Axis.horizontal 水平列表

Axis.vertical垂直列表

paddingEdgelinsetsGeometry内边距
resolvebool组件反向排序
childrenList列表元素
Scrollbarwidget滑动时候,右侧显示的滚动条

shrinkWrap

bool设置为true的时候,没有下拉的动效.
physics

NeverScrollableScrollPhysics

(禁止滑动事件)

当两个ListView进行嵌套的时候,必须设置physics和shrinkWrap=YES.内层的ListView才不会进行滑动

itemExtent

double

强制修改cell的高度

RefreshIndicator

widget下拉刷新,刷新的

onRefresh方法需要是异步的.

controller.animateTo/列表回到顶部

1.代码示例(普通列表):

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.vertical,//设置滚动的方向
      children: <Widget>[
        const ListTile(title: Text("我是一个列表")),
        Divider(), //添加一个分割线
        ListTile(leading: Icon(Icons.home_filled), title: Text("我是一个列表")),
        //左侧添加一个图片
        Divider(), //添加一个分割线
        const ListTile(
          title: Text("我是一个列表"),
          trailing: Icon(Icons.arrow_right),
        ), //右侧添加一个图片
        const ListTile(
          title: Text("我是一个列表"),
          subtitle: Text("我是一个副标题"),
        ),
        ListTile(
          leading: Image.network(
              "https://pics4.baidu.com/feed/7a899e510fb30f24b8e3b5b2a13fc948ac4b03bf.png@f_auto?token=ad3c0d7bf1a18a7a4c2548ba758d747d"),
          title: const Text("神奇动物都在南宁动物园！凭一己之力带火整个动物园，是什么让它们“疯狂”？"),
          subtitle: const Text(
              "拿草皮丢人的“暴走”大猩猩、趴在地上扭屁股的“扭扭熊”、挂在杆子上晃来晃去的“飞机猴”……近日，南宁动物园的“神奇动物们”在短视频平台火了，有网友评论：“这个动物园到底还有没有一个正经动物？”，“这就是现实版的疯狂动物城吧！”随着各种动物走红，南宁动物园也再次受到网友关注。这座动物园到底有多神奇？一起去看看。"),
        ),
      ],
    );
  }
}

 2.代码示例(动态列表):

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

//自定义方法
  List<Widget> _listFac() {
    List<Widget> array = [];
    for (var i = 0; i < 20; i++) {
      array.add(ListTile(
        title: Text('我是第$i行'),
      ));
    }

    return array;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _listFac(),
    );
  }
}

 3.代码示例(有重用标识符的动态列表):

class BuildListView extends StatelessWidget {
  List list =[];
   BuildListView({super.key})
  {
    for (var i = 0; i < 10; i++) {
      
      list.add("我是第$i条数据.重用列表");
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: list.length,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          title: Text(list[index]),
        );
      },
    );
  }
}

注意事项:

由于 GridView和ListView都是可以滚动的组件,所以在嵌套的时候需要将里面的组件设置为不可滚动组件.

shrinkWrap:true;

physics:NeverScrollableScrollPhysics;