如何在flutter中唯一标识widget？

Question

该功能是当从列表视图中点击特定小部件时显示用户的个人资料屏幕。我想要为每个小部件分配唯一 ID 的方法是从 Firebase 中以数组形式检索所有 ID，并通过迭代 for 循环来创建小部件。然后，我将创建的小部件添加到列表中，并将该列表放入 ListView 中。 ListView 在应用程序中正确构建，但我不知道如何将唯一 ID 添加到 ListView 中的小部件，以便在点击它们时，检索该小部件 ID 的配置文件并将其显示在新屏幕中。

我对于解决这个问题可能有错误的想法。因为否则当用户使用应用程序时，ID 将被渲染到应用程序中，这可能会导致漏洞问题。

我尝试使用小部件的 key 属性来存储用户唯一 ID。我还在网上搜索了是否有一种方法可以为小部件分配唯一的 ID，但没有运气，或者我找不到正确的方法。

enum ScreenStatus {
  NOT_DETERMINED,
  RETRIEVING_FRIEND_LIST,
  FRIEND_LIST_READY,
  FRIEND_PROFILE_OPEN
}

class FriendsScreen extends StatefulWidget {
  FriendsScreen({this.auth});

  final BaseAuth auth;

  @override
  State<StatefulWidget> createState() => _FriendsScreenState();
}

class _FriendsScreenState extends State<FriendsScreen> {
  ScreenStatus screenStatus = ScreenStatus.NOT_DETERMINED;

  List _friendList = [];

  @override
  void initState() {
    super.initState();
    widget.auth.retrieveUserDocument().then((document) {
      document.data.forEach((fieldName, fieldValue) {
        setState(() {
          if (fieldName == 'friends') {
            _friendList = fieldValue;
            print(_friendList);
          }
          screenStatus = _friendList == null
              ? ScreenStatus.RETRIEVING_FRIEND_LIST
              : ScreenStatus.FRIEND_LIST_READY;
        });
      });
    });
  }

  Widget _createFriendListWidget(List friendList) {
    List<Widget> list = List<Widget>();
    for (int i = 0; i < friendList.length; i++) {
      list.add(
        Card(
          child: InkWell(
            onTap: () {
              print('tapped');
            },
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ListTile(
                  leading: Icon(Icons.album),
                  title: Text(friendList[i]),
                  subtitle: Text('Subtitle'),
                )
              ],
            ),
          ),
        ),
      );
    }
    return ListView(children: list);
  }

  Widget _buildFriendList() {
    return Scaffold(
      body: Container(
        child: _createFriendListWidget(_friendList),
      ),
    );
  }

  Widget _buildWaitingScreen() {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: CircularProgressIndicator(),
      ),
    );
    ;
  }

  @override
  Widget build(BuildContext context) {
    switch (screenStatus) {
      case ScreenStatus.NOT_DETERMINED:
        return _buildWaitingScreen();
        break;
      case ScreenStatus.RETRIEVING_FRIEND_LIST:
        return _buildWaitingScreen();
        break;
      case ScreenStatus.FRIEND_LIST_READY:
        return _buildFriendList();
        break;
      default:
        return _buildWaitingScreen();
    }
  }
}

预期的结果是，当使用用户的相应 ID 点击小部件时，打开用户个人资料的新屏幕。

Answer 1

我认为你不需要识别小部件。相反，您可以在

onTap

闭包

中使用用户 ID

以下是更新后的

_createFriendListWidget

的外观：

  Widget _createFriendListWidget(List friendList) {
    List<Widget> list = List<Widget>();
    for (int i = 0; i < friendList.length; i++) {
      list.add(
        Card(
          child: ListTile(
            leading: Icon(Icons.album),
            title: Text(friendList[i]),
            subtitle: Text('Subtitle'),
            onTap: () {
              print("tapped ${friendList[i].id}"); // assume that id is in .id field
            }
          ),
        ),
      );
    }
    return ListView(children: list);
  }

另请注意，我已删除

Column

，因为它只有一个孩子，所以没有任何效果。我删除了

Inkwell

，因为

ListView

也可以处理

onTap

。

Answer 2

您可以将列表中的用户条目 (

Card

) 提取到自定义小部件中。然后，您可以添加并使用任何自定义字段，包括标识符。