flutter中ListView 列表组件简介【黑马web前端】

更新时间:2019年07月26日 10时53分34秒来源:黑马程序员论坛

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

ListView的声明

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

[AppleScript] 纯文本查看 复制代码

import 'package:flutter/material.dart';

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

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

这就是一个最基本的机构，具体解释和写法看视频吧。

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

[AppleScript] 纯文本查看 复制代码

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

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

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

[AppleScript] 纯文本查看 复制代码

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

这时候已经有两行列表了（具体效果视频中查看）。

[size=0.85em]#图片列表的使用

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

[AppleScript] 纯文本查看 复制代码

body: new ListView(
  children:<Widget>[
   new Image.network(
      '/G-wj-ZQuocWlYOHM6MT2Hbh5.jpg'
    ),
     new Image.network(
      '/1bHNoNGpZjyriCNcvqdKo3s6.jpg'
    ),
     new Image.network(
      'http://jspang.com/static/myimg/typescript_banner.jpg'
    ),new Image.network(
      'http://jspang.com/static/myimg/smile-vue.jpg'
    )
    
  ]
),

我们使用了网络的方式，插入了4张图片，并且这4张图片形成了一个列表。

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

上海中心

flutter中ListView 列表组件简介【黑马web前端】

相关阅读