本示例代码在这里Github.

tips: 在开始前,你该当快速理解下dart的基本语法

布局

本示例算是一个比较常见的大略app页面,包括顶部的一个导航栏及其title, 然后一个白底的页面,从上到下依次是一个图片显示控件,用户名和密码的文本输入控件,以及一个提交的按钮。

布局办法

Flutter系列2实现一个简单的登录界面

在开始Flutter布局前,心中该当始终记住一个观点,那便是在Flutter布局中显示的都是Widget,包括看得见页面、图片、输入框、按钮...其他看不见的列布局控件('Column'), 容器布局控件('Container')、('SizedBox'),用户表单显示的控件('Form') 乃至用作添补的控件('Padding'), 居中的控件('Center');

从main函数开始

void main() { debugPaintSizeEnabled = false; runApp(new LoginAlertDemoApp());}class LoginAlertDemoApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Login Alert', theme: new ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( title: Text('Login Alert'), ), body: new LoginHomePage(), )); }}复制代码

main函数顾名思义,便是app运行的入口,debugPaintSizeEnabled是用户调试显示的;然后是调用sdk的runApp方法,传入一个Widget工具并将它显示到屏幕上,以是此Widget便是APP显示的根本Widget,有点相称于iOS开拓中的rootViewController来卖力承载全体APP的显示。

在此示例中传入runApp方法的这个Widget是LoginAlertDemoApp,继续自StatelessWidget;重写了其build方法创建了一个MaterialApp的Widget。
也便是说紧张卖力显示的便是MaterialApp的工具,它是用于实现谷歌设计的一套material design设计风格的根本显示Widget,封装了一系列的常用组件和导航掌握,比如主题掌握。
从代码可以看到其home属性是一个Scaffold工具,Scaffold也是material design的根本组件之一,实现基本页面布局构造,比如页面导航栏,同时也封装了一系列的根本控件,比如'抽屉页',toast提示,底部sheet提示。
基于material design风格的app基本上都是构建在这2个根本控件之上的。

接下来便是我们自己实现的页面布局了,LoginHomePage继续自StatefulWidget,把稳到Widget有StatefulWidget和StatelessWidget之分,大略的理解呢便是StatefulWidget是具有可变状态的Widget, 它须要一个State来保存其生命周期中的一些状态数据,并在数据改变时通过setState关照到Widget及时更新。
而StatelessWidget则是无状态的,不须要掩护其状态,只是大略的显示。

以是我们须要_LoginHomePageState来掩护LoginHomePage生命周期中的一些状态变革数据,并通过build方法来实时构建LoginHomePage的显示Widget。

基本控件

Form

页面剖析这是一个大略的表单提交页面,可以利用'Form'来进行布局,同时也能很方便通过其State属性的validate()方法来实现输入验证和提示。
validate()会调用TextFormField的validator来实行验证。

Image

用于显示图片的,支持网络图片和本地图片,本地图片须要添加到配置文件中

# To add assets to your application, add an assets section, like this: # assets: # - images/a_dot_burr.jpeg # - images/a_dot_ham.jpeg assets: - images/lake.jpg复制代码TextFormField

Form中对应的文本输入控件,validator用于验证输入的合法性,当验证不通过期返回一个字符串提示在输入框的底部。

RaisedButton

按钮,没什么好说的,onPressed指定点击回调

Column

列布局,此demo中各控件从上到下依次布局,Column再得当不过了。

弹窗

调用AlertDialog显示一个文本的Widget。

第三方组件

此demo中利用了一个第三方的加载提示组件flutter_spinkit

main.dart顶部代码

import 'package:flutter_spinkit/flutter_spinkit.dart';复制代码

这是引入的一个第三方加载提示组件flutter_spinkit,利用第三方组件前须要先到pubspec.yaml文件添加依赖配置:

flutter_spinkit: \公众^2.1.0\公众复制代码

保存后VSCode会自动实行'flutter packages get'下载组件。

利用代码:

final _loadingContainer = Container( constraints: BoxConstraints.expand(), color: Colors.black12, child: Center( child: Opacity( opacity: 0.9, child: SpinKitWave( color: Colors.red, size: 50.0, ), ), ));复制代码异步操作

点击按钮后实行的因此下代码:

void _toggleSubmit() { if (_formKey.currentState.validate()) { setState(() { _showLoading = true; }); _loginRequest().then((onValue) { setState(() { _showLoading = false; }); showDialog( context: context, builder: (context) { String alertText = 'login success!' + ' \nuserName:' + _userNameTextController.text + '\npassWord:' + _passwordTextController.text; return AlertDialog( content: Text(alertText), ); }); }); } }复制代码显示隐蔽加载框

首先通过预先指定的GlobalKey的currentState来拿到对应的FormState, 然后调用validate()方法实行验证Form中的用户名和密码输入内容,通过返回true,否则返回false; 然后通过setState()方法来更新_showLoading属性为true或者false, 便会重新实行build方法,这样就可以动态的显示和隐蔽加载框了。

异步操作

Future _loginRequest() async { return Future.delayed(Duration(seconds: 3), () { //do nothing print('login success'); });}复制代码

_loginRequest函数返回的是一个Future, 用于dart支持异步操作的关键字,顾名思义这个函数调用后会在未来实行而不是急速实行,更多细节推举阅读flutter实战5:异步async、await和Future的利用技巧。

在_loginRequest函数中,这里只是大略的实行延迟3秒操作来仿照api调用耗时,点击submit按钮后调用此方法,此方法实行完成后调用then方法利用setState来隐蔽加载框,同时弹出提示框显示获取到的用户名和密码。

_loginRequest().then((onValue) { setState(() { _showLoading = false; }); showDialog( context: context, builder: (context) { String alertText = 'login success!' + ' \nuserName:' + _userNameTextController.text + '\npassWord:' + _passwordTextController.text; return AlertDialog( content: Text(alertText), ); }); }); 复制代码

嗯,到此就差不多了,该准备下一个学习demo了,后续Demo持续更新...

参考Flutter官方文档flutter实战5:异步async、await和Future的利用技巧