目录
参数详解
属性 | 说明 |
scrollDirection | 设置滑动方向 Axis.horizontal 水平列表 |
reverse | 组件反向排列,默认false |
controller | 滚动控制器(滑动监听,为true监听无效) |
primary | 默认false,如果内容不足,则用户无法滚动 而如果[primary]为true,它们总是可以尝试滚动。 |
physics | 滑动类型设置 AlwaysScrollableScrollPhysics() 总是可以滑动 |
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,有人说这个属性是自动适配。