如何通过id获取关于列表项的信息?

Question

我有一个应用程序，在其中，当单击FAB时，出现一个新的列表项目，标题描述和id。我需要，当点击一个项目，一个底部模态对话框中，你可以编辑这个项目的标题和描述。在这个应用程序中，我使用了Provider。如何使模态窗口通过提供程序在单击模态和显示时通过事件id获取有关此项目的信息?

class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Consumer<ListModel>(
builder: (context, event, child) {
return ListView.builder(
itemCount: event.eventList.length,
itemBuilder: (context, index) {
return Container(
child: ListTile(
key: Key(event.eventList[index].id),
title: Text(
event.eventList[index].title),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
event.eventList[index].detail),
Text(
event.eventList[index].id),
],
),
onTap: () {
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return ModalBottomSheet();
},
);
},
),
);
},
);
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Provider.of<ListModel>(context, listen: false).addEventToList();
},
child: const Icon(Icons.add),
),
);
}
}

class ModalBottomSheet extends StatefulWidget {
const ModalBottomSheet({Key? key}) : super(key: key);
@override
State<ModalBottomSheet> createState() => _ModalBottomSheetState();
}
class _ModalBottomSheetState extends State<ModalBottomSheet> {
@override
Widget build(BuildContext context) {
return Container(
height: 200,
color: Colors.amber,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
const Text('Change Event'),
ElevatedButton(
child: const Text('Close BottomSheet'),
onPressed: () => Navigator.pop(context),
)
],
),
),
);
}
}

Answer 1

首先你必须让你的ModalBottomShee除了一个int(这是id)在其构造函数。

然后您可以简单地将从Consumer的构建器获得的index变量传递给它。

一旦你有了id，你就可以使用Provider和list .where()方法在列表中找到相应的事件，并读取或修改它。

查看下面代码中的示例更改。

class ModalBottomSheet extends StatefulWidget {
final int eventId;
const ModalBottomSheet({required this.eventId,  Key? key}) : super(key: key);
@override
State<ModalBottomSheet> createState() => _ModalBottomSheetState();
}
class _ModalBottomSheetState extends State<ModalBottomSheet> {
@override
Widget build(BuildContext context) {
return Container(
height: 200,
color: Colors.amber,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
const Text('Change Event which id is ${widget.id}'),
ElevatedButton(
child: const Text('Close BottomSheet'),
onPressed: () => Navigator.pop(context),
)
],
),
),
);
}
}

class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Consumer<ListModel>(
builder: (context, event, child) {
return ListView.builder(
itemCount: event.eventList.length,
itemBuilder: (context, index) {
return Container(
child: ListTile(
key: Key(event.eventList[index].id),
title: Text(
event.eventList[index].title),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
event.eventList[index].detail),
Text(
event.eventList[index].id),
],
),
onTap: () {
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return ModalBottomSheet(event.eventList[index].id);
},
);
},
),
);
},
);
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Provider.of<ListModel>(context, listen: false).addEventToList();
},
child: const Icon(Icons.add),
),
);
}
}