flutter ListView

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new ListDemo(),
    );
  }
}

class ListDemo extends StatefulWidget {
  @override
  _ListDemoState createState() {
    return new _ListDemoState();
  }
}


class _ListDemoState extends State<ListDemo> {
  Widget buildListTitle(BuildContext context,String item){
    return new ListTile(
      isThreeLine: true,
      dense: false,
      leading: new CircleAvatar(child: new Text(item),),
      title: new Text('子item的标题'),
      subtitle: new Text('子item的内容'),
      trailing: new Icon(Icons.arrow_right,color: Colors.green,),
    );
  }

  @override
  Widget build(BuildContext context) {
    List<String> items = <String>['A','B','C','D','E','F','G','H','I','J'];
    Iterable<Widget> listTitles = items.map((String item){
      return buildListTitle(context, item);
    });
    listTitles = ListTile.divideTiles(context: context,tiles: listTitles);
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('ListViewDemo'),
      ),
      body: new Scrollbar(
          child: new ListView(
            children: listTitles.toList(),
          ),
      ),
    );
  }
}

效果图:

EEF3BDA2-F604-4E7E-A2BE-AAA09BEE46

添加触控事件

首先创建要进入的页面 SecondPage.dart 的代码:

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

class SecondPage extends StatefulWidget {
  SecondPage({Key key, this.title}):super(key:key);

  final String title;

  @override
  State<StatefulWidget> createState() {
    return new _SecondPageState(title: title);
  }
}

class _SecondPageState extends State<SecondPage> {
  _SecondPageState({Key key,this.title});
  
  final String title;
  
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('第二页 $title'),
      ),
    );
  }
}

main.dart 代码:

import 'package:flutter/material.dart';
import 'SecondPage.dart';

void main() => runApp(new MyApp());

var clickText;

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new ListDemo(),
      routes: <String,WidgetBuilder>{
        '/second_page': (BuildContext content){
          return new SecondPage(title: clickText,);
        }
      },
    );
  }
}

class ListDemo extends StatefulWidget {
  @override
  _ListDemoState createState() {
    return new _ListDemoState();
  }
}


class _ListDemoState extends State<ListDemo> {
  Widget buildListTitle(BuildContext context,String item){
    return new ListTile(
      isThreeLine: true,
      dense: false,
      leading: new CircleAvatar(child: new Text(item),),
      title: new Text('子item的标题'),
      subtitle: new Text('子item的内容'),
      trailing: new Icon(Icons.arrow_right,color: Colors.green,),
      onTap: (){
        print('ListView点击事件');
        clickText = item;
        Navigator.of(context).pushNamed('/second_page');
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    List<String> items = <String>['A','B','C','D','E','F','G','H','I','J'];
    Iterable<Widget> listTitles = items.map((String item){
      return buildListTitle(context, item);
    });
    listTitles = ListTile.divideTiles(context: context,tiles: listTitles);
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('ListViewDemo'),
      ),
      body: new Scrollbar(
          child: new ListView(
            children: listTitles.toList(),
          ),
      ),
    );
  }
}

点击后进入的效果图:

82D9860C-8136-4B7E-A80D-1CCB30954F2A


小知识点

SecondPage({Key key, this.title}):super(key:key);

SecondPage({Key key, @required this.title}):super(key:key);

上面的两个写法有什么区别呢?
最下面的写法明显多了 @required,意思为必须。
还要需要引入 foundation.dart :

import 'package:flutter/foundation.dart';

那么最上面的意思就是不是必须的,就是可选的。

当我们调用 new SecondPage 方法时,
必须的就会自动补完提示:

new SecondPage(title: null,)

而可选的 则不会提示:

new SecondPage()

就是这样的区别。