Flutter 专题06 图解基础登录页面并学习相关 Widget #yyds干货盘点#
Posted 阿策小和尚
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter 专题06 图解基础登录页面并学习相关 Widget #yyds干货盘点#相关的知识,希望对你有一定的参考价值。
小菜最近在利用业余时间学习 Flutter,还真的是值得研究。小菜觉得学习一门技术最好的方式就是动手,在实践过程中结合官网文档才能更快的学习和理解。因为小菜技术太差,花了很久才搭建了一个最简单的【登录】页面,对于同一个页面,搭建的方式千差万别,小菜的方式也绝非最佳,现在仅结合这个基本的【登录】页面记录整理一下遇到的问题。
小菜这次整理的小博客只是单纯的搭建页面,不涉及以无逻辑和页面跳转,毕竟小菜还没研究到那部分。
技术积累
【登录】页面很基本,整个页面分为标题栏 Title 和内容块 Content 两部分,标题栏不用处理,主要是编辑内容块部分。内容块包括一个应用 Logo,两个图标,两个输入框,一个按钮。
因此需要用到的控件包括:图片,文本输入框,按钮,布局等。当然 Flutter 最大的优势就是一切都是 widget。
实操问题 + 解决方案
1. 如何加入本地图片?
解决如下:
- 在根目录下新建 images 文件夹,将本地图片拷贝到该文件夹下,文件格式包括 JPEG / WebP / GIF / 动画WebP / GIF / PNG / BMP / WBMP 等格式;
- 在 pubspec.yaml 文件中添加相应的图片文件指向,如:- images/icon_username.png,特别注意:images 与 - 之间一定要有空格!!!
- Content 中添加图片即可,如:
new Image.asset( images/ic_launcher.png, ),
2. Row 中如何添加输入框?
解决如下:
- 水平排列控件需要用到 Row,竖直排列控件需要 Column;
- 小菜需要在同一行中添加一个图标和一个输入框 TextField,单独的一个文本输入框没问题,但是直接放在 Row 中缺报错;
child: new Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ new Image.asset( images/icon_username.png, width: 40.0, height: 40.0, fit: BoxFit.fill, ), new TextField( decoration: new InputDecoration( hintText: 请输入用户名, ), ) ]), ),
- 可以设置文本输入框的固定长度,或是在文本输入框外添加一层 widget,小菜理解为添加一层父布局,限制文本输入框宽度,如下:
new Padding( padding: new EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 40.0), child: new Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ new Padding( padding: new EdgeInsets.fromLTRB(0.0, 0.0, 5.0, 0.0), child: new Image.asset( images/icon_password.png, width: 40.0, height: 40.0, fit: BoxFit.fill, ), ), new Expanded( child: new TextField( decoration: new InputDecoration( hintText: 请输入密码, ), obscureText: true, )) ]), ),
3. 如何调整按钮宽度及效果?
解决如下:
- Flutter 没有直接的 Button,小菜用的是 FlatButton,但是这仅仅是一个按钮,样式需要自己调整,配合 Card 实现圆角和投影,但是按钮长度按照文字长度展示;
- 依旧是在按钮外添加一层父布局,按需求调整固定长度,如下:
new Container( width: 340.0, child: new Card( color: Colors.blue, elevation: 16.0, child: new FlatButton( child: new Padding( padding: new EdgeInsets.all(10.0), child: new Text( 极速登录, style: new TextStyle(color: Colors.white, fontSize: 16.0), ), )), ), )
相关延展
- Flutter 中引用图片有四种方式,小菜认为目前用的较多的为 网络图片 和 Assets 图片,引用网络图片方式也很简单,如下:
new Image.network( http://XXX.jpg, scale: 4.0, ),
- 对于文本输入框中明文显示或密码显示,主要通过 obscureText: true, 属性,当该属性为 true 时为密码隐文展示;
- 对于位置方面内边距,小菜目前用到两个,分别是 EdgeInsets.all 和 EdgeInsets.fromLTRB;all 只有一个参数,类似于 android 中 android:padding="10dp";fromLTRB 有四个参数,分别对应上下左右四个高度,而顺序也是按照 L->left T->Top R->Right B->Bottom 顺序排列,刚开始没明白,后来反应过来发现很方便;
- 对于 Card 中阴影效果,需要 elevation: 16.0, 属性,值越大并非代表阴影效果越深,只是代表阴影距离离控件越远;
- Flutter 中 , 类似于 Java 中 ; 建议编辑完一个属性后添加 , 而且 Flutter 很贴心的地方是默认后面会有提示,对应的 ) 级别,方便修改的时候查找,如图:
- 对于图片比例,小菜用的是 scale: 4.0, 测试发现 scale 值越大图片反而越小。
主要源码
import package:flutter/material.dart;
void main() => runApp(new MyApp());
children: <Widget>[
new Padding(
padding: new EdgeInsets.all(30.0),
child: new Image.asset(
images/ic_launcher.png,
scale: 1.8,
)),
new Padding(
padding: new EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 15.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
new Padding(
padding: new EdgeInsets.fromLTRB(0.0, 0.0, 5.0, 0.0),
child: new Image.asset(
images/icon_username.png,
width: 40.0,
height: 40.0,
fit: BoxFit.fill,
),
),
new Expanded(
child: new TextField(
decoration: new InputDecoration(
hintText: 请输入用户名,
),
))
]),
),
new Padding(
padding: new EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 40.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
new Padding(
padding: new EdgeInsets.fromLTRB(0.0, 0.0, 5.0, 0.0),
child: new Image.asset(
images/icon_password.png,
width: 40.0,
height: 40.0,
fit: BoxFit.fill,
),
),
new Expanded(
child: new TextField(
decoration: new InputDecoration(
hintText: 请输入密码,
),
obscureText: true,
))
]),
),
new Container(
width: 340.0,
child: new Card(
color: Colors.blue,
elevation: 16.0,
child: new FlatButton(
child: new Padding(
padding: new EdgeInsets.all(10.0),
child: new Text(
极速登录,
style: new TextStyle(color: Colors.white, fontSize: 16.0),
),
)),
),
),
],
),
),
);
}
}
**[GitHub Demo](https://github.com/ACE-YANGCE/FlutterSign)**
***
小菜也是刚接触 **Flutter**,还有很多不清楚和不理解的地方,如果又不对的地方还希望多多指出。
> 来源:阿策小和尚
以上是关于Flutter 专题06 图解基础登录页面并学习相关 Widget #yyds干货盘点#的主要内容,如果未能解决你的问题,请参考以下文章
Flutter 专题57 图解页面小跳转 #yyds干货盘点#
Flutter 专题12 图解圆形与权重/比例小尝试 #yyds干货盘点#
Flutter 专题19 图解分享页面底部对话框 #yyds干货盘点#
Flutter 专题15 图解 ListView 异步加载数据与等待 #yyds干货盘点#