从 JSON 获取的 OnTap ListTile，导航到另一个屏幕

Posted 2023-02-23

【中文标题】从 JSON 获取的 OnTap ListTile，导航到另一个屏幕

【英文标题】：OnTap ListTile fetched from JSON, navigate to another screen

【发布时间】：2021-06-23 15:29:32

【问题描述】：

我有一个带有过滤器的搜索/下拉栏，其中包含一些从 json 文件生成的 ListTiles。我希望用户能够单击 ListTile 并转到该 Tile 的屏幕。

示例：Knossos 的 ListTile on tap > 导航到 Knossos()，当他们点击 Malia 时，他们应该导航到 Malia()。

这可能吗？

Json 列表：

[
    
        "image": "images/crete/history/Knossos.jpg",
        "title": "Knossos",
        "description": "The most famous archaeological site in Crete..."
    ,

    
        "image": "images/crete/history/Malia.jpg",
        "title": "Malia",
        "description": "The Minoan palatial complex of Malia is..."
    
]

ListTile：

return ListTile(
                      leading: Container(
                        height: 50,
                        width: 50,
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            image: AssetImage(item.image),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                      title: Text(item.title),
                      subtitle: Text(item.description),
                      onTap: ()
                        // how do I make every tile navigate to another screen?
                      ,
                    );

【问题讨论】：

你的方法是错误的。或者，您可以将 TITLE 和其他数据变量传递给页面，而不是为每个项目创建类。

我不确定你的意思.. 还在学习颤振。

【参考方案1】：

@Amon Chowdhury 的意思是您不应该为每个卡片详细信息创建单独的类。比如说，如果您的 ListView 有 5 张卡片，分别命名为 Card1、Card2、Card3、Card4、Card5，并且当您点击它们时，您希望在新页面上查看每张卡片的详细信息。然后，与其创建不同的类，如 Card1()、Card2()、Card3() 等，不如创建一个名为 CardDetailsPage() 的类，并将获取的 json 作为参数传递。

以下是如何实现我们上面所说的示例：

首先出现您的列表视图所在的页面：

class TestPage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    

    return Material(
      child: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: ListView(
          scrollDirection: Axis.vertical,
          children: [
            ListTile(
                title: Text("Card 1"),
                onTap: ()
                  Navigator.push(context, MaterialPageRoute(builder: (context) => CardDetailsPage("Card 1", "Card 1 details")));
                ,
            ),
            ListTile(
              title: Text("Card 2"),
              onTap: ()
                Navigator.push(context, MaterialPageRoute(builder: (context) => CardDetailsPage("Card 2", "Card 2 details")));
              ,
            ),
            ListTile(
              title: Text("Card 1"),
              onTap: ()
                Navigator.push(context, MaterialPageRoute(builder: (context) => CardDetailsPage("Card 3", "Card 3 details")));
              ,
            ),
            ListTile(
              title: Text("Card 4"),
              onTap: ()
                Navigator.push(context, MaterialPageRoute(builder: (context) => CardDetailsPage("Card 4", "Card 4 details")));
              ,
            ),
          ],
        ),
      ),
    );
  

然后是你点击的页面和列表中的listTile。

class CardDetailsPage extends StatelessWidget 

  final String name;
  final String details;

  CardDetailsPage(this.name,this.details);

  @override
  Widget build(BuildContext context) 
    return Material(
      child: Container(
        child: Center(child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text("Name of card : "  + name),
            Text("Details : " + details),
          ],
        )),
      ),
    );
  

正如您在上面的示例中看到的，我已将两个字符串传递到详细信息页面。相反，您可以将解码后的 json 作为 Map 或您从 json 获得的 imageURL、标题和描述作为不同的字符串分别传递到您的详细信息页面。

【讨论】：

感谢您的建议！修正了方法并且有效！