当前位置：首页 > news >正文

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

news 2025/6/21 17:48:43

1. 创建Flutter项目

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

flutter create podcast_app
cd podcast_app

2. 封装列表组件

我们将在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<Podcast> podcasts;PodcastList({required this.podcasts});@overrideWidget 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}')),);},),);},);}
}

3. 使用列表组件

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

import 'package:flutter/material.dart';
import 'podcast_list.dart'; // 导入播客列表组件void main() {runApp(PodcastApp());
}class PodcastApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Podcast App',home: PodcastHomePage(),);}
}class PodcastHomePage extends StatelessWidget {// 示例播客数据final List<Podcast> podcasts = [Podcast('播客一', '这是播客一的描述'),Podcast('播客二', '这是播客二的描述'),Podcast('播客三', '这是播客三的描述'),Podcast('播客四', '这是播客四的描述'),Podcast('播客五', '这是播客五的描述'),];@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('播客列表'),),body: PodcastList(podcasts: podcasts), // 使用播客列表组件);}
}