import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( title: 'Flutter gesture', home: LearnListView(), )); } class LearnListView extends StatefulWidget{ @override State<StatefulWidget> createState() { return new _LearnListView(); } } class _LearnListView extends State<StatefulWidget>{ final List<int> data=[]; @override void initState() { // TODO: implement initState super.initState(); for(int i=0;i<100;i++){ data.add(i); } } @override Widget build(BuildContext context) { return new Scaffold( body: new ListView.builder( itemBuilder: (BuildContext context, int index) { int itemDat=data[index]; return new Row( children: <Widget>[ new Container( child:new Image.network( 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=15335368' '41326&di=682e2e7c3810ac92be325e62e173c0ea&imgtype=0&src=http%3A%2F%2Fs6.si' 'naimg.cn%2Fmw690%2F006LDoUHzy7auXEaYER25%26690', 100.0, height: 70.0, fit: BoxFit.cover, ), margin: EdgeInsets.all(10.0), ), new Expanded( child:new Column( children: <Widget>[ new Container( height: 70.0, child: new Text('这是一张非常漂亮的美女图$itemDat，喜欢就赶紧来欣赏吧，等着你哦'), ), ], ), flex: 1, ), ], ); }, itemCount:data.length , ), ); } }
简单的List(纵向)
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final title = 'Basic List'; return new MaterialApp( title: title, home: new Scaffold( appBar: new AppBar( title: new Text(title), ), body: new ListView( children: <Widget>[ new ListTile( leading: new Icon(Icons.map), title: new Text('Map'), ), new ListTile( leading: new Icon(Icons.photo), title: new Text('Album'), ), new ListTile( leading: new Icon(Icons.phone), title: new Text('Phone'), ), ], ), ), ); } }
简单的List(横向)
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final title = 'Horizontal List'; return new MaterialApp( title: title, home: new Scaffold( appBar: new AppBar( title: new Text(title), ), body: new Container( margin: new EdgeInsets.symmetric(vertical: 20.0), height: 200.0, child: new ListView( scrollDirection: Axis.horizontal, children: <Widget>[ new Container( 160.0, color: Colors.red, ), new Container( 160.0, color: Colors.blue, ), new Container( 160.0, color: Colors.green, ), new Container( 160.0, color: Colors.yellow, ), new Container( 160.0, color: Colors.orange, ), ], ), ), ), ); } }
使用长列表，自定义参数
import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; void main() { runApp(new MyApp( items: new List<String>.generate(10000, (i) => "Item $i"), )); } class MyApp extends StatelessWidget { final List<String> items; MyApp({Key key, @required this.items}) : super(key: key); @override Widget build(BuildContext context) { final title = 'Long List'; return new MaterialApp( title: title, home: new Scaffold( appBar: new AppBar( title: new Text(title), ), body: new ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return new ListTile( title: new Text('${items[index]}'), ); }, ), ), ); } }
创建不同类型子项的List
import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; void main() { runApp(new MyApp( items: new List<ListItem>.generate( 1000, (i) => i % 6 == 0 ? new HeadingItem("Heading $i") : new MessageItem("Sender $i", "Message body $i"), ), )); } class MyApp extends StatelessWidget { final List<ListItem> items; MyApp({Key key, @required this.items}) : super(key: key); @override Widget build(BuildContext context) { final title = 'Mixed List'; return new MaterialApp( title: title, home: new Scaffold( appBar: new AppBar( title: new Text(title), ), body: new ListView.builder( // Let the ListView know how many items it needs to build itemCount: items.length, // Provide a builder function. This is where the magic happens! We'll // convert each item into a Widget based on the type of item it is. itemBuilder: (context, index) { final item = items[index]; if (item is HeadingItem) { return new ListTile( title: new Text( item.heading, style: Theme.of(context).textTheme.headline, ), ); } else if (item is MessageItem) { return new ListTile( title: new Text(item.sender), subtitle: new Text(item.body), ); } }, ), ), ); } } // The base class for the different types of items the List can contain abstract class ListItem {} // A ListItem that contains data to display a heading class HeadingItem implements ListItem { final String heading; HeadingItem(this.heading); } // A ListItem that contains data to display a message class MessageItem implements ListItem { final String sender; final String body; MessageItem(this.sender, this.body); }
创建一个 Grid List(就是使用形如iOS的collectionview)
import 'package:flutter/material.dart'; void main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final title = 'Grid List'; return new MaterialApp( title: title, home: new Scaffold( appBar: new AppBar( title: new Text(title), ), body: new GridView.count( // Create a grid with 2 columns. If you change the scrollDirection to // horizontal, this would produce 2 rows. crossAxisCount: 2, // Generate 100 Widgets that display their index in the List children: new List.generate(100, (index) { return new Center( child: new Text( 'Item $index', style: Theme.of(context).textTheme.headline, ), ); }), ), ), ); } }
左右滑动删除List项
import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; void main() { runApp(new MyApp( items: new List<String>.generate(20, (i) => "Item $i"), )); } class MyApp extends StatelessWidget { final List<String> items; MyApp({Key key, @required this.items}) : super(key: key); @override Widget build(BuildContext context) { final title = 'Long List'; return new MaterialApp( title: title, home: new Scaffold( appBar: new AppBar( title: new Text(title), ), body: new ListView.builder( itemCount: items.length, itemBuilder: (context, index) { final item = items[index]; return new Dismissible( // Each Dismissible must contain a Key. Keys allow Flutter to // uniquely identify Widgets. key: new Key(item), // We also need to provide a function that will tell our app // what to do after an item has been swiped away. onDismissed: (direction) { items.removeAt(index); Scaffold.of(context).showSnackBar( new SnackBar(content: new Text("$item dismissed"))); }, // Show a red background as the item is swiped away background: new Container(color: Colors.red), child: new ListTile(title: new Text('$item')), ); }, ), // new ListView.builder( // itemCount: items.length, // itemBuilder: (context, index) { // return new ListTile( // title: new Text('${items[index]}'), // ); // }, // ), ), ); } }
定义参数Listview cell的点击事件是通过touch实现的
import 'package:flutter/material.dart'; void main() { runApp(SampleApp()); } class SampleApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Sample App', theme: ThemeData( primarySwatch: Colors.blue, ), home: SampleAppPage(), ); } } class SampleAppPage extends StatefulWidget { SampleAppPage({Key key}) : super(key: key); @override _SampleAppPageState createState() => _SampleAppPageState(); } class _SampleAppPageState extends State<SampleAppPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Sample App"), ), body: ListView(children: _getListData()), ); } _getListData() { List<Widget> widgets = []; for (int i = 0; i < 100; i++) { widgets.add(GestureDetector( child: Padding( padding: EdgeInsets.all(10.0), child: Text("Row $i"), ), onTap: () { print('row tapped ${i}'); }, )); } return widgets; } }