Flutter中如何通过Builder传递用户信息至侧边抽屉？

1. 维护状态变量存储当前选中的文档ID #

在你的State类里新增一个字符串变量，用来保存当前要传递给my_Drawer的文档ID：

String? _selectedDocId;

2. 处理异步加载与列表交互 #

先确保docIDs加载完成后再渲染列表，同时给每个列表项添加点击事件，更新选中的文档ID并触发抽屉打开：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('用户列表')),
    endDrawer: _selectedDocId != null 
        ? my_Drawer(documentId: _selectedDocId!)
        : const SizedBox.shrink(), // 未选中用户时显示空视图
    body: docIDs.isEmpty 
        ? const Center(child: CircularProgressIndicator()) // 加载中提示
        : ListView.builder(
            itemCount: docIDs.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('用户 ${docIDs[index]}'),
                onTap: () {
                  // 更新选中的文档ID并打开抽屉
                  setState(() {
                    _selectedDocId = docIDs[index];
                  });
                  Scaffold.of(context).openEndDrawer();
                },
              );
            },
          ),
  );
}

3. 在抽屉组件内加载用户信息 #

让my_Drawer通过传入的documentId从Firestore拉取对应用户的信息并展示：

class my_Drawer extends StatelessWidget {
  final String documentId;

  const my_Drawer({super.key, required this.documentId});

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: FutureBuilder<DocumentSnapshot>(
        future: FirebaseFirestore.instance.collection('user').doc(documentId).get(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          if (!snapshot.hasData || !snapshot.data!.exists) {
            return const Center(child: Text('用户信息不存在'));
          }
          var userData = snapshot.data!.data() as Map<String, dynamic>;
          return ListView(
            children: [
              DrawerHeader(
                child: Text(userData['name'] ?? '未知用户'),
              ),
              ListTile(title: Text('邮箱: ${userData['email']}')),
              // 根据需求添加更多用户信息项
            ],
          );
        },
      ),
    );
  }
}

关键注意点 #

• 不要传字符串字面量"docIDs[index]"，直接用变量docIDs[index]获取列表中的实际ID值。
• Scaffold的endDrawer是全局绑定的，无法直接给每个列表项单独绑定抽屉，因此需要用状态变量_selectedDocId动态控制抽屉展示的内容。
• 必须处理异步加载状态，避免docIDs为空时构建列表引发报错。

内容的提问来源于stack exchange，提问作者Abraham Esparza