Flutter 从 ListView.builder 中点击一张卡片

Question

我的应用程序中有一个屏幕，我使用 ListView.builder:

从地图创建了一堆卡片

现在我想点击这些卡片，当我点击时，我会转到一个新的 activity 并将医生的姓名和他的其他信息传递给新的 activity。

我该怎么做？

这是一个代码示例

class DocBanner extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 10),
          child: Text(
            'Our Doctors:',
            style: TextStyle(
              fontSize: 18,
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.symmetric(
            horizontal: 5.0,
            vertical: 25.0,
          ),
          height: 190,
          width: size.width,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return Container(
                width: size.width - 150,
                child: Card(
                  child: Padding(
                    padding: const EdgeInsets.all(18.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text(
                          '${myList[index]['name']}',
                          style: TextStyle(
                            fontSize: 22,
                            fontWeight: FontWeight.bold,
                            letterSpacing: 2,
                          ),
                        ),
                        SizedBox(
                          height: size.height - (size.height * 0.99),
                        ),
                        Text(
                          '${myList[index]['specialite']}',
                          style: TextStyle(
                            fontSize: 20,
                          ),
                        ),
                        SizedBox(
                          height: size.height - (size.height * 0.99),
                        ),
                        Text(
                          '${myList[index]['city']}',
                          style: TextStyle(
                            fontSize: 20,
                            color: Colors.red,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              );
            },
            itemCount: myList.length,
          ),
        ),
      ],
    );
  }
}

Answer 1

您可以使用 GestureDetector 并在 onTap 方法中导航到另一个屏幕，如下所示：

ListView.builder(
    scrollDirection: Axis.horizontal,
    shrinkWrap: true,
    itemBuilder: (context, index) {
      return GestureDetector(
          onTap: navigateToOtherScreen(myList[index]),
          child: Container(
....

Flutter 从 ListView.builder 中点击一张卡片

Flutter click a card from a ListView.builder

flutter

flutter-listview