LIstView

ListView 基本列表：

child: ListView(
    children: [
        ListTile(
            // leading 可以插入图片 或者icon
            leading: Icon(
                Icons.access_alarm,
            ),
            title: Text('中华名族伟大复兴'),
            subtitle: Text('中国人民最强'),
            trailing: Icon(
                Icons.sanitizer,
            ),
        ),
        ListTile(
            leading: Image.asset(
                'images/pexels-kira-schwarz-6922718.jpg',
                fit: BoxFit.cover,
            ),
            title: Text('中华名族伟大复兴'),
            subtitle: Text('中国人民最强'),
            trailing: Icon(
                Icons.sanitizer,
            ),
        ),
    ],
),

垂直列表以及水平列表：

Container(
    height: 180,
    child: ListView(
        scrollDirection: Axis.horizontal, // 默认垂直列表， horizontal表示水平列表
        children: [
            Container(
                width: 180,
                height: 180,
                color: Colors.pink,
            ),
            Container(
                width: 180,
                height: 180,
                color: Colors.blue,
            ),
            Container(
                width: 180,
                height: 180,
                color: Colors.orange,
            ),
            Container(
                width: 180,
                height: 180,
                color: Colors.yellow,
            ),
            Container(
                width: 180,
                height: 180,
                color: Colors.teal,
            ),
            Container(
                width: 180,
                height: 180,
                color: Colors.cyan,
            ),
        ],
    ),
);

动态列表：

import 'package:flutter/material.dart';
import 'data/newList.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                appBar: AppBar(
                    title: Text('Welcome to Flutter'),
                ),
                body: HomeContent(),
            ),
            theme: ThemeData(
                primaryColor: Colors.pink,
            ),
        );
    }
}
class HomeContent extends StatelessWidget {
    List<Widget> _getData(){
        var tempList = listData.map((e){
            return ListTile(
                leading: Image.network(
                    e['imageUrl']
                ),
                title: Text(e['title']),
                subtitle: Text(e['author']),
            );
        });
        return tempList.toList();
    }
    @override
    Widget build(BuildContext context) {
        return ListView(
            children: this._getData(),
        );
    }
}
// data
List listData = [
  {
    "title": "Candy Shop",
    "author": "Mohamed Chahin",
    "imageUrl": "https://images.pexels.com/photos/6569318/pexels-photo-6569318.jpeg?cs=srgb&dl=pexels-david-underland-6569318.jpg&fm=jpg",
  },
  {
    "title": "Candy Shop1",
    "author": "Mohamed Chahin",
    "imageUrl": "https://images.pexels.com/photos/6922718/pexels-photo-6922718.jpeg?cs=srgb&dl=pexels-kira-schwarz-6922718.jpg&fm=jpg",
  },
  {
    "title": "Candy Shop2",
    "author": "Mohamed Chahin",
    "imageUrl": "https://images.pexels.com/photos/5994821/pexels-photo-5994821.jpeg?cs=srgb&dl=pexels-matteus-silva-de-oliveira-5994821.jpg&fm=jpg",
  },
  {
    "title": "Candy Shop3",
    "author": "Mohamed Chahin",
    "imageUrl": "https://images.pexels.com/photos/7173820/pexels-photo-7173820.jpeg?cs=srgb&dl=pexels-lisa-fotios-7173820.jpg&fm=jpg",
  },
  {
    "title": "Candy Shop4",
    "author": "Mohamed Chahin",
    "imageUrl": "https://images.pexels.com/photos/7042988/pexels-photo-7042988.jpeg?cs=srgb&dl=pexels-jc-siller-7042988.jpg&fm=jpg",
  },
  {
    "title": "Candy Shop5",
    "author": "Mohamed Chahin",
    "imageUrl": "https://images.pexels.com/photos/7137430/pexels-photo-7137430.jpeg?cs=srgb&dl=pexels-monica-turlui-7137430.jpg&fm=jpg",
  },
  {
    "title": "Candy Shop6",
    "author": "Mohamed Chahin",
    "imageUrl": "https://images.pexels.com/photos/7137430/pexels-photo-7137430.jpeg?cs=srgb&dl=pexels-monica-turlui-7137430.jpg&fm=jpg",
  },
];
// 方式二， ListView.builder 遍历
import 'package:flutter/material.dart';
import 'data/newList.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                appBar: AppBar(
                    title: Text('Welcome to Flutter'),
                ),
                body: HomeContent(),
            ),
            theme: ThemeData(
                primaryColor: Colors.pink,
            ),
        );
    }
}
class HomeContent extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        // ListView.builder 遍历
        return ListView.builder(
            itemCount: listData.length, // 数据
            itemBuilder: (context, index){
                return ListTile(
                    title: Text(listData[index]["title"]),
                    subtitle: Text(listData[index]["author"]),
                    trailing: Image.network(listData[index]['imageUrl']),
                );
            },
        );
    }
}