Flutter 专题06 图解基础登录页面并学习相关 Widget #yyds干货盘点#

别裁伪体亲风雅，转益多师是汝师。这篇文章主要讲述Flutter 专题06 图解基础登录页面并学习相关 Widget #yyds干货盘点#相关的知识，希望能为你提供帮助。
小菜最近在利用业余时间学习 Flutter，还真的是值得研究。小菜觉得学习一门技术最好的方式就是动手，在实践过程中结合官网文档才能更快的学习和理解。因为小菜技术太差，花了很久才搭建了一个最简单的【登录】页面，对于同一个页面，搭建的方式千差万别，小菜的方式也绝非最佳，现在仅结合这个基本的【登录】页面记录整理一下遇到的问题。
小菜这次整理的小博客只是单纯的搭建页面，不涉及以无逻辑和页面跳转，毕竟小菜还没研究到那部分。

文章图片

技术积累
【登录】页面很基本，整个页面分为标题栏 Title 和内容块 Content 两部分，标题栏不用处理，主要是编辑内容块部分。内容块包括一个应用 Logo，两个图标，两个输入框，一个按钮。
因此需要用到的控件包括：图片，文本输入框，按钮，布局等。当然 Flutter 最大的优势就是一切都是 widget。
实操问题 + 解决方案
1. 如何加入本地图片？【Flutter 专题06 图解基础登录页面并学习相关 Widget #yyds干货盘点#】

文章图片

解决如下：

在根目录下新建 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());
class MyApp extends StatelessWidget {@override
br/>@override
return new MaterialApp(
title: 轻签到,
home: new Scaffold(
appBar: new AppBar(
title: new Text(极速登录),
),
body: new Column(
// Column is also layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke " debug paint" (press " p" in the console where you ran
// " flutter run" , or select " Toggle Debug Paint" from the Flutter tool
// window in IntelliJ) to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,

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), ), )), ), ), ], ), ), );

}
}

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; **[GitHub Demo](https://github.com/ACE-YANGCE/FlutterSign)** *** & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 小菜也是刚接触 **Flutter**，还有很多不清楚和不理解的地方，如果又不对的地方还希望多多指出。> 来源：阿策小和尚