扑动 Firebase 动画列表视图如何将数据传递到详细信息屏幕

Posted 2023-02-23

【中文标题】扑动 Firebase 动画列表视图如何将数据传递到详细信息屏幕

【英文标题】：flutter Firebase Animated List view how to pass data to detail screen

【发布时间】：2021-11-07 13:26:06

【问题描述】：

在动画列表视图的第一个屏幕上检索到的数据，并希望导航单击的项目详细信息屏幕并想了解如何在第二个屏幕小部件上传递值的完整详细信息

代码如下：

从 Firebase 实时数据库检索的数据

第一个屏幕：

 FirebaseAnimatedList(
      scrollDirection: Axis.horizontal,
      defaultChild: Center(child: CircularProgressIndicator()),
      query: reference,
      itemBuilder: (BuildContext context, DataSnapshot snapshot,
          Animation<double> animation, int index) 
        Map mydata = snapshot.value;
        mydata['key'] = snapshot.key;

        return InkWell(
          onTap: () 
            
              //// how to Navigate
            
          ,
          child: Container(
            width: 150,
            height: 150,
            child: Card(
              color: Colors.black87,
              child: FadeInImage(
                image: NetworkImage(mydata['image']),
                placeholder: AssetImage("assets/images/placeholder.png"),
              ),
            ),
          ),
        );
      ,
    )

如何在第二屏小部件上传递和分配值

第二屏

class SecondScreen extends StatefulWidget 
  const SecondScreen(Key? key) : super(key: key);

  @override
  _SecondScreenState createState() => _SecondScreenState();


class _SecondScreenState extends State<SecondScreen> 
  @override
  Widget build(BuildContext context) 
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 250,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.red),
        image: DecorationImage(
          fit: BoxFit.fill,
          image: NetworkImage(// How to pass  ),
              ),
        ),
      ),
    );
  

【参考方案1】：

您可以使用Navigator.push 和下一个屏幕导航到该方法。

为了发送数据，您可以在导航时通过构造函数将数据传递给第二个小部件。

解决方案：

将您的 SecondScreen 小部件更新为：

class SecondScreen extends StatefulWidget 
  final String url;
  const SecondScreen(Key? key, required this.url) : super(key: key);

  @override
  _SecondScreenState createState() => _SecondScreenState();


class _SecondScreenState extends State<SecondScreen> 
  @override
  Widget build(BuildContext context) 
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 250,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.red),
        image: DecorationImage(
          fit: BoxFit.fill,
          image: NetworkImage(widget.url),
        ),
      ),
    );
  

它将url 参数添加到SecondScreen 小部件的构造函数中，并使用widget.url 在State 中检索它。

将InkWell 的onTap 更新为：

  onTap: () 
            
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => SecondScreen(
                    url: mydata['image'],
                  ),
                ),
              );
            
          ,

它使用url 参数将数据传递给SecondWidget。

---

查看Send data to a new screen 了解更多。