flutter导航与路由

导航

导航用flutter的自带组件

思路和vue导航是一样的
1.声明一个数组，放入几个导航页面
2.声明一个index,显示当前页面，默认0
3.点击时切换 index，来切换新页面

class MainPageState extends State {

  int _selectedIndex = 0;
  var pageList = [
    new HomePage(),
    new FindPage(),
    new MinePage()
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: pageList[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('首页'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('发现'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('我的'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

路由配置

个人喜欢单独拉出一个文件来配置路由

1.新建一个routers目录，下新建一个router.dart文件
2.用键值对把 路由名->页面匹配起来
3.写一个静态类的push方法，提供页面跳转

class RouterUtil {
  static getWidget(String path){
    var _config = {
      'home':new HomePage(),
      'find':new FindPage(),
      'mine':new MinePage(),
      'scan':new Scan(),
      'recorder':new Recorder()
    };

    return _config['${path}'];
  }
  static push(BuildContext context, String path){
    Navigator.of(context).push(
      new MaterialPageRoute(
        builder: (context) => getWidget(path)
      )
    );
  }

页面跳转

class ListItemState extends State{
  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap:(){
        RouterUtil.push(context, widget.path);
      }
);

导航页面不要用 return new MaterialApp
这样跳转的页面会有 底部导航栏，系统认为是二级目录
要想跳到一个底部没有导航栏的页面建议用 return new Scaffold

class FindPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold (
        body: new FindPageWidget()
    );
  }
}

传参

路由页面

'scan':new ScanPageWidget(params:'${params}'),

push方法

  static push(BuildContext context, String path,String params ){
    Navigator.of(context).push(
      new MaterialPageRoute(
        builder: (context) => getWidget(path,params)
      )
    );
  }

跳转带参数

      onTap:(){
        RouterUtil.push(context, widget.path,'我是传参');
      }

页面显示

class ScanPageState extends State {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    startScan();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body:Container(
        margin: const EdgeInsets.all(0),
        alignment:Alignment.topLeft,
        color: Colors.green[100],
        child: new Column(
          children: [
            new Text('扫一扫有惊喜'),
            new Text('参数是：${widget.params}')
          ]
        ) 
      )
    );
  }
}