flutter怎么用ListView动态生成card
时间: 2024-05-14 20:17:47 浏览: 154
首先,你需要在Flutter中创建一个ListView,然后将每个列表项作为一个Card来呈现。以下是一个简单的示例代码:
```dart
import 'package:flutter/material.dart';
class MyListView extends StatefulWidget {
@override
_MyListViewState createState() => _MyListViewState();
}
class _MyListViewState extends State<MyListView> {
List<String> items = [
"Item 1",
"Item 2",
"Item 3",
"Item 4",
"Item 5",
"Item 6",
"Item 7",
"Item 8",
"Item 9",
"Item 10",
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ListView with Cards"),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text(items[index]),
subtitle: Text("Subtitle"),
leading: CircleAvatar(
child: Text("${index + 1}"),
),
trailing: Icon(Icons.arrow_forward),
),
);
},
),
);
}
}
```
在这个示例中,我们创建了一个StatefulWidget,它包含一个字符串列表,其中包含10个列表项。在build方法中,我们使用ListView.builder来构建ListView。该方法接受两个参数:itemCount和itemBuilder。itemCount表示ListView中的列表项数量,而itemBuilder则定义了每个列表项的外观和行为。
在我们的itemBuilder中,我们使用Card来呈现每个列表项。Card包含一个ListTile,其中包含一个标题、一个子标题、一个前导和一个后缀。我们使用CircleAvatar作为前导来显示每个列表项的索引。
现在,你可以尝试在你的Flutter应用程序中使用这个ListView来动态生成Cards了。
阅读全文