本文主要介绍 listView下进行动态卡片布局
真香!本来觉得用以前的java就能做的为啥还用flutter,但是最近接触flutter之后感觉这才是写移动应用的神器啊! 尤其是用java写的listView,各种适配器传参简直了
效果
可以显示gif动图哦,真强大,某些模拟器中可能有闪烁现象,但是我的手机上没有,可能是兼容问题 )
img
原理
在完成这个效果之前, 分两步走,listview列表和card布局
listView
image-20210731120806213
没有适配器,没有viewHolder,没有entity,flutter将他变成了一个纯前端的项目,简单到任何的注释都是那么的苍白
return ListView(
children: <Widget>[
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title: Text('张三',
style: TextStyle(color: Colors.red),
textDirection: TextDirection.ltr),
subtitle: Text('工程师'),
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title: Text('李四',
style: TextStyle(color: Colors.red),
textDirection: TextDirection.ltr),
subtitle: Text('产品经理'),
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title: Text('王五',
style: TextStyle(color: Colors.red),
textDirection: TextDirection.ltr),
subtitle: Text('程序员'),
)
],
),
)
]
); //
当然以上代码要写在build函数中
card
image-20210731120723721
加了注释,应该能看懂
return ListView(
children: <Widget>[
Card(
margin: EdgeInsets.all(10),//表示边界距离
child: Column(
children: <Widget>[
AspectRatio(
aspectRatio: 16/9, //调整宽高比
child:Image.network("http://img1.izaoxing.com/allimg/c190122/154Q51262OG0-c029.jpg",fit: BoxFit.cover,)//图像铺满
),
ListTile(
leading: CircleAvatar( //专门将图片转换为头像
backgroundImage:NetworkImage("http://img1.izaoxing.com/allimg/c190122/154Q51262OG0-c029.jpg")
) ,
title: Text('张三',
style: TextStyle(color: Colors.red),
textDirection: TextDirection.ltr),
subtitle: Text('工程师'),
)
],
),
),
]
); //
合并
难点在于,不能像一开始的listView那样单纯的重复Card,我们需要传参 同时,内容与代码必须要分离 以下代码没有删减,可直接复制使用
在lib中新建一个资源包,新建文件
img
写入以下代码,实现逻辑与内容的分离
List listData=[
{
"title":'first',
"imageUrl":'http://img1.izaoxing.com/allimg/c190122/154Q51262OG0-c029.jpg',
"description": 'the beautiful'
},
{
"title":'second',
"imageUrl":'https://pic2.zhimg.com/80/v2-40c024ce464642fcab3bbf1b0a233174_hd.jpg',
"description": 'the beautiful'
},
{
"title":'third',
"imageUrl":'https://pic2.zhimg.com/v2-848ed6d4e1c845b128d2ec719a39b275_b.jpg',
"description": 'the beautiful'
},
{
"title":'fourth',
"imageUrl":'https://pic1.zhimg.com/50/v2-88b5da103cb64fe9e3f0d7b9d33fcfa4_hd.webp',
"description": 'the beautiful'
}
];
在main.dart中,我们传入以下代码(import的路径可能需要修改) 将listData通过map形式传入成为value,然后取相应的key值传入对应的参数,listView会自动循环遍历value中的内容
import 'package:flutter/material.dart';
import 'package:flutter_app/res/listData.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("flutterCard"),
),
body: LayoutDemo()),
);
}
}
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
//TODO: implement build
return ListView(
children: listData.map((value){
return Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
AspectRatio(
aspectRatio: 16/9,
child: Image.network(value["imageUrl"],fit: BoxFit.fill,),
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(value["imageUrl"]),
),
title:Text(value["title"]),
subtitle: Text(value["description"])
)
],
)
);
}).toList(),//注意这里要转换成列表,因为listView只接受列表
);
}
}
综上,只需两个文件,几十行代码即可完成布局,开心O(∩_∩)O~~
最后
这里也为想要学习Flutter的朋友们准备了两份学习资料《Flutter Dart语言编程入门到精通》《Flutter实战》,从编程语言到项目实战,一条龙服务!!
《Flutter Dart 语言编程入门到精通》
- 第一章 Dart语言基础
- 第二章 Dart 异步编程
- 第三章 异步之 Stream 详解
- 第四章 Dart标准输入输出流
- 第五章 Dart 网络编程
- 第六章 Flutter 爬虫与服务端
- 第七章 Dart 的服务端开发
- 第八章 Dart 调用C语言混合编程
- 第九章 LuaDardo中Dart与Lua的相互调用
《Flutter实战:第二版》
- 第一章:起步
- 第二章:第一个Flutter应用
- 第三章:基础组件
- 第四章:布局类组件
- 第五章:容器类组件
- 第六章:可滚动组件
- 第七章:功能型组件
- 第八章:事件处理与通知
- 第九章:动画
- 第十章:自定义组件
- 第十一章:文件操作与网络请求
- 第十二章:Flutter扩展
- 第十三章:国际化
- 第十四章:Flutter核心原理
- 第十五章:一个完整的Flutter应用