Flutte ListView 列表组件

发布于：2025-05-30 ⋅ 阅读:(19) ⋅ 点赞:(0)

目录

1、垂直列表

         1.1 实现用户中心的垂直列表

2、垂直图文列表

        2.1 动态配置列表

        2.2 for循环生成一个动态列表

        2.3 ListView.builder配置列表

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

1、垂直列表
2、垂直图文列表
3、水平列表
4、动态列表

1、垂直列表

import 'package:flutter/material.dart';
import 'package:wyze_app_live/test1/test11.dart';
import 'package:wyze_app_live/test2/main.dart';

void main() {
  runApp(MyTestApp());
}

class MyTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(title: Text("App")),
        body: MyTestHomePage(),
      ),
    );
  }
}

//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(title: Text("我是一个列表")),
        Divider(),
        ListTile(title: Text("我是一个列表")),
        Divider(),
        ListTile(title: Text("我是一个列表")),
        Divider(),
        ListTile(title: Text("我是一个列表")),
        Divider(),
        ListTile(title: Text("我是一个列表")),
        Divider(),
        ListTile(title: Text("我是一个列表")),
      ],
    );
  }
}

         1.1 实现用户中心的垂直列表

import 'package:flutter/material.dart';
import 'package:wyze_app_live/test1/test11.dart';
import 'package:wyze_app_live/test2/main.dart';

void main() {
  runApp(MyTestApp());
}

class MyTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(title: Text("App")),
        body: MyTestHomePage(),
      ),
    );
  }
}

//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.home, color: Colors.red),
          title: Text("首页"),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.dangerous, color: Colors.yellow),
          title: Text("全部订单"),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.h_mobiledata),
          title: Text("我的收藏"),
          trailing: Icon(Icons.chevron_right),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.wallet),
          title: Text("在线客服"),
          trailing: Icon(Icons.chevron_right),
        ),
      ],
    );
  }
}

2、垂直图文列表

import 'package:flutter/material.dart';
import 'package:wyze_app_live/test1/test11.dart';
import 'package:wyze_app_live/test2/main.dart';

void main() {
  runApp(MyTestApp());
}

class MyTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(title: Text("App")),
        body: MyTestHomePage(),
      ),
    );
  }
}

//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      // padding: EdgeInsets.all(10),
      padding: EdgeInsets.fromLTRB(0,40,0,0),
      children: <Widget>[
        ListTile(
          leading: Image.network("https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/26/PHOT5Lpc218n1dZ8adgabOGU250526_1000x2000.jpg"),
          title: Text("初夏乡村田园色块分明"),
          subtitle: Text("甘肃省酒泉市肃州区银达镇，多彩的田园、农房、道路和水库相映成景"),
        ),
        Divider(),
        ListTile(
          leading: Image.network("https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg"),
          title: Text("初夏乡村田园色块分明"),
          subtitle: Text("甘肃省酒泉市肃州区银达镇，多彩的田园、农房、道路和水库相映成景"),
        ),
        Divider(),
        ListTile(
          leading: Image.network("https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/26/PHOT5Lpc218n1dZ8adgabOGU250526_1000x2000.jpg"),
          title: Text("初夏乡村田园色块分明"),
          subtitle: Text("甘肃省酒泉市肃州区银达镇，多彩的田园、农房、道路和水库相映成景"),
          trailing: Image.network("https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg"),
        ),
        Divider(),
        ListTile(
          title: Text("初夏乡村田园色块分明"),
          subtitle: Text("甘肃省酒泉市肃州区银达镇，多彩的田园、农房、道路和水库相映成景"),
          trailing: Image.network("https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg"),
        ),
        Divider(),
      ],
    );
  }
}

        2.1 动态配置列表

import 'package:flutter/material.dart';
import 'package:wyze_app_live/test1/test11.dart';
import 'package:wyze_app_live/test2/main.dart';

void main() {
  runApp(MyTestApp());
}

class MyTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(title: Text("App")),
        body: MyTestHomePage(),
      ),
    );
  }
}

//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {
  
  //自定义方法
  List<Widget> initList() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(
        ListTile(
          leading: Image.network(
            "https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg",
          ),
          title: Text("初夏乡村田园色块分明"),
          subtitle: Text("甘肃省酒泉市肃州区银达镇，多彩的田园、农房、道路和水库相映成景"),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      // padding: EdgeInsets.all(10),
      padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
      children: initList()
    );
  }
}

        2.2 for循环生成一个动态列表

import 'package:flutter/material.dart';

void main() {
  runApp(MyTestApp());
}

class MyTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow), 
      home: Scaffold(
        appBar: AppBar(title: Text("App")),
        body: MyTestHomePage(),
      ),
    );
  }
}

//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {
  //自定义方法
  List<Widget> initList() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(
        ListTile(
          leading: Image.network(
            "https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg",
          ),
          title: Text("初夏乡村田园色块分明"),
          subtitle: Text("甘肃省酒泉市肃州区银达镇，多彩的田园、农房、道路和水库相映成景"),
        ),
      );
    }
    return list;
  }
  List list = [
    {
      "title": "Candy Shop",
      "imageUrl":
      "https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg",
      "author": "Mohamed Chahin",
    },
    {
      "title": "Candy Shop",
      "imageUrl":
      "https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg",
      "author": "Mohamed Chahin",
    },
  ];
  //自定义方法 map方式遍历
  List<Widget> initList1() {
    //map方式遍历
    var template = list.map((value) {
      return ListTile(
        leading: Image.network("${value["imageUrl"]}"),
        title: Text("${value["title"]}"),
        subtitle: Text("${value["author"]}"),
      );
    });
    return template.toList();
  }

  //自定义方法 for方式遍历
  List<Widget> initList2() {
    List<Widget> template = [];
    for (var i = 0; i < list.length; i++) {
      template.add(
        ListTile(
          leading: Image.network("${list[i]["imageUrl"]}"),
          title: Text("${list[i]["title"]}"),
          subtitle: Text("${list[i]["author"]}"),
        ),
      );
    }
    return template;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      // padding: EdgeInsets.all(10),
      padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
      children: initList2(),
    );
  }
}

        2.3 ListView.builder配置列表

import 'package:flutter/material.dart';

void main() {
  runApp(MyTestApp());
}

class MyTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(title: Text("App")),
        body: MyTestHomePage(),
      ),
    );
  }
}

//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {
  List list = [
    {
      "title": "Candy Shop",
      "imageUrl":
          "https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg",
      "author": "Mohamed Chahin",
    },
    {
      "title": "Candy Shop1",
      "imageUrl":
          "https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg",
      "author": "Mohamed Chahin",
    },
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: list.length,//循环的次数
      itemBuilder: (context, index) { //itemBuilder
        return ListTile( //item Info
          leading: Image.network(list[index]["imageUrl"]),
          title: Text(list[index]["title"]),
          subtitle: Text(list[index]["author"]),
        );
      },
    );
  }
}

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布