firebase Flutter火力基地:显示容器中listTile的详细信息

q43xntqr  于 2023-03-03  发布在  Flutter
关注(0)|答案(1)|浏览(78)

我正在尝试用Flutter Web创建用户列表。列表已经准备好了。但是我希望当我点击listTile时,它应该在列表旁边的容器中显示该特定listTile的详细信息,而不是导航到新页面。我该怎么做?有人能帮助我吗?或者我必须导航到新页面吗?
我的代码:

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

class AllUserScreen extends StatefulWidget {
  const AllUserScreen({super.key});

  @override
  State<AllUserScreen> createState() => _AllUserScreenState();
}

class _AllUserScreenState extends State<AllUserScreen> {
  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    final screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
        // extendBodyBehindAppBar: true,
        appBar: AppBar(
          centerTitle: true,
          title: const Text(
            'All Users',
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 30, color: Colors.green),
          ),
          backgroundColor: Colors.transparent,
          elevation: 0,
          leading: IconButton(
              onPressed: () {
                Navigator.pop(context);
              },
              icon: const Icon(
                Icons.arrow_back_ios,
                color: Colors.green,
              )),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            SizedBox(
              width: screenWidth * 0.4,
              child: StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(
                // inside the <> you enter the type of your stream
                stream:
                    FirebaseFirestore.instance.collection('users').snapshots(),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return ListView.builder(
                      itemCount: snapshot.data!.docs.length,
                      itemBuilder: (context, index) {
                        return Card(
                          child: ListTile(
                            onTap: () {},
                            title: Text(
                              snapshot.data!.docs[index].get('Full name'),
                            ),
                          ),
                        );
                      },
                    );
                  }
                  if (snapshot.hasError) {
                    return const Text('Error');
                  } else {
                    return const Center(child: CircularProgressIndicator());
                  }
                },
              ),
            ),
            SizedBox(
              width: screenWidth * 0.03,
            ),
            Container(
              width: screenWidth * 0.4,
              color: Colors.grey,
            )
          ],
        ));
  }
}

图片:All users

wnavrhmk

wnavrhmk1#

你必须把用户从列表瓦片中获取到容器中,为此你可以把容器中当前可见的用户存储在有状态小部件中,然后使用setState用点击的用户更新用户界面。

class _AllUserScreenState extends State<AllUserScreen> {

Map<String, dynamic>? _selectedUser;

...

ListTile(
  onTap: () {
    setState(() {
      _selectedUser = snapshot.data!.docs[index]
    });
  }
)

...

Container(
  width: screenWidth * 0.4,
  color: Colors.grey,
  child: Text(_selectedUser.get('Full name') ?? ''),
)

相关问题