Flutter页面/组件传值

父子组件之间的传值

父组件

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Test",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Test"),
        ),
        body: MyText(
          str1: "传递的值", //向自定义的MyText类传值，格式：参数名称:参数值
        ),
      ),
    );
  }
}

class MyText extends StatelessWidget {
  const MyText({Key key,@required this.str1}) : super(key: key);  //接收传递过来的值，使用@required修饰，表示为必传参数
  final String str1;  //定义接收参数

  @override
  Widget build(BuildContext context) {
    return Text(str1);
  }
}

页面导航打开新页面和返回新页面

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      title: "导航演示",
      home: FirstScreen(),
    )
  );
}

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(title: Text("页面一"),),
        body: Center(
          child: RaisedButton(
            onPressed: (){
              Navigator.push(context, MaterialPageRoute(
                builder: (context) => SecondScreen()
              ));  //第一个参数是上下文，第二个参数是路由参数
            },
            child: Text("打开新视图"),
          ),
        ),
      )
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("页面二"),),
      body: Center(
        child: RaisedButton(
          child: Text("返回"),
          onPressed: (){
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

导航之间的传值

import 'package:flutter/material.dart';

/**
 * 建立一个model类
 */
class ProductModel{
  final String title; //商品标题
  final String desc;  //商品详情
  ProductModel(this.title,this.desc);  //使用构造函数
}

void main() {
  runApp(MaterialApp(
    title: "导航之间的传值",
    home: FirstController(
      /**
       * 为FirstController的 models 属性赋值，
       * 传递的是一个数组，数组中都是ProductModel类，
       * ProductModel有两个属性，所以传递形参传递两个
       */
      models:List.generate(20, (i)=>ProductModel("商品 $i","商品 $i 的描述 $i"))
    ),
  ));
}

class FirstController extends StatelessWidget {
  
  final List<ProductModel> models;  //FirstController的属性，
  FirstController({Key key,@required this.models}):super(key:key);  //为属性models接收值

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("页面一"),),
      body: ListView.builder(         //创建一个列表
        itemCount: models.length,
        itemBuilder: (BuildContext context, int index) {
        return ListTile(
          leading: Icon(Icons.iso),
          title: Text(models[index].title),
          onTap: (){              //cell的响应方法，点击cell会执行这个方法
            Navigator.push(context, MaterialPageRoute(    //导航打开新视图
              builder: (context) => SecondController(model:models[index]) //打开第二个页面，并传值，传递值的名称是model
            ));
          },
        );
       },
      ),
    );
  }
}

class SecondController extends StatelessWidget {

  final ProductModel model; //SecondController的model属性
  SecondController({Key key,@required this.model}):super(key : key);  //接收传递过来的值

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("页面二"),),
      body: Center(child: Text(model.title),),
    );
  }
}

返回页面传值

创建一个TipRoute路由，它接受一个提示文本参数，负责将传入它的文本显示在页面上，另外TipRoute中我们添加一个“返回”按钮，点击后在返回上一个路由的同时会带上一个返回参数，下面我们看一下实现代码。

class TipRoute extends StatelessWidget {
  TipRoute({
    Key key,
    @required this.text,  // 接收一个text参数
  }) : super(key: key);
  final String text;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("提示"),
      ),
      body: Padding(
        padding: EdgeInsets.all(18),
        child: Center(
          child: Column(
            children: <Widget>[
              Text(text),
              RaisedButton(
                onPressed: () => Navigator.pop(context, "我是返回值"),
                child: Text("返回"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

下面是打开新路由TipRoute的代码：

class RouterTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: () async {
          // 打开`TipRoute`，并等待返回结果
          var result = await Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) {
                return TipRoute(
                  // 路由参数
                  text: "我是提示xxxx",
                );
              },
            ),
          );
          //输出`TipRoute`路由返回结果
          print("路由返回值: $result");
        },
        child: Text("打开提示页"),
      ),
    );
  }
}

命名路由

定义路由的名称，使用路由名称打开视图

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      title: "导航演示",
      routes: {         //命名路由，1，注册路由表
        "second_page": (context) => SecondScreen()
      },
      home: FirstScreen(),
    )
  );
}

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(title: Text("页面一"),),
        body: Center(
          child: RaisedButton(
            onPressed: (){
             Navigator.pushNamed(context, "second_page"); //2,就可以使用命名的路由打开新视图了
            },
            child: Text("打开新视图"),
          ),
        ),
      )
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("页面二"),),
      body: Center(
        child: RaisedButton(
          child: Text("返回"),
          onPressed: (){
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

命名路由传参

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      title: "导航演示",
      routes: {         //命名路由，1，注册路由表
        "second_page": (context) => SecondScreen()
      },
      home: FirstScreen(),
    )
  );
}

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(title: Text("页面一"),),
        body: Center(
          child: RaisedButton(
            onPressed: (){
             Navigator.of(context).pushNamed("second_page",arguments:"页面传值",); //2,使用命名的路由打开新视图,并传值
            },
            child: Text("打开新视图"),
          ),
        ),
      )
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({Key key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {

    var value = ModalRoute.of(context).settings.arguments; //3.在build方法中，接收传递过来的值

    return Scaffold(
      appBar: AppBar(title: Text("页面二"),),
      body: Center(
        child:Column(
          children: <Widget>[
            Text(value),
            FlatButton(
              child: Text("返回"),
              onPressed: (){
                Navigator.pop(context);
              },
            )
          ],
        ),
      ),
    );
  }
}

路由生成钩子

可以在onGenerateRoute方法中做路由判断，比如判断用户是否有token打开不同的页面等等

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      title: "导航演示",
      routes: {
        // "two_page":(context) => SecondScreen(),      //注意，使用onGenerateRoute时，不能注册routes，否则会不执行onGenerateRoute方法
      },
      onGenerateRoute: (RouteSettings setting){         //1，使用navigator.pushname方法时，在未找到路由名称，会执行这个里面的方法
        // setting.isInitialRoute; bool类型 是否初始路由
        print(setting.name);  //要跳转的路由名key
        return PageRouteBuilder(
            pageBuilder: (BuildContext context, _, __) {
            //这里为返回的Widget
              switch (setting.name) {   //判断，如果是跳转路由名称是“two_page”，则返回SecondScreen()这个类
                case "two_page":
                  return SecondScreen();
                  break;

                default:
                  return FirstScreen();
              }
            },
            opaque: false,
            //跳转动画
            transitionDuration: new Duration(milliseconds: 200),
            transitionsBuilder:
                (___, Animation<double> animation, ____, Widget child) {
              return new FadeTransition(
                opacity: animation,
                child: new ScaleTransition(
                  scale: new Tween<double>(begin: 0.5, end: 1.0)
                      .animate(animation),
                  child: child,
                ),
              );
            });
      },
      home: FirstScreen(),
    )
  );
}

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(title: Text("页面一"),),
        body: Center(
          child: RaisedButton(
            onPressed: (){
              Navigator.of(context).pushNamed("two_page",arguments: "传递参数"); //2，打开新页面，传递参数
            },
            child: Text("打开新视图"),
          ),
        ),
      )
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    var value = ModalRoute.of(context).settings.arguments;  //3,接收上个页面传递对参数

    return Scaffold(
      appBar: AppBar(title: Text("页面二"),),
      body: Center(
        child:Column(
          children: <Widget>[
            // Text(value),
            FlatButton(
              child: Text("返回"),
              onPressed: (){
                Navigator.pop(context);
              },
            )
          ],
        ),
      ),
    );
  }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,839评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,543评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,116评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,371评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,384评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,111评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,416评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,053评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,558评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,756评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,324评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2赞 345