futter页面跳转,列表跳转至详情页介绍

2020-07-01    分类:前端    标签:Flutter    阅读:233


1、使用InkWell()包裹元素,onTap(){}点击跳转

onTap: (){
  Navigator.of(context).push(
     MaterialPageRoute(builder: (context)=>DetailPage(
     eachVodId: val['id'],
     eachVodName: val['vod_name'],
     p:1
     ))
);
}

1.1、demo代码:

      return InkWell(
        onTap: (){
          Navigator.of(context).push(
              MaterialPageRoute(builder: (context)=>DetailPage(
                  eachVodId: val['id'],
                  eachVodName: val['vod_name'],
                  p:1
              ))
          );
        },
      );

2、引入详情页面,不然报错

import 'detail_page.dart';

3、详情页接受数据:

3.1、接受数据:

DetailPage({Key key, @required this.eachVodId, @required this.eachVodName, @required this.p, @required this.url}) : super(key: key);

定义变量:

  final int eachVodId;
  final String eachVodName;
  final int p;

3.2,、获取数据:

widget.eachVodId;

3.3、demo代码:

import 'package:flutter/material.dart';
class DetailPage extends StatefulWidget{
  DetailPage({Key key, @required this.eachVodId, @required this.eachVodName, @required this.p, @required this.url}) : super(key: key);
  final int eachVodId;
  final String eachVodName;
  final int p;
  _DetailState createState() => _DetailState();
}
class _DetailState extends State<DetailPage> {
  @override
  void initState() {
    super.initState();
    var map = Map();
    map["id"] = widget.eachVodId;
    map["p"] = widget.p;
}
Widget build(BuildContext context) {}
}


【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元 618年中云钜惠大促,精选云产品1折起,助力新基建,618年中大促云服务器88元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/355.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×