黑马程序员技术交流社区

标题: flutter中导航与返回 [打印本页]

作者: 小江哥    时间: 2020-1-14 11:29
标题: flutter中导航与返回
RaisedButton按钮组件
它有两个最基本的属性:
我们在作页面导航时,大量的使用了RaisedButton组件,这个组件的使用在实际工作中用的也比较多。
Navigator.push 和 Navigator.pop写一个Demo
我们现在就来作一个简单的案例,我们打开一个页面,页面上只有一个简单的按钮,按钮写着“查看商品详情页面”,然后点击后进入下一个页面,页面有一个按钮,可以直接返回。
代码如下,一定要动手敲一敲哦。
[AppleScript] 纯文本查看 复制代码
import 'package:flutter/material.dart';

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

class FirstScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      appBar: AppBar(title:Text('导航页面')),
      body:Center(
        child:RaisedButton(
          child:Text('查看商品详情页面'),
          onPressed: (){
            Navigator.push(context,new  MaterialPageRoute(
              builder:(context) =>new SecondScreen())
            );
          },
        )
      )
    );
  }
}

class SecondScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar:AppBar(title:Text('黑马商城商品详情页')),
      body:Center(child:RaisedButton(
        child:RaisedButton(
          child:Text('返回'),
          onPressed: (){
            Navigator.pop(context);
          },
        )
      ))
    );

  }
}
填坑,如果是1.0以下版本,热更新的时候会有时不能实现导航,这个需要你重新启动一下虚拟机。






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2