我有一个应用程序，在其中单击 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),
)
],
),
),
);
}
}回答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),
),
);
}
}