文档目录

列表组件

列表布局是我们项目开发中最常用的一种布局方式。Flutter中我们可以通过ListView来定义列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有以下分类：

垂直列表
垂直图文列表
水平列表
动态列表

列表组件常用参数：

名称	类型	说明
scrollDirection	Axis	Axis.horizontal水平列表Axis.vertical垂直列表
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件反向排序
children	List	列表元素

垂直列表

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: const <Widget>[
        ListTile(
          leading: Icon(Icons.map), 
          title: Text('Map'),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.photo_album),
          title: Text('Album'),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.phone),
          title: Text('Phone'),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.phone),
          title: Text('Phone'),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.phone),
          title: Text('Phone'),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.phone),
          title: Text('Phone'),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.phone),
          title: Text('Phone'),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.phone),
          title: Text('Phone'),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.phone),
          title: Text('Phone'),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.phone),
          title: Text('Phone'),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.gamepad_sharp),
          title: Text('Phone'),
        )

      ],
    );
  }
}

垂直图文列表

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Image.network("https://www.itying.com/images/flutter/1.png"),
          title: const Text('华北黄淮高温雨今起强势登场'),
          subtitle: const Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
        ),
        const Divider(),
        ListTile(
        leading: Image.network("https://www.itying.com/images/flutter/2.png"),
        title: const Text('保监局50天开32罚单 “断供”违规资金为房市降温'),
        subtitle: const Text("中国天气网讯 保监局50天开32罚单 “断供”违规资金为房市降温"),
        ),
        const Divider(),
        ListTile(
          title: const Text('华北黄淮高温雨今起强势登场'),
          subtitle: const Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
          trailing: Image.network("https://www.itying.com/images/flutter/3.png")
        ),
        const Divider(),
        ListTile(
          leading: Image.network("https://www.itying.com/images/flutter/4.png"),
          title: const Text('普京现身俄海军节阅兵：乘艇检阅军舰'),
        ),
        const Divider(),
        ListTile(
          leading: Image.network("https://www.itying.com/images/flutter/5.png"),
          title: const Text('鸿星尔克捐1个亿帮助困难残疾群体 网友：企业有担当'),
        ),
        const Divider(),
        ListTile(
          leading: Image.network("https://www.itying.com/images/flutter/6.png"),
          title: const Text('行业冥灯？老罗最好祈祷苹果的AR能成'),
        ),
        const Divider(),

      ],
    );
  }
}

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(10),
      children: <Widget>[
        Image.network("https://www.itying.com/images/flutter/1.png"),
        Container(
          height: 44,
          padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
          child: const Text(
            '我是一个标题',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 18,
            ),
          ),
        ),
        Image.network("https://www.itying.com/images/flutter/2.png"),
        Container(
          height: 44,
          padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
          child: const Text(
            '我是一个标题',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 18,
            ),
          ),
        ),
        Image.network("https://www.itying.com/images/flutter/3.png"),
        Container(
          height: 44,
          padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
          child: const Text(
            '我是一个标题',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 18,
            ),
          ),
        ),
        Image.network("https://www.itying.com/images/flutter/4.png"),
        Container(
          height: 44,
          padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
          child: const Text(
            '我是一个标题',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 18,
            ),
          ),
        ),
        Image.network("https://www.itying.com/images/flutter/1.png"),
        Container(
          height: 44,
          padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
          child: const Text(
            '我是一个标题',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 18,
            ),
          ),
        ),
        Image.network("https://www.itying.com/images/flutter/2.png"),
        Container(
          height: 44,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
          child: const Text(
            '我是一个标题',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 18,
            ),
          ),
        ),
        Image.network("https://www.itying.com/images/flutter/3.png"),
        Container(
          height: 44,
          padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
          child: const Text(
            '我是一个标题',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 18,
            ),
          ),
        ),
        Image.network("https://www.itying.com/images/flutter/1.png"),
        Image.network("https://www.itying.com/images/flutter/2.png"),
        Image.network("https://www.itying.com/images/flutter/3.png"),
      ],
    );
  }
}

水平列表，可以左右滑动

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 180,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 180,
            color: Colors.red,
          ),
          Container(
            width: 180.0,
            color: Colors.orange,
            child: Column(
              children: <Widget>[
                Image.network("https://www.itying.com/images/flutter/1.png"),
                const Text('我是一个文本')
              ],
            ),
          ),
          Container(
            width: 180.0,
            color: Colors.blue,
          ),
          Container(
            width: 180.0,
            color: Colors.deepOrange,
          ),
          Container(
            width: 180.0,
            color: Colors.deepPurpleAccent,
          ),
        ],
      ),
    );
  }
}

ListView动态列表组件以及循环动态数据

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  List<Widget> _initListData(){
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add( ListTile(
          title: Text('我是列表---${i + 1}'),
        )
      );
      // 如果不是最后一条数据，就添加分割线
      if (i < 19){
        list.add(const Divider());
      }
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
        // scrollDirection: Axis.horizontal,
        children: _initListData(),
      );
  }
}

map实现动态列表

// 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 'listData.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
   MyApp({Key? key}) : super(key: key){
    print(listData);
   }
   List<Widget> _getData() {
    var tempList = listData.map((value) {
      return ListTile(
        leading: Image.network(value['imageUrl']),
        title: Text(value['title']),
        subtitle: Text(value['author']),
      );
    });
    return tempList.toList();
  }


  @override
  Widget build(BuildContext context) {
    return ListView(
        // scrollDirection: Axis.horizontal,
        children: _getData(),
      );
  }
}

ListView.builder实现动态列表

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  List<Widget> list = [];
  MyApp({Key? key}) : super(key: key){
    for (var i = 0; i < listData.length; i++) {
      list.add(ListTile(
        title: Text(listData[i]["title"]),
        subtitle: Text(listData[i]["author"]),
        leading: Image.network(listData[i]["imageUrl"]),
      ));
    }
  }



  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: list.length,
      itemBuilder: (context, index) {
        return list[index];
      },
    );
  }
}

// 第二种写法
import 'package:flutter/material.dart';
import 'listData.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: listData.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(listData[index]["title"]),
          subtitle: Text(listData[index]["author"]),
          leading: Image.network(listData[index]["imageUrl"]),
        );
      },
    );
  }
}

results matching ""

No results matching ""