如何在 Flutter 中使用 Navigator.push 在 ListView 上设置可点击按钮答案

【问题标题】：how to set clickable button at ListView with Navigator.push in Flutter如何在 Flutter 中使用 Navigator.push 在 ListView 上设置可点击按钮
【发布时间】：2021-02-11 15:18:51
【问题描述】：

我设置了一个包含多个容器的 listView，接下来每个容器都包含在 StatelessWidget 中。但最后我无法使用 Navigator.push 在 ListView 添加可点击按钮。这个listView的源码

child: ListView(

        children: <Widget>[

          home_left_container("Alphabet", "asset/drink_images/tea.png", Colors.white),

          SizedBox(height: 20),

          home_right_container("Number", "asset/drink_images/juice.png", Colors.white),
          SizedBox(height: 20),

          home_left_container("Word", "asset/drink_images/tea.png", Colors.white),
          SizedBox(height: 20),

          home_right_container("Fun & Sentence", "asset/drink_images/juice.png", Colors.white),
          SizedBox(height: 20),

        ],
      ),

【问题讨论】：

如果你想要一个onPressed or onTap 函数。用 GestureDetector 或 InkWell Widget 类包装你的 Widget home_left_container
@Reign 这里最好使用哪个函数
@Reign 我是新来的。可以详细点吗

标签： android flutter listview kotlin dart

【解决方案1】：

如果您想在列表项上按下按钮，您可以将这些项包装在 GestureDetector 或一些按钮中（例如 ElevatedButton）。最简单的方法是 GestureDetector。

假设您希望您的容器可点击，类似以下内容就足够了，

child: ListView(
        children: <Widget>[

          GestureDetector(
            onTap: () {
              Navigator.push(context, [define-your-route-here]);
            },
            child: home_left_container("Alphabet", "asset/drink_images/tea.png", Colors.white),,
          ),
          ...

        ],
      ),

【讨论】：

感谢您的回答，但下一个屏幕的导航器上没有显示“返回”按钮。请帮忙
为了让后退箭头自动出现，您需要在下一页的 Scafold 内创建一个 AppBar（没有前导小部件）。无论如何，你应该用完整的源代码在另一个线程中询问它。