Flutter从入门到放弃(二)

• 通过ListView创建列表

调用代码块StatelessWidget需要下载插件Awesome Flutter Snippets

• 一如既往的先创建MyApp

void main() {
  //使用Column加载不了listview,会报错
 runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter Learn")),
        // body:  const addListView(),
        // body: const addPageListView(),
        // body: const addVerticalpageView(),
        // body: addHeighgtHorPageView(),
        // body: addDynamicPageView(),
        // body: addDynamicDataPageView(),
        // body: addListViewBuilder(),
        body: addExtentFridView(),
      ),
    );
  }
}

• 创建一个基础的ListView

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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: const [
        //添加左边的图标
        ListTile(leading: Icon(Icons.account_box_outlined), title: Text("上午好")),
        Divider(), //加下划线
        ListTile(
          leading: Icon(Icons.padding, color: Colors.yellow),
          title: Text("中午好"),
        ),
        Divider(),
        ListTile(
          leading: Icon(
            Icons.assistant_direction_sharp,
            color: Colors.black26,
          ),
          title: Text("下午好"),
        ),
        ListTile(
          leading: Icon(Icons.abc_outlined),
          title: Text("晚上好"),
          //添加左边图表
          trailing: Icon(Icons.chevron_right_sharp),
        )
      ],
    );
  }
}

• 创建一个添加了网络图片的listView

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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: const EdgeInsets.all(20),
      children: [
        ListTile(
          leading: Image.network(
              "https://img.moegirl.org.cn/common/2/24/%E6%9C%BA%E5%8A%A8%E6%88%98%E5%A3%AB%E9%AB%98%E8%BE%BE00_%E7%AC%AC%E4%B8%80%E5%AD%A3.jpg"),
          title: const Text("《机动战士高达00》"),
          subtitle:
              const Text("是由日昇制作，于2007年10月至2009年3月在TBS/MBS放送的TV动画，两季共50集。"),
        ),
        Divider(),
        ListTile(
          leading: Image.network(
              "https://img.moegirl.org.cn/common/2/24/%E6%9C%BA%E5%8A%A8%E6%88%98%E5%A3%AB%E9%AB%98%E8%BE%BE00_%E7%AC%AC%E4%B8%80%E5%AD%A3.jpg"),
          title: const Text("《机动战士高达00》"),
          subtitle:
              const Text("是由日昇制作，于2007年10月至2009年3月在TBS/MBS放送的TV动画，两季共50集。"),
        ),
        Divider(),
        ListTile(
          trailing: Image.network(
              "https://img.moegirl.org.cn/common/2/24/%E6%9C%BA%E5%8A%A8%E6%88%98%E5%A3%AB%E9%AB%98%E8%BE%BE00_%E7%AC%AC%E4%B8%80%E5%AD%A3.jpg"),
          title: const Text("《机动战士高达00》"),
          subtitle:
              const Text("是由日昇制作，于2007年10月至2009年3月在TBS/MBS放送的TV动画，两季共50集。"),
        ),
        Divider(),
      ],
    );
  }
}

创建设置padding listView

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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      //水平列表 - 高度是自适应的
      //垂直列表 - 宽度是自适应的
      // scrollDirection: Axis.horizontal,
      padding: EdgeInsets.all(20),
      children: [
        Container(
            height: 120,
            decoration: const BoxDecoration(
              color: Colors.orange,
            )),
        Container(
          height: 120,
          decoration: BoxDecoration(color: Colors.red),
        ),
        Container(
          height: 110,
          decoration: BoxDecoration(color: Colors.blue),
        )
      ],
    );
  }
}

• 创建水平列表高度ListView

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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return SizedBox(
      //在这设置高度
      height: 250,
      child: ListView(
        scrollDirection: Axis.horizontal, //水平列表
        padding: const EdgeInsets.all(20),
        children: [
          Container(
            width: 150,
            decoration: const BoxDecoration(color: Colors.red),
            child: Column(children: [
              SizedBox(
                height: 150, //图片高度需要设置比box高低,不然会报错
                child: Image.network(
                    "https://ts1.cn.mm.bing.net/th/id/R-C.85fcb737dcbfa13c4e6da1a58d450c01?rik=pjWSeqdRKvJ76A&riu=http%3a%2f%2fpsp.tgbus.com%2fUploadFiles%2f201004%2f20100409095326967.jpg&ehk=yqVEdxL12MeEuHIPnBxRFVFZGLSqo4APcVFZWTJJJTE%3d&risl=&pid=ImgRaw&r=0",
                    fit: BoxFit.cover),
              ),
              const Text("111"),
            ]),
          ),
          Container(
            width: 100,
            decoration: BoxDecoration(color: Colors.blue),
          ),
          Container(
            width: 200,
            decoration: BoxDecoration(color: Colors.yellow),
          )
        ],
      ),
    );
  }
}

• 模拟数据创建一个ListData.dart

List listData=[
  {
    "title":'刹那·F·清英(Setsuna F Seiei)',
    "author":'出身于中东小国库尔吉斯共和国,被教育为少年兵的少年。幼时曾目击到为试验性武力介入而驱动的0高达,被其救下性命。在被组织发掘后,刹那成为了能天使高达的正式高达使者。进行武力介入时的年龄为16岁。他想要改变持续着战斗的扭曲世界，但同时自己也只能置身于战斗中。',
    "imageUrl":'https://bkimg.cdn.bcebos.com/pic/c8177f3e6709c93d70cf7a1efb68efdcd100bba1fe87?x-bce-process=image/resize,m_lfit,w_293,limit_1',
  },
    {
    "title":'洛克昂·斯特拉托斯(Lockon Stratos)',
    "author":'所属于天人的高达使者,拥有超一流的射击技术,驾驶力天使高达。年龄为24岁,在高达使者中是最年长的,同时有着爱照顾人的性格,在队伍中是领导者一般的存在。过去曾因遭到恐怖袭击而失去家人,因此对提出“以武力根绝纷争”这一理念的天人产生同感,下定决心参与其中。',
    "imageUrl":'https://bkimg.cdn.bcebos.com/pic/6a63f6246b600c338744271b7e19460fd9f9d62a0b90?x-bce-process=image/resize,m_lfit,w_260,limit_1',
  },
    {
    "title":'阿雷路亚·哈普提兹姆(Allelujah Haptism)',
    "author":'天人的一员，主天使高达的高达使者。过去曾为孤儿的他加入人类革新联盟的研究机构，为成为究极的士兵“超兵”而被施加了肉体强化和大脑改造。平时是温柔而沉稳的性格，但因大脑改造的副作用，一旦切换为第二人格“哈雷路亚”，性格就会变得残忍起来。',
    "imageUrl":'https://bkimg.cdn.bcebos.com/pic/810a19d8bc3eb13533fab375c24bbfd3fd1f4034eefa?x-bce-process=image/resize,m_lfit,w_293,limit_1',
  },
    {
    "title":'提耶利亚·厄德提耶利亚·厄德(Tieria Erde)',
    "author":'天人的一员，德天使高达的高达使者。外表看来是有着罕见美貌的中性少年。忠实地执行吠陀所示计划，同时还拥有对吠陀的特殊访问权。',
    "imageUrl":'https://bkimg.cdn.bcebos.com/pic/0824ab18972bd40735fa82321fdc89510fb30e24a3fd?x-bce-process=image/resize,m_lfit,w_293,limit_1',
  },
];

• 动态的添加列表

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

  List _initListData() {
    List list = [];
    for (var i = 0; i < 20; i++) {
      list.add(ListTile(
        title: Text("列表 --- $i"), //一个数据的时候{}可以去掉
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(children: _initListData());
  }
}

//模拟数据请求加载动态列表
class addDynamicDataPageView extends StatelessWidget {
  const addDynamicDataPageView({super.key});

  // List _initListData() {
  //   List tempList = [];

  //   for (var i = 0; i < listData.length; i++) {
  //     tempList.add(ListTile(
  //       title: Text("${listData[i]["title"]}"),
  //       subtitle: Text("${listData[i]["author"]}"),
  //       leading: Image.network("${listData[i]["imageUrl"]}",
  //            fit: BoxFit.cover),
  //     ));
  //   }
  //   return tempList;
  // }

  List _initListData() {
    var tempList = listData.map((value) {
      return ListTile(
        leading: Image.network("${value["imageUrl"]}", fit: BoxFit.cover),
        title: Text("${value["title"]}"),
        subtitle: Text("${value["author"]}"),
      );
    });
    return tempList.toList();
  }

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

使用builder创建动态的listView

class addListViewBuilder extends StatelessWidget {
  // List list = [];
  addListViewBuilder({Key? key}) : super(key: key) {
    //   for (var i = 0; i < 20; i++) {
    //     list.add("${i}条数据");
    //   }
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // return ListView.builder(
    //     itemCount: list.length,
    //     itemBuilder: (context, index) {
    //       return ListTile(
    //         title: Text(list[index]),
    //       );
    //     });

    //builder的方式加载更简单
    return ListView.builder(
      padding: EdgeInsets.all(20),
        itemCount: listData.length,
        itemBuilder: (context, index) {
          return ListTile(
            leading: Image.network(listData[index]["imageUrl"]),
            title: Text(listData[index]["title"]),
            subtitle: Text(listData[index]["author"]),
          );
        });
  }
}