import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: 'JR flutter demo',
home: Scaffold(
appBar: new AppBar(title: new Text('flutter list widget')),
body: new ListView(
children: [
new ListTile(
leading: new Icon(Icons.add_to_photos),
title: new Text('add_to_photos')
),
new ListTile(
leading: new Icon(Icons.access_alarm),
title: new Text('access_alarm')
),
new ListTile(
leading: new Icon(Icons.accessibility_new),
title: new Text('accessibility_new')
),
],
)
),
);
}
图片列表的使用
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: 'JR flutter demo',
home: Scaffold(
appBar: new AppBar(title: new Text('flutter list widget')),
body:MyList()
),
);
}
}
class MyList extends StatelessWidget
{
@override
Widget build(BuildContext context){
return ListView(
children: [
new Image.network('https://p2.ssl.qhimgs1.com/sdr/400__/t019004c34347e26fd8.jpg'),
new Image.network('http://v1.qzone.cc/pic/201303/19/15/46/514817e7e6a3e384.jpg!600x600.jpg'),
new Image.network('https://p0.ssl.qhimgs1.com/sdr/400__/t01e02de16a2ec29cd4.jpg'),
],
);
}
ListView ListTile
ListTile 是Flutter 给我们准备好的widget 提供非常常见的构造和定义方式，包括文字，icon，点击事件，一般是能够满足基本需求，但是就不能自己定义了
ListTile 属性
this.leading, // item 前置图标
this.title, // item 标题
this.subtitle, // item 副标题
this.trailing, // item 后置图标
this.isThreeLine = false, // item 是否三行显示
this.dense, // item 直观感受是整体大小
this.contentPadding, // item 内容内边距
this.enabled = true,
this.onTap, // item onTap 点击事件
this.onLongPress, // item onLongPress 长按事件
this.selected = false, // item 是否选中状态
效果
child: ListTile(
leading: new Icon(Icons.list),
title: new Text(list[i].name),
trailing: new Icon(Icons.keyboard_arrow_right),
),
ListView builder
builder 顾名思义 构造 可以非常方便的构建我们自己定义的child布局，所以在Flutter中非常的常用。
builder属性
//设置滑动方向 Axis.horizontal 水平 默认 Axis.vertical 垂直
scrollDirection: Axis.vertical,
//内间距
padding: EdgeInsets.all(10.0),
//是否倒序显示 默认正序 false 倒序true
reverse: false,
//false，如果内容不足，则用户无法滚动 而如果[primary]为true，它们总是可以尝试滚动。
primary: true,
//确定每一个item的高度 会让item加载更加高效
itemExtent: 50.0,
//内容适配
shrinkWrap: true,
//item 数量
itemCount: list.length,
//滑动类型设置
physics: new ClampingScrollPhysics(),
//cacheExtent 设置预加载的区域
cacheExtent: 30.0,
//滑动监听
// controller ,
shrinkWrap
child 高度会适配 item填充的内容的高度,我们非常的不希望child的高度固定，因为这样的话，如果里面的内容超出就会造成布局的溢出。
shrinkWrap多用于嵌套listView中 内容大小不确定 比如 垂直布局中 先后放入文字 listView （需要Expend包裹否则无法显示无穷大高度 但是需要确定listview高度 shrinkWrap使用内容适配不会有这样的影响）
primary
在构造中默认是false 它的意思就是为主的意思，primary为true时，我们的controller 滑动监听就不能使用了
physics
这个属性几个滑动的选择
AlwaysScrollableScrollPhysics() 总是可以滑动
NeverScrollableScrollPhysics禁止滚动
BouncingScrollPhysics 内容超过一屏 上拉有回弹效果
ClampingScrollPhysics 包裹内容 不会有回弹
cacheExtent
这个属性的意思就是预加载的区域
设置预加载的区域 cacheExtent 强制设置为了 0.0，从而关闭了“预加载”
controller
滑动监听，我们多用于上拉加载更多，通过监听滑动的距离来执行操作。
Widget listViewLayoutBuilder(List list) {
return ListView.builder(
scrollDirection: Axis.vertical,
padding: EdgeInsets.all(10.0),
reverse: false,
primary: true,
itemExtent: 50.0,
shrinkWrap: true,
itemCount: list.length,
cacheExtent: 30.0,
physics: new ClampingScrollPhysics(),
// controller ,
itemBuilder: (context, i) => new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
],
),
));
}
builder模式来设置分割线
我们在正常的需求中大部分是需要item的分割线的，而在builder模式中使用divide 会有种情况（divide放在item的布局中 通过Column），我们会发现divide并没有直接延时到item两端而是会有左右padding。
新方式实现
奇数返回分割线，偶数返回布局
1.扩大list容积 为两倍，因为我们给了divide的index
Widget listView = new ListView.builder(
itemCount: list.length * 2 ,
itemBuilder: (context, index) => itemDividerRow(context, index));
2. 根据下标分配item类型
itemDividerRow(context, int i) {
if (i.isOdd) {//是奇数
return new Divider( //返回分割线
height: 1.0,
);
} else {
i = i ~/ 2;
return getRowWidget(context, orderList[i]); //返回item 布局
}
}
这样我们就可以去实现了，builder模式分割线