颤振如何确定用户单击PopupMenuItem的ListView中的哪个ListTile？

问题描述

我有一个包含ListTiles的ListView。每个图块代表我的用户数组中的一个用户。磁贴的尾部是PopupMenuButton。当用户单击一个PopupMenuItem时，应调用一个函数。到现在为止还挺好。我想在“ onSelected”中将相应用户的数据传递给一个函数。

有人可以给我一个提示，我应该如何更改代码才能做到这一点？

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:cloud_functions/cloud_functions.dart';
import 'package:Flutter/material.dart';

class UserListMobilePortrait extends StatelessWidget {
  final List<QueryDocumentSnapshot> users;
  const UserListMobilePortrait({
    Key key,this.users,}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final HttpsCallable setRoleCallable = CloudFunctions.instance
        .getHttpsCallable(functionName: 'setRoles')
          ..timeout = const Duration(seconds: 10);
          
    final button = new PopupMenuButton(
        itemBuilder: (_) => <PopupMenuItem<String>>[
              new PopupMenuItem<String>(
                  child: const Text('Make Admin'),value: 'admin'),new PopupMenuItem<String>(
                  child: const Text('Make Editor'),value: 'editor'),],onSelected: (selectedItem) async {
          try {
            final HttpsCallableResult result = await setRoleCallable.call(
              <String,dynamic>{
                //'user' shall represent the user of the clicked ListTile,but how to pass it?
                'email': user.data()['email'],'role': selectedItem,'permission': 'grant'
              },);
            print(result.data);
          } on CloudFunctionsException catch (e) {
            print('caught firebase functions exception');
            print(e.code);
            print(e.message);
            print(e.details);
          } catch (e) {
            print('caught generic exception');
            print(e);
          }
        });

    return ListView(
      children: users
          .map((user) => ListTile(
                title: Text(
                    (user.data()['email'] != null) ? user.data()['email'] : ""),subtitle: Row(
                  children: [
                    Text((user.data()['displayName'] != null)
                        ? user.data()['displayName']
                        : ""),Container(
                      width: 6,),user.data()['isAdmin'] == true
                        ? Chip(
                            label: Text('admin'),backgroundColor: Colors.orange[600],shadowColor: Colors.orange[900],)
                        : Text(''),user.data()['isEditor'] == true
                        ? Chip(
                            label: Text('editor'),backgroundColor: Colors.blue[600],shadowColor: Colors.blue[900],trailing: button,))
          .toList(),);
  }
}

解决方法

了解您的问题，一个简单的解决方法是使用Listview Builder（也可以使用ListView Builder来优化应用程序的速度）

 const List = ["Hello","World","Temp"]
 ListView.builder(
    itemBuilder: (context,index) {
      //return (Your widget [a list tile preferably and use onTap(and access the index 
  in the function)])
        return(ListTile(onTap:(){
        print(List[index]);
        //you can access the index and use the main list to get its following data
   };       
};

这将锻炼：）

,

我的解决方案是将以前的final按钮移到自己的类上。这样我就可以将数据传递给构造函数了。

UserPopupMenuButton

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:cloud_functions/cloud_functions.dart';
import 'package:flutter/material.dart';

class UserPopupMenuButton extends StatelessWidget {
  final QueryDocumentSnapshot user;
  const UserPopupMenuButton({
    Key key,this.user,}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final HttpsCallable setRoleCallable = CloudFunctions.instance
        .getHttpsCallable(functionName: 'setRoles')
          ..timeout = const Duration(seconds: 10);
    return PopupMenuButton(
        itemBuilder: (_) => <PopupMenuItem<String>>[
              new PopupMenuItem<String>(
                  child: const Text('Make Admin'),value: 'admin'),new PopupMenuItem<String>(
                  child: const Text('Make Editor'),value: 'editor'),],onSelected: (selectedItem) async {
          try {
            final HttpsCallableResult result = await setRoleCallable.call(
              <String,dynamic>{
                'email': user.data()['email'],'role': selectedItem,'permission': 'grant'
              },);
            print(result.data);
          } on CloudFunctionsException catch (e) {
            print('caught firebase functions exception');
            print(e.code);
            print(e.message);
            print(e.details);
          } catch (e) {
            print('caught generic exception');
            print(e);
          }
        });
  }
}

并将其用作ListTile的结尾：

trailing: UserPopupMenuButton(user: user),