Question

我有一个包含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(''),
                    Container(
                      width: 6,
                    ),
                    user.data()['isEditor'] == true
                        ? Chip(
                            label: Text('editor'),
                            backgroundColor: Colors.blue[600],
                            shadowColor: Colors.blue[900],
                          )
                        : Text(''),
                  ],
                ),
                trailing: button,
              ))
          .toList(),
    );
  }
}

Answer 1

了解您的问题，一个简单的解决方法是使用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
   };       
};

这将锻炼：）

Answer 2

我的解决方案是将以前的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),

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

2 个答案: