flutter 页面之间跳转

1.基本跳转

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: '页面间跳转',
      home: FirstScreen(),
    ));

class FirstScreen 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) => SecondScreen()));
          },
        ),
      ),
    );
  }
}

class SecondScreen 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);
          },
        ),
      ),
    );
  }
}

2.传输数据

import 'package:flutter/material.dart';

class Product {
  final String title;
  final String des;

  Product(this.title, this.des);
}

void main() => runApp(MaterialApp(
      title: '传递数据',
      home: FirstScreen(
          products: List.generate(
              20, (index) => Product('标题${index + 1}', '描述${index + 1}'))),
    ));

class FirstScreen extends StatelessWidget {
  final List<Product> products;

  FirstScreen({Key key, @required this.products}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('商品列表'),
      ),
      body: Center(
        child: ListView.builder(
            itemCount: products.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(products[index].title),
                onTap: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => SecondScreen(
                                product: products[index],
                              )));
                },
              );
            }),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  final Product product;

  SecondScreen({Key key, this.product}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('商品详情页'),
      ),
      body: Center(
        child: Text(product.title),
      ),
    );
  }
}

3.界面退出返回数据

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(title: '第二个页面回传数据', home: FirstScreen()));

class RouteButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
      onPressed: () {
        _NavigateToSecondScreen(context);
      },
      child: Text('跳转第二个页面'),
    );
  }

  _NavigateToSecondScreen(BuildContext context) async {
    //入栈操作
    final result = await Navigator.push(
        context, MaterialPageRoute(builder: (context) => SecondScreen()));

    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text("$result"),
    ));
  }

//读取返回的值

}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('第二个页面回传数据'),
      ),
      body: Center(child: RouteButton()),
    );
  }
}

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