P09. Flutter ListView 列表组件简介

列表组件的知识其实是很多的，也是一个经常使用的组件，我们这里先作一个简介，让大家有个直观的感受，先敲开大门，大家就好深入了。本文我们先学习最简单的列表组件如何制作。

ListView 的声明

学习不仅要学，还要不断的练习，这节我们重新熟悉一下一个 Flutter 页面的基本写法，因为前面已经学过，所以我相信很多小伙伴已经都会了，但是我么年主要是练习，代码如下：

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:'Mybj Flutter Demo',
      home:Scaffold(
        appBar:new AppBar(
          title:new Text('ListView Widget')
        ),
        body: new Text('ListView Text')
      ),
    );
  }
}

有了最基本的结构后，就可以加入 ListView 组件，在body代码处加入下面的代码：

body: new ListView(
  children:[
    new ListTile(
      leading:Icon(Icons.access_time),
      title:Text('access_time')
    )
  ]
),

我们使用了 ListView，然后在他的内部children中，使用了widget数组，因为是一个列表，所以它接受一个数组，然后有使用了 listTite 组件（列表瓦片），在组件中放置了图标和文字。

当然我们还可以多加入几行列表，比如我们再加入一行，代码如下。

body: ListView(
  children:[
    ListTile(
      leading:Icon(Icons.access_time),
      title:Text('access_time')
    ),
    ListTile(
      leading:Icon(Icons.access_time_outlined),
      title:Text('access_time_outlined')
    ),
  ]
),

图片列表的使用

上节学习了 Image Widget，在这里我们就在列表中加入图片来试一下。我们插入 4 幅图片，然后看一下效果，代码如下：

body: ListView(children: [
  Image.network(
      'https://mybj123.com/wp-content/uploads/2021/02/1614230321-c4ca4238a0b9238.jpg'),
  new Image.network(
      'https://mybj123.com/wp-content/uploads/2021/02/1614230411-c81e728d9d4c2f6.jpg'),
  new Image.network(
      'https://mybj123.com/wp-content/uploads/2021/02/1614230483-eccbc87e4b5ce2f.jpg'),
  new Image.network(
      'https://mybj123.com/wp-content/uploads/2021/02/1614230500-a87ff679a2f3e71.jpg')
]),

效果如下：

我们使用了网络的方式，插入了 4 张图片，并且这 4 张图片形成了一个列表。小伙伴们快动手试一试吧。

以上关于P09. Flutter ListView 列表组件简介的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。