资料
三、Flutter基础—ListView入门
Flutter ListView 列表进阶
基础用法
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ListViewPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _ListViewPageState();
}
}
class _ListViewPageState extends State<ListViewPage> {
@override
Widget build(BuildContext context) {
List<Widget> _list = new List();
for (int i = 0; i < titleItems.length; i++) {
_list.add(
buildListData(context, titleItems[i], iconItem[i], subTitleItems[i]));
}
//分割线
var divideTitles =
ListTile.divideTiles(tiles: _list, context: context).toList();
// 第一种方法
return new Scaffold(
appBar: AppBar(
title: new Text("Flutter ListView 常规"),
),
body: Scrollbar(
child: ListView.builder(
// 无分割线
// itemBuilder: (context, item){
// return buildListData(context, titleItems[item], iconItem[item], subTitleItems[item]);
// },
// 有分割线
itemBuilder: (context, item) {
return Container(
child: Column(
children: <Widget>[
buildListData(context, titleItems[item], iconItem[item],
subTitleItems[item]),
Divider()
],
),
);
},
),
),
);
// 第二种方法
// return new Scaffold(
// appBar: AppBar(
// title: new Text('FLutter ListView'),
// ),
// body: Scrollbar(
// child: ListView.separated(
// itemBuilder: (context, item) {
// return buildListData(context, titleItems[item], iconItem[item],
// subTitleItems[item]);
// },
// separatorBuilder: (BuildContext context, int index) => Divider(),
// itemCount: iconItem.length),
// ),
// );
}
Widget buildListData(BuildContext context, String titleItem, Icon iconItem,
String subTitleItem) {
return new ListTile(
leading: iconItem,
title: new Text(
titleItem,
style: TextStyle(fontSize: 18),
),
subtitle: new Text(subTitleItem),
trailing: new Icon(Icons.keyboard_arrow_right),
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: new Text(
'ListViewAlert',
style: new TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
),
content: new Text("您选择的item内容未:$titleItem"),
);
},
);
},
);
}
// 数据源
List<String> titleItems = <String>[
'keyboard',
'print',
'router',
'pages',
'zoom_out_map',
'zoom_out',
'youtube_searched_for',
'wifi_tethering',
'wifi_lock',
'widgets',
'weekend',
'web',
'图accessible',
'ac_unit',
];
List<Icon> iconItem = <Icon>[
new Icon(Icons.keyboard),
new Icon(Icons.print),
new Icon(Icons.router),
new Icon(Icons.pages),
new Icon(Icons.zoom_out_map),
new Icon(Icons.zoom_out),
new Icon(Icons.youtube_searched_for),
new Icon(Icons.wifi_tethering),
new Icon(Icons.wifi_lock),
new Icon(Icons.widgets),
new Icon(Icons.weekend),
new Icon(Icons.web),
new Icon(Icons.accessible),
new Icon(Icons.ac_unit),
];
List<String> subTitleItems = <String>[
'subTitle: keyboard',
'subTitle: print',
'subTitle: router',
'subTitle: pages',
'subTitle: zoom_out_map',
'subTitle: zoom_out',
'subTitle: youtube_searched_for',
'subTitle: wifi_tethering',
'subTitle: wifi_lock',
'subTitle: widgets',
'subTitle: weekend',
'subTitle: web',
'subTitle: accessible',
'subTitle: ac_unit',
];
}
ListView 简单堆列
class _ListViewPageState2 extends State<ListViewPage> {
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 160,
height: 100,
color: Colors.blueAccent,
),
],
);
}
}
ScrollPhysics样式的listView
NeverScrollPhysics(不滚动效果)
BouncingScrollPhysics(IOS效果)
ClampingScrollPhysics(Android效果)
FixedExtentScrollPhysics(固定范围的滚动效果)
final List<String> imgList = [
'https://p0.meituan.net/deal/66516fcd8ae3975edd2f4b5f8a931ce925464.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
'https://p1.meituan.net/deal/141205589b18b856b87543af52abc29e35813.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
'https://p1.meituan.net/deal/bc4a2aa8ea099f18053ab1c3eac6b6ae409003.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
'https://p0.meituan.net/deal/e4f7972d34b289a00ae2491c70359024128785.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
'https://p1.meituan.net/deal/603250f870b1a380817b6e236f34d91e29643.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
'https://p1.meituan.net/deal/dc61effc0eea3e9e7eb46ad6538406104138050.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
'https://p1.meituan.net/deal/21cb8a9168c0cb1ef309f7b7a6127f3f29289.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
'https://p1.meituan.net/deal/0edbee70060eb1db27b7db7853dedb8424600.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
'https://p0.meituan.net/deal/0be8d6f4610dee0150b65f874192cabd47239.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0'
];
class _ListViewPagesState5 extends State<ListViewPage> {
FixedExtentScrollController fixedExtentScrollController =
new FixedExtentScrollController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ListView"),
),
body: ListWheelScrollView(
controller: fixedExtentScrollController,
physics: ClampingScrollPhysics(),
itemExtent: 150.0,
children: imgList.map((img) {
return Container(
height: 150,
child: Row(
children: <Widget>[
Image.network(
img,
width: 150.0,
),
Padding(
padding: EdgeInsets.only(right: 10.0),
),
Text(
'文字介绍',
style: TextStyle(fontSize: 20.0),
)
],
)
);
}).toList(),
),
);
}
}