void main() => runApp(myList());
class myList extends StatefulWidget{
@override
HomeState createState() => HomeState();
}
class HomeState extends State<myList>{
var myLists = [];
@override
void initState() {
// TODO: implement initState
super.initState();
initData();
}
void initData() {
myLists.add({"img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210611094Q512b-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648128658&t=214e8b8c2135e2ca22d286ba607ac7d5","name":"啧啧啧","tel":"15011035074",});
myLists.add({"img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648128658&t=1706a6dd48e5bf4278f40d71cda466bb","name":"翟萍1","tel":"15011035074",});
myLists.add({"img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F121420113514%2F201214113514-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648128658&t=236f7620464ff732014fc82def608cb0","name":"翟萍2","tel":"15011035074",});
myLists.add({"img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F0F420110430%2F200F4110430-6-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648128658&t=873723a3b52b436863544134bafc66d4","name":"翟萍3","tel":"15011035074",});
myLists.add({"img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp08%2F01042323313046.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648128658&t=10d89647db367b1ef6a782599d8449c5","name":"翟萍4","tel":"15011035074",});
myLists.add({"img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648128658&t=0313b9863d45487ad876ff8c249af203","name":"翟萍5","tel":"15011035074",});
myLists.add({"img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F060120105F7%2F200601105F7-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648128658&t=b27e70b3fdde92eccd52fb06a7b8d59e","name":"翟萍6","tel":"15011035074",});
myLists.add({"img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F032120114622%2F200321114622-4-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648128658&t=db1de8e2bb5db55f96381317bed41635","name":"翟萍7","tel":"15011035074",});
setState(() {
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
//backgroundColor: Colors.cyanAccent,
title: Text("目录"),//顶部title展示
),
body: Center(
child: ListView.builder(
itemCount: myLists.length,
padding: const EdgeInsets.all(15),
itemBuilder: (context,index){
var listBean = myLists[index];
return Row(//设置横向布局 图片+纵向布局
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
//放置图片
Container(
margin: EdgeInsets.all(10),
width: 100,
height: 100,
child: Image.network("${listBean["img"]}"),
),
Column(//设置纵向布局 姓名+手机号
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
"${listBean["name"]}",
style: const TextStyle(fontSize: 20.0,color: Colors.black87),
),
Text(
"${listBean["tel"]}",
style: const TextStyle(fontSize: 16.0,color: Colors.black87),
),
],
)
],
);
}),
),
)
);
}
}
效果图
