计算机前端

巴黎人电玩 1

通过对基础部分的初步认识,今天我们将开始对UI进行初学者之旅啦!废话不多说,看重点:

初入flutter,在 flutter中文网,学习了两天flutter基本内容。做一个登录界面与大家分享学习。文中有不对的地方,还望不吝赐教!

UILabel:是iOS中提供的用来显示文字的控件,继承自UIView.核心功能:显示文字.既然是继承自UIView的类,那么就表明UILabel可以使用UIView中的方法,但是UIView虽然是iOS中提供的视图的基类,提供了视图的公共的属性以及公共的方法,并没有具体的功能(显示文字,输入文字等).

1、先看下整个界面

一般来说大致分为4个步骤:创建视图对象 -> 配置相关属性 -> 添加到父视图 -> 释放所有权那么执行如下代码:

布局方式在flutter中还是比较简单。先看整体,然后再拆分一个个小块即可。也就是将每个小块做成 flutter 中widget ,最后在整合到一起。

//1.创建视图对象UILabel *aLabel = [[UILabel alloc]initWithFrame:CGRectMake(30, 100, 300, 200)];//2.配置相关属性aLabel.backgroundColor = [UIColor blackColor];//2.1显示文字aLabel.text = @"Microsoft is the biggest company Application windows are expected to have a root view controller at the end of application launch"; //2.2文字颜色aLabel.textColor = [UIColor whiteColor];//2.3文字的对齐方式aLabel.textAlignment = NSTextAlignmentCenter;//2.4设置标签多行显示aLabel.numberOfLines = 0;//2.5设置行的截取方式aLabel.lineBreakMode = NSLineBreakByWordWrapping;//2.6阴影颜色aLabel.shadowColor = [UIColor redColor];//2.7阴影偏移量(改变阴影和实体字的距离)aLabel.shadowOffset = CGSizeMake;//2.8文字字体//2.8.1使用系统样式改变字体大小//aLabel.font = [UIFont systemFontOfSize:22];//2.8.2使用加粗样式改变字体大小//aLabel.font = [UIFont boldSystemFontOfSize:17];//2.8.3修改字体样式和字体大小aLabel.font = [UIFont fontWithName:@"Zapfino" size:14];//3.添加到父视图上[self.window addSubview:aLabel];//4.释放所有权[aLabel release];

主要实现内容,涉及到基础知识点有:

会产生一个如图所示的效果图:

1.头部logo图片,导入读取运用。

巴黎人电玩 2代码效果图.png

2.TextFormField文本框内容,并且验证用户名、密码。TextEditingController,监听用户名文本框,并在末尾显示清除按钮。显示和隐藏密码。FocusNode 控制焦点内容,实现键盘回收。

下面我会对一些代码进行解释,这里主要解释步骤"配置相关信息"的代码块"(注:在学习OC的时候我们都应具备查阅API的能力了,在此不过多的阐述UILabel的方法)

3.按钮,RaisedButton、IconButton、FlatButton的使用。

//2.1显示文字//UILabel的最终要的作用就是"显示文字",既然是显示文字那么text毫无疑问是UILabel最核心的方法.aLabel.text = @"Microsoft is the biggest company Application windows are expected to have a root view controller at the end of application launch";

4.通过添加手势,实现点击空白处,键盘回收操作。

到这里其实UILabel算是已经结束了,因为他的任务显示文字已经完成.那么为何还有那么多代码呢?那是因为虽然你的作用已经发挥,但是没有其他相应的辅助给你助攻,你怎么完成更加酷炫的击杀?

5.第三方插件使用,

//2.3文字的对齐方式aLabel.textAlignment = NSTextAlignmentCenter;

6.分区块实现每个widget,最后将各个区块widget,放到ListView组件中。代码中SizedBox为占位作用,也可以替换成其他内容。

通过查阅API了解到方法textAlignment该如何的使用

全部实现代码如下:

巴黎人电玩 3textAlignment的API.png

import 'package:flutter/material.dart';import 'package:flutter_screenutil/flutter_screenutil.dart';import 'package:font_awesome_flutter/font_awesome_flutter.dart';class LoginPage extends StatefulWidget { @override _LoginPageState createState() = _LoginPageState();}class _LoginPageState extends State { //焦点 FocusNode _focusNodeUserName = new FocusNode(); FocusNode _focusNodePassWord = new FocusNode(); //用户名输入框控制器,此控制器可以监听用户名输入框操作 TextEditingController _userNameController = new TextEditingController(); //表单状态 GlobalKey _formKey = GlobalKey(); var _password = '';//用户名 var _username = '';//密码 var _isShowPwd = false;//是否显示密码 var _isShowClear = false;//是否显示输入框尾部的清除按钮 @override void initState() { // TODO: implement initState //设置焦点监听 _focusNodeUserName.addListener(_focusNodeListener); _focusNodePassWord.addListener(_focusNodeListener); //监听用户名框的输入改变 _userNameController.addListener((){ print(_userNameController.text); // 监听文本框输入变化,当有内容的时候,显示尾部清除按钮,否则不显示 if (_userNameController.text.length  0) { _isShowClear = true; }else{ _isShowClear = false; } setState(() { }); }); super.initState(); } @override void dispose() { // TODO: implement dispose // 移除焦点监听 _focusNodeUserName.removeListener(_focusNodeListener); _focusNodePassWord.removeListener(_focusNodeListener); _userNameController.dispose(); super.dispose(); } // 监听焦点 Future _focusNodeListener() async{ if(_focusNodeUserName.hasFocus){ print("用户名框获取焦点"); // 取消密码框的焦点状态 _focusNodePassWord.unfocus(); } if (_focusNodePassWord.hasFocus) { print("密码框获取焦点"); // 取消用户名框焦点状态 _focusNodeUserName.unfocus(); } } /** * 验证用户名 */ String validateUserName(value){ // 正则匹配手机号 RegExp exp = RegExp(r'^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))d{8}$'); if (value.isEmpty) { return '用户名不能为空!'; }else if (!exp.hasMatch(value)) { return '请输入正确手机号'; } return null; } /** * 验证密码 */ String validatePassWord(value){ if (value.isEmpty) { return '密码不能为空'; }else if(value.trim().length18){ return '密码长度不正确'; } return null; } @override Widget build(BuildContext context) { ScreenUtil.instance = ScreenUtil(width:750,height:1334)..init(context); print(ScreenUtil().scaleHeight); // logo 图片区域 Widget logoImageArea = new Container( alignment: Alignment.topCenter, // 设置图片为圆形 child: ClipOval( child: Image.asset( "images/logo.png", height: 100, width: 100, fit: BoxFit.cover, ), ), ); //输入文本框区域 Widget inputTextArea = new Container( margin: EdgeInsets.only(left: 20,right: 20), decoration: new BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(8)), color: Colors.white ), child: new Form( key: _formKey, child: new Column( mainAxisSize: MainAxisSize.min, children: [ new TextFormField( controller: _userNameController, focusNode: _focusNodeUserName, //设置键盘类型 keyboardType: TextInputType.number, decoration: InputDecoration( labelText: "用户名", hintText: "请输入手机号", prefixIcon: Icon(Icons.person), //尾部添加清除按钮 suffixIcon:(_isShowClear) ? IconButton( icon: Icon(Icons.clear), onPressed: (){ // 清空输入框内容 _userNameController.clear(); }, ) : null , ), //验证用户名 validator: validateUserName, //保存数据 onSaved: (String value){ _username = value; }, ), new TextFormField( focusNode: _focusNodePassWord, decoration: InputDecoration( labelText: "密码", hintText: "请输入密码", prefixIcon: Icon(Icons.lock), // 是否显示密码 suffixIcon: IconButton( icon: Icon((_isShowPwd) ? Icons.visibility : Icons.visibility_off), // 点击改变显示或隐藏密码 onPressed: (){ setState(() { _isShowPwd = !_isShowPwd; }); }, ) ), obscureText: !_isShowPwd, //密码验证 validator:validatePassWord, //保存数据 onSaved: (String value){ _password = value; }, ) ], ), ), ); // 登录按钮区域 Widget loginButtonArea = new Container( margin: EdgeInsets.only(left: 20,right: 20), height: 45.0, child: new RaisedButton( color: Colors.blue[300], child: Text( "登录", style: Theme.of(context).primaryTextTheme.headline, ), // 设置按钮圆角 shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)), onPressed: (){ //点击登录按钮,解除焦点,回收键盘 _focusNodePassWord.unfocus(); _focusNodeUserName.unfocus(); if (_formKey.currentState.validate()) { //只有输入通过验证,才会执行这里 _formKey.currentState.save(); //todo 登录操作 print("$_username + $_password"); } }, ), ); //第三方登录区域 Widget thirdLoginArea = new Container( margin: EdgeInsets.only(left: 20,right: 20), child: new Column( children: [ new Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Container( width: 80, height: 1.0, color: Colors.grey, ), Text( '第三方登录' ), Container( width: 80, height: 1.0, color: Colors.grey, ), ], ), new SizedBox( height: 18, ), new Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ IconButton( color: Colors.green[200], // 第三方库icon图标 icon: Icon(FontAwesomeIcons.weixin), iconSize: 40.0, onPressed: (){ }, ), IconButton( color: Colors.green[200], icon: Icon(FontAwesomeIcons.facebook), iconSize: 40.0, onPressed: (){ }, ), IconButton( color: Colors.green[200], icon: Icon(FontAwesomeIcons.qq), iconSize: 40.0, onPressed: (){ }, ) ], ) ], ), ); //忘记密码 立即注册 Widget bottomArea = new Container( margin: EdgeInsets.only(right: 20,left: 30), child: new Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ FlatButton( child: Text( "忘记密码?", style: TextStyle( color: Colors.blue[400], fontSize: 16.0, ), ), //忘记密码按钮,点击执行事件 onPressed: (){ }, ), FlatButton( child: Text( "快速注册", style: TextStyle( color: Colors.blue[400], fontSize: 16.0, ), ), //点击快速注册、执行事件 onPressed: (){ }, ) ], ), ); return Scaffold( backgroundColor: Colors.white, // 外层添加一个手势,用于点击空白部分,回收键盘 body: new GestureDetector( onTap: (){ // 点击空白区域,回收键盘 print("点击了空白区域"); _focusNodePassWord.unfocus(); _focusNodeUserName.unfocus(); }, child: new ListView( children: [ new SizedBox(height: ScreenUtil().setHeight(80),), logoImageArea, new SizedBox(height: ScreenUtil().setHeight(70),), inputTextArea, new SizedBox(height: ScreenUtil().setHeight(80),), loginButtonArea, new SizedBox(height: ScreenUtil().setHeight(60),), thirdLoginArea, new SizedBox(height: ScreenUtil().setHeight(60),), bottomArea, ], ), ), ); }}---------------------

然后进入到代码内部可以看到枚举的各种属性,根据自己的需求选择属性:

巴黎人电玩,版权声明:本文为CSDN博主「万里初心」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。

 typedef NS_ENUM(NSInteger, NSTextAlignment) { NSTextAlignmentLeft = 0, // Visually left aligned#if TARGET_OS_IPHONE NSTextAlignmentCenter = 1, // Visually centered NSTextAlignmentRight = 2, // Visually right aligned#else /* !TARGET_OS_IPHONE */ NSTextAlignmentRight = 1, // Visually right aligned NSTextAlignmentCenter = 2, // Visually centered#endif NSTextAlignmentJustified = 3, // Fully-justified. The last line in a paragraph is natural-aligned. NSTextAlignmentNatural = 4, // Indicates the default alignment for script} NS_ENUM_AVAILABLE_IOS;

原文链接:

设置行的截取方式和文字的对齐方法类似,不过这次是进入到lineBreakMode枚举法中找到自己需要的方式

//2.5设置行的截取方式aLabel.lineBreakMode = NSLineBreakByWordWrapping;

字体的设置就是将该字体的名字赋值即可:

//2.8.3修改字体样式和字体大小aLabel.font = [UIFont fontWithName:@"Zapfino" size:14];

UITextField:是iOS中提供的用来显示文字和编辑文字的控件核心功能:文字编辑首先先创建一个文本框:

//1.创建输入框对象UITextField *textField = [[UITextField alloc]initWithFrame:CGRectMake(30, 100, 300, 40)];//2.配置相关属性textField.backgroundColor = [UIColor yellowColor];//3.添加到父视图[self.window addSubview:textField];//4.释放所有权[textField release];

效果图:

巴黎人电玩 4新建文本框

这样就创建了一个简单的文本输入框,那么只有这么单调的效果你会满意么??所以呢,我们需要对他进行一些相关配置:功能1:设置提示文字;

textField.placeholder = @"请输入...";

看图:

巴黎人电玩 5添加提示文字.png

这个由苹果公司给出的API作用是,如果当前的文本框没有输入内容的时候会显示一个由开发者设定的的文字或字符.

功能2:设置框内的内容;

textField.text = @"我爱你们哟";

巴黎人电玩 6设置内容

很明显,当你设置有内容的时候,提示的内容会"消失",当你将内容删掉的时候,他会自动的"出现".这个功能相信大家都是不陌生的.比如QQ的登录界面,如果你登录之后,会自动保存账号信息,当你下次登录的时候会保留你上次登录的账号.相当多的登录界面都会采用这种方式来方便用户使用.

其他新闻
友情链接

公司名称巴黎人电玩
版权所有:Copyright © 2015-2019 http://www.zhongqiangjy.com. 巴黎人电玩有限公司 版权所有

友情链接

Copyright © 2015-2019 http://www.zhongqiangjy.com. 巴黎人电玩有限公司 版权所有
公司地址http://www.zhongqiangjy.com