import 'package:flutter/material.dart';import 'res/listData.dart';void main() { var myApp = const MyApp(); runApp(myApp);}class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { // MaterialApp作为根组件: return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("首页"), toolbarHeight: kToolbarHeight, titleTextStyle: const TextStyle( fontWeight: FontWeight.w400, fontSize: 25, color: Colors.white), ), body: const LayoutDemo(), ), theme: ThemeData(primarySwatch: Colors.amber), ); }}class LayoutDemo extends StatelessWidget { const LayoutDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return ListView( children: listData.map((Map<String, String> element) { return ListTileComponent(element); }).toList(), ); }}class ListTileComponent extends StatelessWidget { Map<String, String> element; ListTileComponent(this.element, {Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Column(children: [ Card( margin: const EdgeInsets.all(10), child: Column( children: [ AspectRatio( aspectRatio: 16 / 9, child: Image.network(element["imageUrl"] ?? "默认图片地址", fit: BoxFit.cover)), ListTile( leading: ClipRRect( borderRadius: BorderRadius.circular(25), child: Image.network(element["imageUrl"] ?? "默认头像地址", width: 50, height: 50, fit: BoxFit.cover)), title: Text(element["title"] ?? "默认标题文案"), subtitle: Text( element["desc"] ?? "默认描述文案", maxLines: 1, style: const TextStyle( wordSpacing: 1.5, overflow: TextOverflow.ellipsis), ), ), ], ), ), ]); }}
List<Map<String,String>> listData = <Map<String,String>>[ { "title" : "Candy Shop", "author" : "FADFA", "imageUrl" : "https://www.itying.com/images/flutter/1.png", "desc" : "Flutter is Google's mobile UI Framework for crafting high..." }, { "title" : "Candy Shop", "author" : "FADFA", "imageUrl" : "https://www.itying.com/images/flutter/2.png", "desc" : "Flutter is Google's mobile UI Framework for crafting high..." }, { "title" : "Candy Shop", "author" : "FADFA", "imageUrl" : "https://www.itying.com/images/flutter/3.png", "desc" : "Flutter is Google's mobile UI Framework for crafting high..." }, { "title" : "Candy Shop", "author" : "FADFA", "imageUrl" : "https://www.itying.com/images/flutter/4.png", "desc" : "Flutter is Google's mobile UI Framework for crafting high..." }, { "title" : "Candy Shop", "author" : "FADFA", "imageUrl" : "https://www.itying.com/images/flutter/5.png", "desc" : "Flutter is Google's mobile UI Framework for crafting high..." }, { "title" : "Candy Shop", "author" : "FADFA", "imageUrl" : "https://www.itying.com/images/flutter/6.png", "desc" : "Flutter is Google's mobile UI Framework for crafting high..." }, { "title" : "Candy Shop", "author" : "FADFA", "imageUrl" : "https://www.itying.com/images/flutter/7.png", "desc" : "Flutter is Google's mobile UI Framework for crafting high..." }];
