ListView usage in Flutter

Mobile 2023-04-09 19:30:40 views: null

ListView loads its own icons and custom icons

The Flutter SDK comes with a lot of icons, and after referring to the Icons class, after clicking the Icons property, there will be many built-in icons that can be referenced.

The complete code for the layout as shown in the figure is as follows:

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(),
      ],
    );
  }
}

 The usage of custom icons is similar, first download the code in the vector icon library

 Import font files and icon json files after downloading

Then add the font file configuration code

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

 Then create a new custom icon class

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");
}

Finally, after relying on the class, you can directly refer to it through IconFonts.gouwuchekong

ListView loads network pictures and layouts

Full code:

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 default vertical layout

full code

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 horizontal layout

 full code

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 dynamically loads data

 custom data

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",
  },
];

Bring in custom data

import 'res/listData.dart';

full code

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"]),
        );
      },
    );
  }
}

Guess you like

Origin blog.csdn.net/juer2017/article/details/129821044
Recommended
Ranking
ElasticSearch-- data modeling best practices
Permission Maintenance - Shadow User Backdoor
Refactor the code using MVP mode
Quantitative investment-fundamental model-PVC multi-factor model
Spark Big Data Processing Lecture Notes 3.2 Mastering RDD Operators
Blazor page components (2)
Erlernen von Kenntnissen zur Android-Entwicklung – Kodierung, Verschlüsselung, Hash, Serialisierung und Zeichensätze
About Qi high in JAVA study notes SORM summary detailed personal explanation
Will you calculate the accuracy of the rope displacement sensor in the measurement?
OPENJTAG debugging learning (3): debugging using the gdb command line
Daily
More
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)

Code World

© 2018 codetd.com