Flutter&鸿蒙next中封装一个列表组件

1. 创建Flutter项目
   首先，确保你已经安装了Flutter SDK，并创建一个新的Flutter项目：

flutter create podcast_app
cd podcast_app

1. 封装列表组件
   我们将在lib目录下创建一个新的文件，命名为podcast_list.dart，用于封装播客列表。

import 'package:flutter/material.dart';

class Podcast {
final String title;
final String description;

Podcast(this.title, this.description);
}

class PodcastList extends StatelessWidget {
final List podcasts;

PodcastList({required this.podcasts});

@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: podcasts.length,
itemBuilder: (context, index) {
final podcast = podcasts[index];
return Card(
margin: const EdgeInsets.symmetric(vertical: 8.0),
child: ListTile(
title: Text(podcast.title),
subtitle: Text(podcast.description),
onTap: () {
// 点击处理逻辑
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('你选择了播客: ${podcast.title}')),
);
},
),
);
},
);
}
}

1. 使用列表组件
   现在，我们可以在主应用文件中使用这个播客列表组件。在lib/main.dart中，我们将创建一个简单的UI，展示多个播客。

import 'package:flutter/material.dart';
import 'podcast_list.dart'; // 导入播客列表组件

void main() {
runApp(PodcastApp());
}

class PodcastApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Podcast App',
home: PodcastHomePage(),
);
}
}

class PodcastHomePage extends StatelessWidget {
// 示例播客数据
final List podcasts = [
Podcast('播客一', '这是播客一的描述'),
Podcast('播客二', '这是播客二的描述'),
Podcast('播客三', '这是播客三的描述'),
Podcast('播客四', '这是播客四的描述'),
Podcast('播客五', '这是播客五的描述'),
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('播客列表'),
),
body: PodcastList(podcasts: podcasts), // 使用播客列表组件
);
}
}

1. 运行应用
   在终端中运行以下命令以启动应用：

flutter run