在Flutter中,ListView.builder是用于构建动态列表的widget。在实现这个widget时,我们通常会遇到需要在一个屏幕上构建一个列表,在点击每个列表项后将数据传递回来的情况。以下是构建动态列表并将数据传回的解决方案。
Step 1: 首先导入所需的包:
import 'package:flutter/material.dart';
Step 2: 定义一个列表数据:
List items = ['One', 'Two', 'Three', 'Four', 'Five'];
Step 3: 在类中创建一个空字符串的变量,用于存储传递的数据:
String selectedItem = '';
Step 4: 在Widget的build方法中,使用ListView.builder构建动态列表,并添加onTap回调以获取并存储所选数据:
ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('${items[index]}'),
onTap: () {
selectedItem = items[index];
Navigator.of(context).pop(selectedItem);
},
);
},
);
Step 5: 当用户点击列表中的任何项时,存储所选数据并使用Navigator返回数据。
onTap: () {
selectedItem = items[index];
Navigator.of(context).pop(selectedItem);
},
完整代码如下:
import 'package:flutter/material.dart';
List items = ['One', 'Two', 'Three', 'Four', 'Five'];
class MyWidget extends StatelessWidget {
String selectedItem = '';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Dynamic List'),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('${items[index]}'),
onTap: () {
selectedItem = items[index];
Navigator.of(context).pop