真香!本来觉得用以前的java就能做的为啥还用flutter,但是最近接触flutter之后感觉这才是写移动应用的神器啊!
尤其是用java写的listView,各种适配器传参简直了
效果
可以显示gif动图哦,真强大,某些模拟器中可能有闪烁现象,但是我的手机上没有,可能是兼容问题 )
原理
在完成这个效果之前,
分两步走,listview列表和card布局
listView
没有适配器,没有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
加了注释,应该能看懂
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中新建一个资源包,新建文件
写入以下代码,实现逻辑与内容的分离
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~~