如何在 ListView Builder 中放置不同的图像并将用户重定向到其他页面？

Question

现在正在用Flutter写一段代码，我可以用ListView显示一个数据库。

但是，我想根据目的地的位置来放置目的地的图片，所以我想知道如何为每个不同的项目放置不同的图像？ onTap void 回调函数也是如此。我希望每个列表项转到不同的页面，其中提供了目的地的更多详细信息。

代码：

class _DispDestState extends State<DispDest> {
  List<AllDestinations> destinationsList = [];

  @override
  void initState() {
    super.initState();
    DatabaseReference referenceAllCourses = FirebaseDatabase.instance
        .reference()
        .child('Database')
        .child('Destinations');
    referenceAllCourses.once().then(((DataSnapshot dataSnapshot) {
      destinationsList.clear();
      var keys = dataSnapshot.value.keys;
      var values = dataSnapshot.value;
      for (var key in keys) {
        AllDestinations allDestinations = new AllDestinations(
          values[key]['name'],
          values[key]['description'],
          values[key]['category'],
        );
        if (allDestinations.category.toString() == 'Destination')
          destinationsList.add(allDestinations);
      }
      setState(() {});
    }));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            padding: EdgeInsets.fromLTRB(20, 5, 20, 10),
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    "Come and Explore",
                    textAlign: TextAlign.left,
                    style: TextStyle(
                      fontSize: 14,
                      fontStyle: FontStyle.italic,
                      fontWeight: FontWeight.w500,
                      letterSpacing: 0.5,
                    ),
                  ),
                  SizedBox(height: 15),
                  Expanded(
                    child: SingleChildScrollView(
                      child: Column(children: <Widget>[
                        destinationsList.length == 0
                            ? Center(
                                child: Text(
                                "Loading...",
                                style: TextStyle(fontSize: 15),
                              ))
                            : ListView.builder(
                                scrollDirection: Axis.vertical,
                                shrinkWrap: true,
                                physics: const NeverScrollableScrollPhysics(),
                                itemCount: destinationsList.length,
                                itemBuilder: (_, index) {
                                  return DestinationCard(
                                      title: destinationsList[index].destname,
                                      onTap: () {},
                                      img: 'assets/icons/temp.png');
                                })
                      ]),
                    ),
                  ),
                ])));
  } 
}

class DestinationCard extends StatelessWidget {
  final String title, img;
  final VoidCallback onTap;
  const DestinationCard({
    Key? key,
    required this.title,
    required this.img,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400,
      height: 190,
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: onTap,
          child: Column(
            children: <Widget>[
              Container(
                padding: EdgeInsets.fromLTRB(15, 155, 0, 0),
                width: 350,
                height: 190,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  image: DecorationImage(
                      image: AssetImage(img), fit: BoxFit.cover),
                ),
                child: Text(
                  title,
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 18,
                      fontWeight: FontWeight.bold),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

您应该将名为 imagePath 的参数添加到 AllDestinations class。所以在ListView.builder中使用DestinationCard时，可以加上：

return DestinationCard(
         title: destinationsList[index].destname,
         onTap: () {},
         img: destinationsList[index].imagePath,

);

如何在 ListView Builder 中放置不同的图像并将用户重定向到其他页面？

How to put different images and redirect users to other pages in ListView Builder?

dart

firebase

firebase-realtime-database

flutter