好租客-02-登录注册页面实现

登录页实现

UI效果：

注意点：

(1) 使用 SafeView 控件来屏蔽 "刘海屏“”的差异。

(2) 定义成员属性 showPassword 用于控制密码的显示与隐藏的形式。

(3) 使用 TextField 控件来实现输入框，且 decoration 属性实现 提示文字等效果。

(4) 使用 TextField 控件的 obscureText 来实现密码框。

(5) 实现路由跳转效果： Application.router.navigateTo(context, “/register”);

(6) 实现获取主题的颜色： Theme.of(context).primaryColor)

(7) 使用TextButton来实现按钮功能。style（ButtonStyle）实现按钮的样式。

代码实现：

login-view.dart文件内容:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hook_up_rent/application.dart';class LoginView extends StatefulWidget {@override_LoginViewState createState() => _LoginViewState();
}class _LoginViewState extends State {bool showPassword = false;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("登录"),centerTitle: true,),//使用SafeArea处理刘海屏。body: SafeArea(//类似于paddingminimum: EdgeInsets.all(30),//ListView用于防止超过一屏幕的黄色警告。child: ListView(children: [//使用 textfield 实现输入控件TextField(decoration: InputDecoration(labelText: "用户名"),),//增加两个控件的间距的小盒子。Padding(padding: EdgeInsets.all(10)),//使用 textfield 实现输入控件, 使用 obscureText 实现密码框效果。TextField(obscureText: showPassword,decoration: InputDecoration(labelText: "密码",//尾部的icon按钮。用于显示或者隐藏密码。suffixIcon: IconButton(icon: Icon(!showPassword? Icons.visibility_off: Icons.visibility),onPressed: () {setState(() {showPassword = !showPassword;});})),),Padding(padding: EdgeInsets.all(20)),Container(height: 40,//关于TextButton 最要注意的就是 style 属性， 能实现所有button需要的装饰效果。// style 是 ButtonStyle 类型的属性。child: TextButton(style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Theme.of(context).primaryColor)),onPressed: () {},child: Text("登录", style: TextStyle(color: Colors.white))),),Padding(padding: EdgeInsets.all(10)),Row(mainAxisAlignment: MainAxisAlignment.center,children: [Text("还没有账号,"),TextButton(onPressed: () {//使用 fluro 进行路由跳转。Application.router.navigateTo(context, "/register");},child: Text("去注册~",//通过 Theme.of(context).primaryColor 获取主题色。style: TextStyle(color: Theme.of(context).primaryColor),))],)],)),);}
}

注册页实现

UI效果实现：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-891wUhiE-1622449821051)(.\images\1622449439227.png)]

代码实现：

register-page.dart文件内容：

import 'package:flutter/material.dart';class RegisterPage extends StatefulWidget {@override_RegisterPageState createState() => _RegisterPageState();
}class _RegisterPageState extends State {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("注册"), centerTitle: true),body: SafeArea(minimum: EdgeInsets.all(30),child: ListView(children: [TextField(decoration: InputDecoration(labelText: "用户名"),),Padding(padding: EdgeInsets.all(10)),TextField(decoration: InputDecoration(labelText: "密码"),),Padding(padding: EdgeInsets.all(10)),TextField(decoration: InputDecoration(labelText: "确认密码"),),Padding(padding: EdgeInsets.all(20)),Container(height: 44,child: TextButton(style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Theme.of(context).primaryColor)),onPressed: () {},child: Text("注册",style: TextStyle(color: Colors.white),)),),Padding(padding: EdgeInsets.all(10)),Row(mainAxisAlignment: MainAxisAlignment.center,children: [Text("已有账号,"),TextButton(onPressed: () {Navigator.pop(context);},child: Text("去登陆~",style: TextStyle(color: Theme.of(context).primaryColor),))],)],)),);}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！