内容简介:今天我们来看看为了便于讲解,我们把这次我们把
今天我们来看看 Flutter
的 ListView
,我们会展示一个简单的汽车的列表,那么我们首先新建一个 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'); }
我们保存下看看效果
是不是跟iOS的TableView也很像,这个更简单不用去遵循 Delegate
和 DataSource
了,还有同学可能会问 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), ); }
再来看下,图片是不是出来了
我们的文字改怎么显示呢,接下来我们再来介绍一个 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), ], ), ); }
这下我们来看下最终的效果
这里我们扩展下,有Column,是不是会有相对的Row呢,答案是肯定的,其实还有一个Stack,我就不贴图了,大家可以自己试下看看效果,一般我们开发用这三种布局就差不多够用了
今天我们就先简单的介绍下ListView使用,废话不多说,明天我们就直接进入我们的项目实战
One More Thing (福利来了)
长按二维码查看 2020—课程列表 全网IT各种资源有需求的可以微我,或者你喜欢的课程都可以给我发链接剩下的我来搞定
喜欢的朋友可以扫描关注我的公众号(多多点赞,多多打赏,您的支持是我写作的最大动力) 关注有福利可以使用免费梯子自由上网
iOS_DevTips
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Flask Web开发:基于Python的Web应用开发实战
[美] Miguel Grinberg / 安道 / 人民邮电出版社 / 2014-12 / 59.00元
本书不仅适合初级Web开发人员学习阅读,更是Python程序员用来学习高级Web开发技术的优秀参考书。 • 学习Flask应用的基本结构,编写示例应用; • 使用必备的组件,包括模板、数据库、Web表单和电子邮件支持; • 使用包和模块构建可伸缩的大型应用; • 实现用户认证、角色和个人资料; • 在博客网站中重用模板、分页显示列表以及使用富文本; • 使用基于......一起来看看 《Flask Web开发:基于Python的Web应用开发实战》 这本书的介绍吧!