Flutter ListView列表布局

目录

参数详解

代码示例

效果图

特别说明

完整代码

---

参数详解

 

属性	说明
scrollDirection	设置滑动方向 Axis.horizontal 水平列表 Axis.vertical 垂直列表
reverse	组件反向排列，默认false
controller	滚动控制器(滑动监听，为true监听无效)
primary	默认false，如果内容不足，则用户无法滚动 而如果[primary]为true，它们总是可以尝试滚动。
physics	滑动类型设置 AlwaysScrollableScrollPhysics() 总是可以滑动 NeverScrollableScrollPhysics禁止滚动 BouncingScrollPhysics 内容超过一屏 上拉有回弹效果 ClampingScrollPhysics 包裹内容 不会有回弹
shrinkWrap	默认false   内容适配
padding	内边距
itemExtent	确定每一个item的高度 会让item加载更加高效
addAutomaticKeepAlives	默认true
addRepaintBoundaries	默认true
addSemanticIndexes	默认true
cacheExtent	设置预加载的区域
children	组件元素 const <Widget>[]
semanticChildCount
dragStartBehavior	默认DragStartBehavior.start

在这里我对children进行简要说明，children 接收的是<Widget>[]数组类型数据。

数组中只要是widget类型数据就行，大家应该知道，在Flutter中，所有组件都是Widget，也就是说 children接收包含任意组件的数组。

官方提供了一套新闻标题列表 ListTile，我在这里简单介绍一下：

ListTile 继承了 StatelessWidget

ListTile 属性简介

属性	说明
leading	前图标
title	标题
subtitle	简介
trailing	后图标
isThreeLine	默认false
dense	官方：此列表平铺是否是垂直密集列表的一部分。
contentPadding	设置内容边距
enabled	默认true
onTap	点击事件  onTap: () { print('点击'); },
onLongPress	长按事件
selected	默认false   是否选中

代码示例

在这里介绍两种使用方法

1、手动添加listview子元素

return ListView(
      padding: EdgeInsets.only(bottom: 15),
      scrollDirection: Axis.vertical,//垂直列表
      children: <Widget>[
        ListTile(
          title: Text('Flutter Image组件'),
          subtitle: Text('目录 参数详解 代码示例 效果图 完整代码 使用资源图片前必做两个步骤： 1、在根目录下创建子目录，子目录中创建2.0x和3.0x（也可以创建4.0x、5.0x... 但是2.0和3.0是必须的）目录，在对应目录中添加对应分辨率图片。（图1） 2、打开pubspec.yaml文件',maxLines: 2,overflow: TextOverflow.ellipsis,),
          leading: Icon(Icons.settings),
        ),

        ListTile(
          title: Text('Flutter Container 组件'),
          subtitle: Text('目录 参数详解 代码示例 效果图 完整代码 Container 官网简介：一个便利的小部件，结合了常见的绘画，定位和大小调整小部件。 其实就是一个容器组件，既然是容器，那么，就一定可以装很多东西，而Container装的东西就是Flutter 其他组件。 参数详解 属性 说明',maxLines: 2,overflow: TextOverflow.ellipsis,),
          leading: Icon(Icons.settings),
        ),
      ],
    );

 2、循环添加listview子元素

List<Widget> getData(){
  List<Widget> list = new List();
  for(int i = 0; i < 20; i++){
    list.add(
      ListTile(
          title: Text('循环添加列表元素$i'),
        ),
    );
      
  }
  return list;
}

//循环添加列表元素
class MyBodyB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: getData(),
    );
  }
}

3、使用ListView.builder加载数据

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

 

效果图

特别说明

ListTile 中属性dense ，官方解释：此列表平铺是否是垂直密集列表的一部分。

我也没搞明白，但是可以贴图给大家看看不同。体一条是dense = true，有人说这个属性是自动适配。

完整代码

查看完整代码