黑马程序员技术交流社区

标题: flutter中ListView 列表组件使用 [打印本页]

作者: 小江哥    时间: 2019-8-22 17:15
标题: flutter中ListView 列表组件使用
本帖最后由 小江哥 于 2019-8-22 17:16 编辑

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

这时候已经有两行列表了(具体效果视频中查看)。
图片列表的使用
上节课学习了Image Widget,在这里我们就在列表中加入图片来试一下。我们插入4幅图片,然后看一下效果,代码如下:
[AppleScript] 纯文本查看 复制代码
body: new ListView(
  children:<Widget>[
   new Image.network(
      'http://jspang.com/static/upload/20181111/G-wj-ZQuocWlYOHM6MT2Hbh5.jpg'
    ),
     new Image.network(
      'http://jspang.com/static/upload/20181109/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张图片形成了一个列表。小伙伴们快动手试一试吧






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2