Flutter 第四讲:初探 ListView

栏目: IT技术 · 发布时间: 4年前

内容简介:今天我们来看看为了便于讲解,我们把这次我们把

今天我们来看看 FlutterListView ,我们会展示一个简单的汽车的列表,那么我们首先新建一个 car.dart ,两个属性一个构造方法,还有一个模仿网络返回的本地数组,因为太占地方,我就只写前几个了

class Car {
  const Car({
    this.name,
    this.imageUrl
});

  final String name;
  final String imageUrl;

}

final List<Car> datas = [
  Car(
    name: '保时捷918 Spyder',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-7d8be6ebc4c7c95b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '兰博基尼Aventador',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-e3bfd824f30afaac?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '法拉利Enzo',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-a1d64cf5da2d9d99?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  )
  ......
];

为了便于讲解,我们把 MaterialApp 里的 home ,抽出来新建一个 Home

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: ListView.builder(itemCount: datas.length,
      itemBuilder: _cellForRow,),
    );
  }
}

这次我们把 body 换成, ListView.builder() ,它有一个 itemCount ,大家都猜出来是什么了,列表的行数,还有一个 itemBuilder 是一个回调函数,我们写一个 _cellForRow 的方法,我们先简单的返回一个 Text Widget

Widget _cellForRow(BuildContext context, int index) {
  return Text('123');
}

我们保存下看看效果

Flutter 第四讲:初探 ListView

是不是跟iOS的TableView也很像,这个更简单不用去遵循 DelegateDataSource 了,还有同学可能会问 section 怎么办?很遗憾 Flutter 并没有给我们封装好 section ,只能我们自己来实现,后面我们也会说这个怎么实现,接下来我们来用上我们的datas里面的数据,在这之前我们还是再来介绍一个新的WIdget-- Container ,这个我们会经常用到,你可以把它想象成空 Div 或者纯净的 UIView ,可以添加子Widget的,我们改下我们上面的代码,我们先只显示图片看下,Image有个network方法可以直接传入url来显示

Widget _cellForRow(BuildContext context, int index) {
  return Container(
    child: Image.network(datas[index].imageUrl),
  );
}

再来看下,图片是不是出来了

Flutter 第四讲:初探 ListView

我们的文字改怎么显示呢,接下来我们再来介绍一个 Column 布局,它有个 children 属性可以传入多个 Widget , 我们添加个 margin 让显示更好看一点,同时我们的image和text之间如果嫌太近我们可以加一个 SizedBox 来分割下

Widget _cellForRow(BuildContext context, int index) {
  return Container(
    color: Colors.white,
    margin: EdgeInsets.all(10),
    child: Column(
      children: <Widget>[
        Image.network(datas[index].imageUrl),
        SizedBox(
          height: 10,
        ),
        Text(datas[index].name),
      ],
    ),
  );
}

这下我们来看下最终的效果

Flutter 第四讲:初探 ListView

这里我们扩展下,有Column,是不是会有相对的Row呢,答案是肯定的,其实还有一个Stack,我就不贴图了,大家可以自己试下看看效果,一般我们开发用这三种布局就差不多够用了

今天我们就先简单的介绍下ListView使用,废话不多说,明天我们就直接进入我们的项目实战

One More Thing (福利来了)

Flutter 第四讲:初探 ListView

长按二维码查看 2020—课程列表 全网IT各种资源有需求的可以微我,或者你喜欢的课程都可以给我发链接剩下的我来搞定

Flutter 第四讲:初探 ListView

喜欢的朋友可以扫描关注我的公众号(多多点赞,多多打赏,您的支持是我写作的最大动力) 关注有福利可以使用免费梯子自由上网

Flutter 第四讲:初探 ListView

iOS_DevTips


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Java语言程序设计(基础篇 原书第10版)

Java语言程序设计(基础篇 原书第10版)

[美]粱勇(Y.Daniel Liang) / 戴开宇 / 机械工业出版社 / 2015-7 / 85.00元

《Java语言程序设计(基础篇 原书第10版)》是Java语言的经典教材,中文版分为基础篇和进阶篇,主要介绍程序设计基础、面向对象编程、GUI程序设计、数据结构和算法、高级Java程序设计等内容。本书以示例讲解解决问题的技巧,提供大量的程序清单,每章配有大量复习题和编程练习题,帮助读者掌握编程技术,并应用所学技术解决实际应用开发中遇到的问题。您手中的这本是其中的基础篇,主要介绍了基本程序设计、语法......一起来看看 《Java语言程序设计(基础篇 原书第10版)》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具