使用flutter封装一个自定义列表块
时间: 2023-07-20 18:17:29 浏览: 70
好的,我可以为您提供一个简单的自定义列表块封装示例。以下是一个基本的代码示例:
```dart
import 'package:flutter/material.dart';
class CustomListItem extends StatelessWidget {
CustomListItem({
this.title,
this.subtitle,
this.thumbnail,
});
final String title;
final String subtitle;
final Widget thumbnail;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
thumbnail,
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(20.0, 0.0, 2.0, 0.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
const Padding(padding: EdgeInsets.symmetric(vertical: 2.0)),
Text(
subtitle,
style: const TextStyle(fontSize: 16.0),
),
],
),
),
)
],
),
);
}
}
```
您可以在需要使用自定义的列表块的地方使用此小部件。例如,以下是一个使用此自定义列表块的示例:
```dart
class MyCustomList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(10.0),
children: <Widget>[
CustomListItem(
title: 'Flutter',
subtitle: 'Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase',
thumbnail: Container(
decoration: const BoxDecoration(color: Colors.blue),
),
),
CustomListItem(
title: 'Dart',
subtitle: 'A client-optimized language for fast apps on any platform',
thumbnail: Container(
decoration: const BoxDecoration(color: Colors.green),
),
),
CustomListItem(
title: 'Material Design',
subtitle: 'A design system for building beautiful, natively compiled applications for mobile, web, and desktop',
thumbnail: Container(
decoration: const BoxDecoration(color: Colors.orange),
),
),
],
);
}
}
```
这个示例中,我们使用 `MyCustomList` 小部件来构建一个包含三个自定义列表块的列表。每个列表块都包含一个缩略图、标题和子标题。请注意,我们可以在自定义列表块中使用任何小部件,以便根据自己的需求进行自定义。