Flutter框架【3】路由跳转 以及 底部导航栏的实现

效果

注意：以上我只是实现了界面的跳转和底部导航栏与界面的联动切换，并未实现真正的·登录·和·前端输入合法验证·功能。

Flutter的组件化开发

前提：我们首先要理解Flutter的组件化开发。
在flutter组件化开发之前，我们是将所有代码写在main.dart当中。
这样会导致我们的代码结构不清晰，以及代码难以维护等问题的暴露。
为了解决以上问题，我们将一个界面，或者一个复用率比较高的组件单独写在一个.dart文件中，或者将同功能的文件放在views / components 这样的文件夹下。
以上，我们可以先将目录整理成如下图所示：

其中：红框中重要的是·login·界面和·home·界面，如果参与过Web开发，可以将其他五个界面当做·home·界面中的组件。
下图为功能实现的图解

路由跳转

这一部分我们主要实现的是界面跳转
因为该APP打开默认应该首先展示login界面，所以我们在main.dart中创建的界面应该是login界面

实现login界面

main.dart

import 'package:flutter/material.dart';
import './viewes/login.dart';
void main() => runApp(App());

main()函数就是整个程序入口，这个函数会创建一个名为App的Widget

class App extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
      title: 'My Flutter App',
      //Login()这个Widget是在login.dart中定义的
      home: new Login(),  
    );
  }
}

login.dart

1. login界面要实现跳转到home界面,所以,我们需要在文件头部引入home.dart
   并且这个界面中顶部导航栏也是作为一个自定义的组件引入的,所以1头部添加了../assets/components/myAppBar.dart，
   至于组件化的优点就是:便捷开发,易维护,可拆分…
2. 实现界面跳转的主要方法是
   Navigator.of(context).push(MaterialPageRoute(builder(context){return Home}))
   其中Home是home.dart中定义的Widget

import 'package:flutter/material.dart';
import './home.dart';
import '../assets/components/myAppBar.dart';
class Login extends StatefulWidget {
   
  State<StatefulWidget> createState() {
   
      return _LoginState();
  }
}
class _LoginState extends State<Login> {
   
  @override