Flutter学习之导航

flutter

1.普通跳转

import 'package:flutter/material.dart';

void main() =>  runApp(MaterialApp(
  title:'导航',
  home: MyfristScreen(),
));



class MysecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
       appBar: AppBar(title: Text('第二个页面')),
       body: Center(
         child: RaisedButton(
           child: Text('返回'),
           onPressed: (){
             Navigator.pop(context);
           },
         ),
       ),
    );
  }
}



class MyfristScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('首页'),),
      body: Center(
        child: RaisedButton(
          child: Text('进入子页面'),
          onPressed: (){
            Navigator.push(context, MaterialPageRoute(
             builder: (context)=>MysecondScreen()
            ));
          },
        ),
      ),
    );
  }
}

效果

Apr-27-2019 21-49-10.gif

核心功能就是

Navigator.push(context, MaterialPageRoute(
             builder: (context)=>MysecondScreen()
            ));

  Navigator.pop(context);

不需要解释了，一看就懂

2.带参数

import 'package:flutter/material.dart';

void main() =>  runApp(
  MaterialApp(
  title:'数据传递',
  home: PersonList(
    list: List.generate(
      20, 
      (i)=>Person('哈哈哈$i', i)
    ),
  ),
));



class Person{
  final String name;
  final int age;
  Person(this.name,this.age); 
}

class PersonList extends StatelessWidget {
  final List list;
  PersonList({Key key,@required this.list}):super(key:key);
  @override
  Widget build(BuildContext context) {
    list.forEach(
      (Person p){
        print("name==${p.name}");
      }
    );
    return Scaffold(
      appBar: AppBar(title: Text('人员列表'),),
      body: ListView.builder(
        itemCount: list.length,
        itemBuilder: (context,index){
          return ListTile(
            title:  Text('数据：${list[index].name}') ,
          onTap: (){
            print('${list[index].name}点击');
            Navigator.push(context, MaterialPageRoute(
              builder: (context) => PersonDetail(person: list[index])
            ));
          },
          );
        },
      ),
    );
  }
}

//详情页
class PersonDetail extends StatelessWidget {
  final Person person;
  PersonDetail({Key key,@required this.person}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(person.name),),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('name is ${person.name}'),
            Text('age is ${person.age}')
          ],
        ),
      ),
    );
  }
}

效果

效果

构造了一个Person类，首页是列表，进入子页面传递数据,传递参数，只需要第二个页面初始化的时候接收一下就行了

 Navigator.push(context, MaterialPageRoute(
              builder: (context) => PersonDetail(person: list[index])
            ));

3.子页面回传数据到首页

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
    title:'页面跳转返回数据',
    home:FirstPage()
  ));
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("首页"),),
      body: Center(
        child: RouteButton(),
      ),
    );
  }
}


//跳转的Button
class RouteButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      onPressed:(){
          _navigteToNextPage(context);
      },
      child: Text('去第二个页面'),
    );
  }
}
 _navigteToNextPage(BuildContext context) async{
   final reuslt = await Navigator.push(context, 
    MaterialPageRoute(builder:(context){
      return NextPage();
   } 
   )
   );
   Scaffold.of(context).showSnackBar(SnackBar(
     content: Text('$reuslt'),
     backgroundColor: Colors.greenAccent,
     duration: Duration(seconds: 1),
   ));
 }



class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('第二个页面'),),
      body: Center(
        child: Column(
          children: [
            MaterialButton(
              child: Text('我是按钮1'),
              onPressed: (){
                Navigator.pop(context,'按钮1');
              },
            ) ,
            MaterialButton(
              child: Text('我是按钮2'),
              onPressed: (){
                Navigator.pop(context,'按钮2');
              },
            ) ,
          ],
        ) ,
      ),
    );
  }
}

效果

Apr-27-2019 22-03-22.gif

回传回来的时候，用的异步函数async,dart的异步用async和await实现，具体见这里

这里还用到了一个类似于toast的SnackBar