介绍
最近学习了Flutter的一些控件使用,然后在Github上面看见了一个挺漂亮的登录界面,于是就用Flutter自己模仿地实现了一下。原作者做得比较好看,不过只是单纯实现界面。所以自己加了些东西,比如Key的使用和InheritedWidget的使用。
下面是一些总结,如果有说错的地方,还请各位指出来,谢谢。
最终的展示界面
代码结构
每个类的名字,相信大家一看就知道对应的作用类。每个类的作用,我在代码里面都有注释,可以去看下代码。
主要用到的控件
-
利用Row,Column沿水平方向或者垂直方向排列子布局
-
利用Stack实现布局层叠,利用Positioned控件实现绝对定位
-
利用Container实现装饰效果
-
利用TextFormField实现文本输入,利用Form来管理这些TextFormField
-
利用Key来获取widget的状态
-
利用InheritedWidget可以把数据传递给子控件
-
利用PageView和PageController实现页面滑动切换
在pubspec.yaml中添加依赖
-
font_awesome_flutter,这个一个Flutter的图标库
-
添加一张登录界面的顶部图片,并声明资源路径。下面的这种写法,会之间把整个文件夹下面的资源都导入应用程序,可以不用一个一个资源地进行声明。
-
random_pk。这里说一下这个库的作用,一方面是为容器提供随机颜色。另一方面,我觉得可以这个有颜色的容器进行调试布局,这个RandomContainer的用法是跟Container一样的,只需包裹child就可以了。然后你可以通过容器的背景的大小,来判断是否所绘制布局的大小是不是对的,看起来比较直观一些,而且自己可以不用手动的去写container+color的那种写法。当你不需要用的时候,再把这一层RandomContainer给去掉就可以了。我自己在平时用的时候,发现确实挺有作用的,大家可以拿去试试。
random_pk: any
font_awesome_flutter: any
//省略部分代码
assets:
- assets/
代码实现
1.利用代码模板生成代码,新建一个空页面(如果手动打出一段stateful的代码是真的麻烦)
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
@override
Widget bui