Flutter學習二——登錄成功后跳轉主界面

在上一篇我已經寫了個登錄的主界面，這一篇登錄的界面和上一篇的差別就只是將_login()方法的寫法給改變了

上一篇 FLutter的登錄界面傳送門

因為登錄成功之后我們需要跳轉到主界面，所以需要用到路由

代碼

  //region 登錄功能，密碼正確則跳轉
  bool _login() {
    if (_userName.text == "admin" && _userPws.text == "123456") {
      Navigator.of(context).pushAndRemoveUntil(
          new MaterialPageRoute(
              builder: (context) => new IndexPage()),
              (route) => route == null);
      return true;
    } else {
      showDialog(
          context: context,
          builder: (context) {
            return AlertDialog(
              title: Text("提示"),
              content: Text("賬號或密碼錯誤，請檢查"),
              actions: <Widget>[
                FlatButton(
                  child: Text("確認"),
                  onPressed: () {
                    Navigator.of(context).pop(true); //關閉對話框
                  },
                )
              ],
            );
          });
      return false;
    }
  }

 

我們再來看看上一篇是怎么寫的

 

 可以看到，上一篇用的是 void 這一次用的是bool，之所以用bool的原因是因為我們需要判斷用戶名密碼是否正確，這時候就需要判斷true和false，

用void就沒法判斷，強行跳轉就會報錯。

登錄按鈕事件不變

 

                  onPressed: () {
                    if ((_keyFrom.currentState as FormState).validate()) {
                      _login();
                    }
                  },

 

這段代碼也很簡單，就是先判斷輸入框是否輸入正確，和上一篇一樣，然后在判斷登錄狀態是否為true，

如果為true則跳轉到IndexPage的這個界面去，跳轉過去后清空路由，使用戶無法使用返回鍵返回登錄狀態。

 

indexPage的代碼，就是實現一個底部的導航欄

import 'package:flutter/material.dart';
import 'package:newlogin/firstPage.dart';
import 'package:newlogin/secondPage.dart';
import 'package:newlogin/thirdPage.dart';


class IndexPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => IndexPageState();

}
class IndexPageState extends State<IndexPage> {
  int _tabIndex=0;
  List<BottomNavigationBarItem> _navigationView;
  var appBarTitles=['首頁','發現','我的'];
  PageController pageController;
  var _body;
//  初始化幾個底部item
  initData(){
    _body=new IndexedStack(
      children: <Widget>[
        new FirstPage(),new SecondPage(),new ThirdPage()
      ],
      index: _tabIndex,
    );
  }
  @override
  void initState(){
    super.initState();
    _navigationView=<BottomNavigationBarItem>[
      new BottomNavigationBarItem(
        icon: const Icon(Icons.home),
        title: new Text(appBarTitles[0]),
        backgroundColor: Colors.blue
      ),
      new BottomNavigationBarItem(
        icon: const Icon(Icons.widgets),
        title:new Text(appBarTitles[1]),
        backgroundColor: Colors.blue
      ),
      new BottomNavigationBarItem(
        icon: const Icon(Icons.person),
        title: new Text(appBarTitles[2])
      ),
    ];
  }
  final navigatorKey=GlobalKey<NavigatorState>();
  @override
  Widget build(BuildContext context) {
    initData();
    return new MaterialApp(
      navigatorKey: navigatorKey,
      theme: new ThemeData(
        primaryColor: Colors.blue,
        accentColor: Colors.blue,
      ),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(
            appBarTitles[_tabIndex],
            style: new TextStyle(color: Colors.white),
          ),
        ),
        body: _body,
        bottomNavigationBar: new BottomNavigationBar(
          items: _navigationView
          .map((BottomNavigationBarItem navigationView)=>navigationView)
          .toList(),
          currentIndex: _tabIndex,
          type: BottomNavigationBarType.fixed,
          onTap: (index) {
            setState(() {
              _tabIndex = index;
            });
          },
        ),
      ),
    );
  }

}

firstPage.dart代碼，其他兩個也一樣，就不一一上代碼了

import 'package:flutter/material.dart';

class FirstPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new FirstPageState();

}

class FirstPageState extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Text('這是第一個界面'),
      ),
    );
  }

}

GitHub傳送門

如果上面的比較慢可以用下面的  Gitee傳送門