将 ListView.builder 索引数据传递给文本小部件

Question

所以我想要实现的是，通过使用 ListView.builder，当用户点击特定的 ListTile 项目时，它将打开一个 AlertDialog 表单，其中在该表单的顶部，我想显示一个 Text 小部件，它将显示 ListView.builder 的特定索引（在本例中，eventList list 内的 String eventName）。

问题是，我不知道如何将该索引调用到 ListView.builder 之外的文本小部件。我想要实现的目标是可能的还是有另一种方法可以做到这一点？此外，如果它有帮助，当我尝试在文本小部件中传递索引时，我收到错误“未定义的名称 'index'”。

有关我正在努力实现的目标的更多信息（请原谅我的笔迹）： The AlertDialog Form

这是我的代码：

import 'package:flutter/material.dart';
import 'package:smc_app/Models/events.dart';

class EventsConfirmation extends StatefulWidget {
  const EventsConfirmation({Key? key}) : super(key: key);

  @override
  _EventsConfirmationState createState() => _EventsConfirmationState();
}
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
 List<EventList> schoolEvents = [
   EventList(eventName: 'SMC General Assembly', location: 'College Gym', time: '9AM-11AM',),
   EventList(eventName: 'College Finals Week', location: 'SMC', time: 'ALL DAY',),
   EventList(eventName: 'College Baccalaureate and Graduation Day', location: 'TBA', time: 'TBA',),
   EventList(eventName: 'Semester Break', location: 'N/A', time: 'N/A',),
];

    class _EventsConfirmationState extends State<EventsConfirmation> {
    
    
      Future<void> showInformationDialog(BuildContext context) async {
        return await showDialog(context: context,
            builder: (context){
          return AlertDialog(
            content: Form(
              child: Column(
                children: [
                  Text(schoolEvents[index].eventName), //HERE IS WHERE I'M HAVING PROBLEMS 
                  TextFormField(
                    validator: (val) => val!.isEmpty ? 'This field is required' : null,
                    decoration: InputDecoration(hintText: "Name/Student ID"),
                  ),
                ],
              ),
            ),
          );
          });
      }
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Upcoming Events, Confirm Your Attendance.'),
          ),
          body: ListView.builder(
              itemCount: schoolEvents.length,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.symmetric(vertical: 1.0, horizontal: 4.0),
                  child: Card(
                    child: InkWell(
                      child: ListTile(
                        onTap: () async {
                          await showInformationDialog(context);
                        },
                        title: Text(schoolEvents[index].eventName),
                        subtitle: Text(schoolEvents[index].location),
                      ),
                    ),
                  ),
                );
              }
          ),
        );
      }
    }

事件列表的class：

class EventList {

String eventName;
String location;
String time;

EventList({required this.eventName, required this.location, required this.time});
}

希望有人能帮助我，谢谢。

Answer 1

我们有一些选项可以解决您的问题：

就像@Uni 评论的那样，您可以在 showInformationDialog 上将索引作为参数传递：

Future showInformationDialog(BuildContext context, int index) async

为了避免访问列表，我会做的是将 schoolEvent 作为参数传递，这样如果在加载屏幕后列表出现问题，它不会影响你的功能，我也会删除async 和 await，在这种情况下它们不是必需的。

Future<void> showInformationDialog(BuildContext context, EventList event) {
    return showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          content: Form(
            child: Column(
              children: [
                Text(event.eventName),
                TextFormField(
                  validator: (val) => val!.isEmpty ? 'This field is required' : null,
                  decoration: InputDecoration(hintText: "Name/Student ID"),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

在列表磁贴上：

ListTile(
  onTap: () async {
    await showInformationDialog(context, schoolEvents[index]);
  },
  title: Text(schoolEvents[index].eventName),
  subtitle: Text(schoolEvents[index].location),
);

将 ListView.builder 索引数据传递给文本小部件

Passing ListView.builder index data to a text widget

listview

dart

flutter