Flutter（四）：ListView

1 垂直列表

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // MaterialApp 作为顶层组件
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ListView(
        shrinkWrap: true,
        padding: const EdgeInsets.all(20.0),
        children: <Widget>[
          const Text(
            'I\'m dedicating every day to you',
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          const Text('Domestic life was never quite my style'),
          const Text('When you smile, you knock me out, I fall apart'),
          const Text('And I thought I was so smart'),
        ],
      ),
    );
  }
}

• 结合 ListTile

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // MaterialApp 作为顶层组件
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ListView(
        shrinkWrap: true,
        padding: const EdgeInsets.all(20.0),
        children: <Widget>[
          ListTile(
            title: Text(
              'Asset 变体（variant）',
              style: TextStyle(
                fontSize: 28,
              ),
            ),
            subtitle: Text(
                '在选择匹配当前设备分辨率的图片时，Flutter使用asset变体; 见下文。将来，这种机制可能会扩展到本地化、阅读提示等方面。'),
          ),
          ListTile(
            title: Text(
              'Asset 变体（variant）',
              style: TextStyle(
                fontSize: 28,
              ),
            ),
            subtitle: Text(
                '在选择匹配当前设备分辨率的图片时，Flutter使用asset变体; 见下文。将来，这种机制可能会扩展到本地化、阅读提示等方面。'),
          ),
          ListTile(
            title: Text(
              'Asset 变体（variant）',
              style: TextStyle(
                fontSize: 28,
              ),
            ),
            subtitle: Text(
                '在选择匹配当前设备分辨率的图片时，Flutter使用asset变体; 见下文。将来，这种机制可能会扩展到本地化、阅读提示等方面。'),
          ),
        ],
      ),
    );
  }
}

• 新增图标，leading、trailing

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ListView(
        shrinkWrap: true,
        padding: const EdgeInsets.all(20.0),
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.save, size: 30), // 前置图标
            title: Text(
              'Asset 变体（variant）',
              style: TextStyle(
                fontSize: 14,
              ),
            ),
            subtitle: Text(
                '在选择匹配当前设备分辨率的图片时，Flutter使用asset变体; 见下文。将来，这种机制可能会扩展到本地化、阅读提示等方面。'),
          ),
          ListTile(
            title: Text(
              'Asset 变体（variant）',
              style: TextStyle(
                fontSize: 14,
              ),
            ),
            subtitle: Text(
                '在选择匹配当前设备分辨率的图片时，Flutter使用asset变体; 见下文。将来，这种机制可能会扩展到本地化、阅读提示等方面。'),
            trailing: Icon(Icons.settings, size: 30), // 后置图标
          ),
        ],
      ),
    );
  }
}

效果

也可以设置图片：

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ListView(
        shrinkWrap: true,
        padding: const EdgeInsets.all(20.0),
        children: <Widget>[
          ListTile(
            leading: Image.asset(
              'images/a.jpeg',
              // fit: BoxFit.cover,
              // width: 75,
              // height: 100,
            ), // 前置图标
            title: Text(
              'Asset 变体（variant）',
              style: TextStyle(
                fontSize: 14,
              ),
            ),
            subtitle: Text(
                '在选择匹配当前设备分辨率的图片时，Flutter使用asset变体; 见下文。将来，这种机制可能会扩展到本地化、阅读提示等方面。'),
          ),
          ListTile(
            title: Text(
              'Asset 变体（variant）',
              style: TextStyle(
                fontSize: 14,
              ),
            ),
            subtitle: Text(
                '在选择匹配当前设备分辨率的图片时，Flutter使用asset变体; 见下文。将来，这种机制可能会扩展到本地化、阅读提示等方面。'),
            trailing: Icon(Icons.settings, size: 30), // 后置图标
          ),
        ],
      ),
    );
  }
}

• 综合扩展

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 180,
      child: ListView(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            height: 180,
            width: 180,
            color: Colors.yellow,
            margin: EdgeInsets.all(8),
            child: ListView(
              children: <Widget>[
                Text('这是文本组件'),
                Image.asset(
                  'images/a.jpeg',
                  width: 80,
                  height: 120,
                  alignment: Alignment.topLeft,
                ),
              ],
            ),
          ),
          Container(
            height: 180,
            width: 180,
            color: Colors.yellow,
            margin: EdgeInsets.all(8),
            child: ListView(
              children: <Widget>[
                Text('这是文本组件'),
                Image.asset(
                  'images/a.jpeg',
                  width: 80,
                  height: 120,
                  alignment: Alignment.topLeft,
                ),
              ],
            ),
          ),
          Container(
            height: 180,
            width: 180,
            color: Colors.yellow,
            margin: EdgeInsets.all(8),
            child: ListView(
              children: <Widget>[
                Text('这是文本组件'),
                Image.asset(
                  'images/a.jpeg',
                  width: 80,
                  height: 120,
                  alignment: Alignment.topLeft,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

效果

2 动态列表

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  List<Widget> _getList() {
    List<Widget> list = new List();
    for (var i = 0; i < 20; i++) {
      list.add(
        Container(
          height: 180,
          width: 180,
          color: Colors.yellow,
          margin: EdgeInsets.all(8),
          child: ListView(
            children: <Widget>[
              Text('这是文本组件'),
              Image.asset(
                'images/a.jpeg',
                width: 80,
                height: 120,
                alignment: Alignment.topLeft,
              ),
            ],
          ),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ListView(
        scrollDirection: Axis.vertical,
        children: this._getList(),
      ),
    );
  }
}

效果

• 通过引入外部数据

lib/res/listData.dart

  List listData=[
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/1.png',
      },
       {
          "title": 'Childhood in a picture',
          "author": 'Google',
          "imageUrl": 'https://www.itying.com/images/flutter/2.png',
      },
      {
          "title": 'Alibaba Shop',
          "author": 'Alibaba',
          "imageUrl": 'https://www.itying.com/images/flutter/3.png',
      },
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/4.png',
      },
       {
          "title": 'Tornado',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/5.png',
      },
      {
          "title": 'Undo',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/6.png',
      },
      {
          "title": 'white-dragon',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/7.png',
      }      

  ];

import 'package:flutter/material.dart';

import 'res/listData.dart';

void main() {
  runApp(new MyApp());
}

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  List<Widget> _getList() {
    var data = listData.map((val) {
      return ListTile(
        title: Text(val['title']),
        subtitle: Text(val['author']),
        leading: Image.network(val['imageUrl']),
      );
    });
    return data.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ListView(
        scrollDirection: Axis.vertical,
        children: this._getList(),
      ),
    );
  }
}

• 使用 ListView.builder 实现

import 'package:flutter/material.dart';

import 'res/listData.dart';

void main() {
  runApp(new MyApp());
}

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  Widget _getList(context, index) {
    return ListTile(
      title: Text(listData[index]['title']),
      subtitle: Text(listData[index]['author']),
      leading: Image.network(listData[index]['imageUrl']),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ListView.builder(
        itemCount: listData.length,
        itemBuilder: this._getList,
      ),
    );
  }
}