首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ListView中的Navigator.push,ListTile不工作

是因为ListView是一个滚动列表,当点击ListTile时,会触发Navigator.push方法进行页面跳转,但由于ListView的滚动特性,会导致点击事件被ListView捕获而无法正常触发跳转。

解决这个问题的方法是使用GestureDetector来包裹ListTile,并监听点击事件,然后在点击事件中执行Navigator.push方法进行页面跳转。具体步骤如下:

  1. 导入flutter/material.dart库,以便使用ListView和ListTile组件。
  2. 在ListView中使用Builder组件包裹,并传入BuildContext参数。
  3. 在Builder的builder回调函数中返回一个GestureDetector组件,将ListTile作为其child。
  4. 在GestureDetector的onTap回调函数中执行Navigator.push方法进行页面跳转。

以下是示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10,
      itemBuilder: (BuildContext context, int index) {
        return Builder(
          builder: (BuildContext context) {
            return GestureDetector(
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => NextPage()),
                );
              },
              child: ListTile(
                title: Text('Item $index'),
              ),
            );
          },
        );
      },
    );
  }
}

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Next Page'),
      ),
      body: Center(
        child: Text('This is the next page.'),
      ),
    );
  }
}

在上述示例中,我们使用ListView.builder构建了一个包含10个ListTile的滚动列表。通过Builder组件包裹ListTile,并在GestureDetector的onTap回调函数中执行了页面跳转操作。

这样,当点击ListTile时,就能正常触发页面跳转,解决了ListView中的Navigator.push,ListTile不工作的问题。

推荐的腾讯云相关产品:腾讯云移动应用分析(MTA),腾讯云移动推送(TPNS)。

腾讯云移动应用分析(MTA)是一款专业的移动应用数据分析产品,可帮助开发者深入了解用户行为、应用性能和用户反馈,提供全面的数据分析和运营支持。了解更多信息,请访问:腾讯云移动应用分析(MTA)

腾讯云移动推送(TPNS)是一款高效、稳定的移动消息推送服务,支持Android、iOS等多个平台,可实现个性化推送、定时推送、地理位置推送等功能,帮助开发者提升用户留存和活跃度。了解更多信息,请访问:腾讯云移动推送(TPNS)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 构建完整应用手册-导航器 顶

在我们FirstScreen部件build方法,我们将更新onPressed回调: // Within the `FirstScreen` Widget onPressed: () { Navigator.push...在这个例子,我们将生成20个待办事项并使用ListView显示它们。 有关使用列表更多信息,请参阅基本列表配方。...我们将生成20个Todos并将它们显示在ListView! 3.创建一个可以显示关于待办事项信息详情屏幕 现在,我们将创建我们第二个屏幕。...为了达到这个目的,我们将为我们ListTile部件编写一个onTap回调函数。 在我们onTap回调,我们将再次使用Navigator.push方法。...new ListView.builder( itemCount: todos.length, itemBuilder: (context, index) { return new ListTile

4.9K10

利用flutter实现炫酷list

前言 使用了flutter一段时间,越来越喜欢flutter了,flutter比我们想象强大。这篇文章介绍了怎么使用flutter来展示一个很漂亮list,先看下效果图。 ?...widget是ListTile和CircleAvatar,用法也比较简单,我直接贴代码了: ListTile( leading: CircleAvatar( backgroundImage: NetworkImage...ListView.builder() ,两个必传参数itemCount和itemBuilder,前者控制列表数量,后者控制item展示,因为item样式还是比较多,所以抽离成单独StatelessWidget...点击item时候,我们使用Navigator.push跳转到详情页面 图片展示,我们还是使用FadeInImage,这种渐入效果用户体验还是很不错。...,有兴趣同学可以丰富下页面的样式和内容 感兴趣同学可以看下源码xch1029/awesomelist 总结 以上就是这篇文章全部内容了,希望本文内容对大家学习或者工作具有一定参考学习价值,谢谢大家对

93510

开始使用-编写你第一个Flutter应用程序 顶

用户可以点击应用栏右上方列表图标,以移动到仅列出收藏名称新路由。 动画GIF显示完成应用程序工作方式。 ? 你会学到什么: Flutter应用程序基本结构。...小部件主要工作是提供一个build()方法,该方法描述如何根据其他较低级别的小部件来显示小部件。 此示例小部件树由包含Text小部件Center小部件组成。...当用户滚动时,ListView小部件显示列表将无限增长。 ListViewbuilder工厂构造函数允许您根据需要懒惰地构建列表视图。...新页面的内容是使用匿名函数在MaterialPageRoutebuilder属性构建。 将呼叫添加到Navigator.push,如突出显示代码所示,将路由推送到导航器堆栈。...现在,添加生成ListTile代码。 ListTiledivideTiles()方法在每个ListTile之间添加水平间距。

9.5K20

flutter系列之:flutterlistview高级用法

简介一般情况下,我们使用Listview方式是构建要展示item,然后将这些item传入ListView构造函数即可,通常情况下这样做是够用了,但是排除我们会有一些其他特殊需求。...今天我们会来讲解一下ListView一些高级用法。ListView常规用法ListView常规用法就是直接使用ListView构造函数来构造ListView各个item。...其中ListView有一个children属性,它接收一个widgetlist,这个list就是ListView要呈现对象。...因为这次我们要使用builder,所以没有必要在item生成时候就创建好widget,我们可以将widget创建放在ListViewbuilder。...还是上面的例子,我们可以在创建items数组时候就根据i不同来生成不同item类型,也可以如下所示,在itemBuilder根据index不同来返回不同item:body: ListView.builder

1.4K20

flutter系列之:flutterlistview高级用法

简介 一般情况下,我们使用Listview方式是构建要展示item,然后将这些item传入ListView构造函数即可,通常情况下这样做是够用了,但是排除我们会有一些其他特殊需求。...今天我们会来讲解一下ListView一些高级用法。 ListView常规用法 ListView常规用法就是直接使用ListView构造函数来构造ListView各个item。...其中ListView有一个children属性,它接收一个widgetlist,这个list就是ListView要呈现对象。...因为这次我们要使用builder,所以没有必要在item生成时候就创建好widget,我们可以将widget创建放在ListViewbuilder。...还是上面的例子,我们可以在创建items数组时候就根据i不同来生成不同item类型,也可以如下所示,在itemBuilder根据index不同来返回不同item: body: ListView.builder

1.3K20

《深入浅出Dart》Flutter实战之TODO应用

现代JavaScript高级小册 深入浅出Dart 现代TypeScript高级小册 Flutter实战之TODO应用 在本篇文章,我们将构建一个TODO应用,使用最新Dart语法和Flutter框架...todos.length, itemBuilder: (context, index) { final todo = _todos[index]; return ListTile...todo) async { final editedTodo = await Navigator.push( context, MaterialPageRoute(...在build方法,我们使用Scaffold和ListView.builder来显示所有的任务,并为每个任务提供了标题、描述和完成状态展示。...在initState方法,我们初始化了文本编辑器控制器,并根据传入任务初始化了相应值。 在build方法,我们使用Scaffold和Column来显示标题、描述和完成状态输入字段。

19720

Flutter 构建完整应用手册-列表 顶

创建一个ListView 使用标准ListView构造函数非常适合仅包含少量项目的列表。 我们还将使用内置ListTile部件来为我们项目提供一个可视结构。...例如,您数据源可能是消息列表,搜索结果或商店产品。 大多数情况下,这些数据将来自互联网或数据库。 在这个例子,我们将使用List.generate构造函数生成一个10000个字符串列表。...这是ListView.builder将发挥作用地方。 在我们例子,我们将在它自己行上显示每个字符串。...开始使用网格最简单方法是使用GridView.count构造函数,因为它允许我们指定我们想要行数或列数。 在这个例子,我们将生成一个100个部件列表,在列表显示它们索引。...这将帮助我们可视化GridView工作原理。 new GridView.count( // Create a grid with 2 columns.

2.5K20
领券