Flutter中ListView用法

移动开发 2023-04-09 18:21:30 阅读次数: 0

ListView加载自带图标和自定义图标

Flutter SDK自带的有很多图标，引用Icons类在Icons属性后点之后便会有很多自带图标可以引用。

如图布局完整代码如下：

import 'package:flutter/material.dart';
import 'package:flutter_demo/iconFonts.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: const <Widget>[
        ListTile(
          leading: Icon(Icons.home),
          title: Text("首页"),
        ),
        Divider(),
        ListTile(
          leading: Icon(
            Icons.assignment,
            color: Colors.red,
          ),
          title: Text("全部订单"),
        ),
        Divider(),
        ListTile(
          leading: Icon(
            Icons.payment,
            color: Colors.green,
          ),
          title: Text("待付款"),
        ),
        Divider(),
        ListTile(
          leading: Icon(
            Icons.favorite,
            color: Colors.lightGreen,
          ),
          title: Text("我的收藏"),
          trailing: Icon(Icons.chevron_right_sharp),
        ),
        Divider(),
        ListTile(
          leading: Icon(
            Icons.people,
            color: Colors.black54,
          ),
          title: Text("在线客服"),
          trailing: Icon(Icons.chevron_right_sharp),
        ),
        Divider(),
        ListTile(
          leading: Icon(
            IconFonts.gouwuchekong,
            color: Colors.orange,
          ),
          title: Text("购物车"),
          trailing: Icon(Icons.chevron_right_sharp),
        ),
        Divider(),
      ],
    );
  }
}

 自定义图标用法差不多，首先在矢量图标库下载代码

 下载后导入字体文件和图标json文件

然后加入字体文件配置代码

flutter:
  uses-material-design: true
  assets:
    - images/2.0x/pic1.png
  fonts:
    - family: myIcon
      fonts:
        - asset: fonts/iconfont.ttf
    - family: iconWeixin
      fonts:
        - asset: fonts/weixin.ttf

 然后新建自定义图标类

import 'package:flutter/material.dart';

class IconFonts {
  static const IconData gouwuchekong =
      IconData(0xe66e, fontFamily: "myIcon");
  static const IconData zhiwen = IconData(0xe6ae, fontFamily: "myIcon");
  static const IconData dingwei = IconData(0xe69b, fontFamily: "myIcon");
  static const IconData weixin = IconData(0xf0106, fontFamily: "iconWeixin");
  static const IconData yingshi = IconData(0xe694, fontFamily: "iconWeixin");
}

最后依赖类后直接通过IconFonts.gouwuchekong,直接引用就可以了

ListView加载网络图片和布局

完整代码：

扫描二维码关注公众号，回复： 14813976 查看本文章 
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(10),//四周边距
      children: <Widget>[
        ListTile(
          leading: Image.network("https://www.itying.com/images/flutter/1.png"),
          title: const Text("罕见！中央巡视为何点名足球腐败？"),
        ),
        const Divider(),
        ListTile(
          leading: Image.network("https://www.itying.com/images/flutter/2.png"),
          title: const Text("罕见！中央巡视为何点名足球腐败？"),
        ),
        const Divider(),
        ListTile(
          leading: Image.network("https://www.itying.com/images/flutter/3.png"),//主图
          title: const Text("罕见！中央巡视为何点名足球腐败？"),//主标题
          subtitle: const Text(//副标题（内容）
              "中央巡视是党章规定的一项重要制度，是加强党的建设的重要举措，是从严治党、维护党纪的重要手段，是加强党内监督的重要形式。"),
          trailing:
              Image.network("https://www.itying.com/images/flutter/4.png"),//尾图
        ),
        const Divider(),
        ListTile(
          title: const Text("罕见！中央巡视为何点名足球腐败？"),
          trailing:
              Image.network("https://www.itying.com/images/flutter/5.png"),
        ),
        const Divider(),
      ],
    );
  }
}

 ListView默认纵向布局

完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({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(
          padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
          height: 40,
          child: const Text(
            "图一",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 22),
          ),
        ),
        Image.network("https://www.itying.com/images/flutter/2.png"),
        Container(
          padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
          height: 40,
          child: const Text(
            "图二",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 22),
          ),
        ),
        Image.network("https://www.itying.com/images/flutter/3.png"),
        Container(
          padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
          height: 40,
          child: const Text(
            "图三",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 22),
          ),
        ),
        Image.network("https://www.itying.com/images/flutter/4.png"),
        Container(
          padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
          height: 40,
          child: const Text(
            "图四",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 22),
          ),
        ),
        Image.network("https://www.itying.com/images/flutter/5.png"),
        Container(
          padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
          height: 40,
          child: const Text(
            "图五",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 22),
          ),
        ),
        Image.network("https://www.itying.com/images/flutter/6.png"),
        Container(
          padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
          height: 40,
          child: const Text(
            "图六",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 22),
          ),
        ),
      ],
    );
  }
}

ListView横向布局

 完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 160,
      child: ListView(
        scrollDirection: Axis.horizontal, //水平列表
        padding: const EdgeInsets.all(10),
        children: <Widget>[
          Container(
            width: 160,
            decoration: const BoxDecoration(color: Colors.white),
            child: Column(
              children: [
                SizedBox(
                  height: 110,
                  child: Image.network(
                    "https://www.itying.com/images/flutter/1.png",
                    fit: BoxFit.cover,
                  ),
                ),
                const Text("图一"),
              ],
            ),
          ),
          Container(
            width: 160,
            decoration: const BoxDecoration(color: Colors.white),
            child: Column(
              children: [
                SizedBox(
                  height: 110,
                  child: Image.network(
                    "https://www.itying.com/images/flutter/2.png",
                    fit: BoxFit.cover,
                  ),
                ),
                const Text("图二"),
              ],
            ),
          ),
          Container(
            width: 160,
            decoration: const BoxDecoration(color: Colors.white),
            child: Column(
              children: [
                SizedBox(
                  height: 110,
                  child: Image.network(
                    "https://www.itying.com/images/flutter/3.png",
                    fit: BoxFit.cover,
                  ),
                ),
                const Text("图三"),
              ],
            ),
          ),
          Container(
            width: 160,
            decoration: const BoxDecoration(color: Colors.white),
            child: Column(
              children: [
                SizedBox(
                  height: 110,
                  child: Image.network(
                    "https://www.itying.com/images/flutter/4.png",
                    fit: BoxFit.cover,
                  ),
                ),
                const Text("图四"),
              ],
            ),
          ),
          Container(
            width: 160,
            decoration: const BoxDecoration(color: Colors.white),
            child: Column(
              children: [
                SizedBox(
                  height: 110,
                  child: Image.network(
                    "https://www.itying.com/images/flutter/5.png",
                    fit: BoxFit.cover,
                  ),
                ),
                const Text("图五"),
              ],
            ),
          ),
          Container(
            width: 160,
            decoration: const BoxDecoration(color: Colors.white),
            child: Column(
              children: [
                SizedBox(
                  height: 110,
                  child: Image.network(
                    "https://www.itying.com/images/flutter/6.png",
                    fit: BoxFit.cover,
                  ),
                ),
                const Text("图六"),
              ],
            ),
          ),
          Container(
            width: 160,
            decoration: const BoxDecoration(color: Colors.white),
            child: Column(
              children: [
                SizedBox(
                  height: 110,
                  child: Image.network(
                    "https://www.itying.com/images/flutter/7.png",
                    fit: BoxFit.cover,
                  ),
                ),
                const Text("图七"),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

ListView动态加载数据

 自定义数据

List listData = [
  {
    "title": "图一",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/1.png",
  },
  {
    "title": "图二",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/2.png",
  },
  {
    "title": "图三",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/3.png",
  },
  {
    "title": "图四",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/4.png",
  },
  {
    "title": "图五",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/5.png",
  },
  {
    "title": "图六",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/6.png",
  },
];

引入自定义数据

import 'res/listData.dart';

完整代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  //第一种方法
  /* List<Widget> _list() {
    List<Widget> list = [];
    for (var i = 0; i < listData.length; i++) {
      list.add(ListTile(
        leading: Image.network("${listData[i]["imageUrl"]}"),
        title: Text("${listData[i]["title"]}"),
        subtitle: Text("${listData[i]["author"]}"),
      ));
    }
    return list;
  }*/

  //第二种方法
  List<Widget> _list() {
    var list = listData.map((value) {
      return ListTile(
        leading: Image.network("${value["imageUrl"]}"),
        title: Text("${value["title"]}"),
        subtitle: Text("${value["author"]}"),
      );
    });
    return list.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _list(),
    );
  }
}

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

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

猜你喜欢

转载自blog.csdn.net/juer2017/article/details/129821044
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022