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

Question

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

示例：点击 Knossos 的 ListTile > 导航到 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?
                      },
                    );

Answer 1

@Amon Chowdhury 的意思是您不应该为每个卡片详细信息创建单独的 class。比如说，如果您的 ListView 有 5 张名为 Card1、Card2、Card3、Card4、Card5 的卡片，并且您想在点击它们时在新页面上查看每张卡片的详细信息。然后，而不是创建不同的 classes，如 Card1()、Card2()、Card3() 等。您应该创建一个名为 CardDetailsPage() 的单个 class 并传递您得到的 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 作为地图或从 json 获得的图像 URL、标题和描述作为不同的字符串分别传递到您的详细信息页面。

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

OnTap ListTile fetched from JSON, navigate to another screen

json

listview

flutter