6、Flutter 列表组件

列表有以下分类：

1、垂直列表

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return   Center(
  child: ListView (children: const [
    Icon(Icons.search, color: Colors.red, size: 50),
    SizedBox(height: 100),
    Icon(ItyingIcon.weix, size: 50, color: Color.fromARGB(255, 9, 240, 151)),
    SizedBox(height: 100),
    Icon(ItyingIcon.gouwu, size: 50, color: Colors.black),
    SizedBox(height: 100),
    Icon(ItyingIcon.weix, size: 50, color: Color.fromARGB(255, 27, 71, 54)),
  ],)
);
}
}

2、垂直图文列表

class MyApp1 extends StatelessWidget {
  const MyApp1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
      children: <Widget>[
        Image.network(
            "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"),
        Image.network(
            "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"),
        Image.network(
            "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"),
        Image.network(
            "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"),
        Image.network(
            "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"),
        Image.network(
            "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"),
        Image.network(
            "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"),
      ],
    );
  }
}

3、水平列表

class MyApp2 extends StatelessWidget {
  const MyApp2({super.key});
  @override
  Widget build(BuildContext context) {
    return SizedBox( //指定固定尺寸
      //  width: 100.0,
       height: 100.0,
      child: ListView(
      scrollDirection: Axis.horizontal, //垂直
      padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
      children: <Widget>[
        Image.network(
            "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"),
        Image.network(
            "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"),
        Image.network(
            "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"),
        Image.network(
            "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"),
        Image.network(
            "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"),
        Image.network(
            "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"),
        Image.network(
            "https://dashanbook.oss-cn-shenzhen.aliyuncs.com/46aa6e030985487894f34196c4df3ee4.jpg"),
      ],
    )
    );
  }
}

4、动态列表

for循环实现动态列表

class MyApp3 extends StatelessWidget {
  MyApp3({Key? key}) : super(key: key) {
    print(ListText);
  }
  List<Widget> _initListData() {
    List<Widget> list = [];
    for (var i = 0; i < ListText.length; i++) {
      list.add(ListTile(
        leading: Image.network("${ListText[i]["imageUrl"]}"),
        title: Text("${ListText[i]["title"]}"),
        subtitle: Text("${ListText[i]["author"]}"),
      ));
    }
    return list;
  }
  @override
  Widget build(BuildContext context) {
    return ListView(children: _initListData());
  }
}

map实现动态列表

class MyApp4 extends StatelessWidget {
  MyApp4({Key? key}) : super(key: key) {
    print(ListText);
  }
  List<Widget> _initListData() {
    var list = ListText.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: _initListData());
  }
}