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 {
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Flutter App',
//Login()这个Widget是在login.dart中定义的
home: new Login(),
);
}
}
login.dart
- login界面要实现跳转到home界面,所以,我们需要在文件头部引入
home.dart
并且这个界面中顶部导航栏也是作为一个自定义的组件引入的,所以1头部添加了../assets/components/myAppBar.dart
,
至于组件化的优点就是:便捷开发,易维护,可拆分…- 实现界面跳转的主要方法是
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> {