Flutter 入门与实战（十五），html5移动端开发

最新推荐文章于 2024-04-05 09:38:10 发布

boos创新

最新推荐文章于 2024-04-05 09:38:10 发布

阅读量602

点赞数

分类专栏：程序员文章标签：面试移动开发 android

本文链接：https://blog.csdn.net/m0_64604893/article/details/121886214

版权

本文介绍了Flutter中如何在移动端开发中进行路由参数传递，通过实例展示了在列表点击时携带数据跳转到详情页，并在返回时回传参数。详细讲解了如何在`onGenerateRoute`中拦截路由参数，以及最终实现的效果。

摘要由CSDN通过智能技术生成

}

可以携带一个 result 回传到上级页面。

代码实现

我们使用一个列表跳转到详情页来演示路由参数获取（列表构建文章请看Flutter 入门与实战（五）：来一个图文并茂的列表）。点击列表行时携带列表数据项的 id 跳转到详情页。从详情页返回时再把该 id 回传。列表项的 Widget 新增了一个 id属性，由构建列表时初始化得到。

class DynamicItem extends StatelessWidget {
final int id;
final String title;
final String imageUrl;
final int viewCount;
static const double ITEM_HEIGHT = 100;
static const double TITLE_HEIGHT = 80;
static const double MARGIN_SIZE = 10;
const DynamicItem(this.id, this.title, this.imageUrl, this.viewCount,
{Key key})
: super(key: key);
//…
}

列表的容器使用 GestureDetector 包裹，以便响应点击事件。 onTap 方法定义为一个 async 方法，以便使用 await 获取导航返回时的参数，并使用一个 SnackBar 显示返回的 id。这里 pushNamed 携带了一个 Map