flutter - 如何通过 id 获取有关列表项的信息?

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

相似文章

scala - 多个列表的组合 (Scala)

我正在尝试编写一个函数,该函数将多个列表作为输入并返回这些列表之间每个组合的字符串表示形式。样本输入:valintegers=List(1,2,3,4)valcharacters=List('a','...

最新文章