作者是从业于 Android 开发的程序猿一枚，故接下来的所有教程中，都是偏向于 Android 开发方面的理解
前言
- Flutter 的布局机制如何工作.
- 如何垂直和水平布局 widget.
- 如何构建一个 Flutter 布局.
这是在 Flutter 中构建布局的指南。首先，您将构建以下屏幕截图的布局。然后回过头， 本指南将解释 Flutter 的布局方法，并说明如何在屏幕上放置一个 widget。在讨论如何水平和垂直放置 widget 之后，会介绍一些最常见的布局 widget：
image.png
构建布局步骤：
- 构造图片
- 构造两个输入框，登录按钮
- 构造微信验证码登录布局,布局居下
上代码：
1.构造 logo,使用 Image 控件，Logo 水平居中
此次布局用到了Image,Container组件
Container(
child: Image.asset(
'assets/images/logo.png',
height: 120,
width: 120,
),
alignment: Alignment.center,
height: 250,
)
2.构造账号密码输入框,输入框离两边有 40 的距离
此次布局用到了Container,Column,TextField,CupertinoButton组件
Container(
padding: EdgeInsets.only(left: 40, right: 40),
child: Column(
children: [
TextField(
focusNode: _phoneFocus,
controller: _phoneEdit,
maxLength: 11,
maxLines: 1,
decoration: InputDecoration(
hintText: '请输入手机号',
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.blueAccent)),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey)),
),
style: TextStyle(
fontSize: 16.0,
color: ThemeColors.color666666,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.next,
onSubmitted: (text) {
FocusScope.of(context).requestFocus(_pwdFocus);
},
),
TextField(
focusNode: _pwdFocus,
controller: _pwdEdit,
maxLength: 20,
maxLines: 1,
keyboardType: TextInputType.multiline,
style: TextStyle(
fontSize: 16.0,
color: ThemeColors.color666666,
),
decoration: InputDecoration(
hintText: '请输入密码',
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.blueAccent)),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey)),
counterText: ''),
obscureText: true,
textInputAction: TextInputAction.done,
onSubmitted: (text) {
login();
}),
Container(
margin: EdgeInsets.only(top: 50),
child: CupertinoButton(
child: Text(
'登录',
style: TextStyle(color: Colors.white),
),
color: Colors.blueAccent,
pressedOpacity: 0.8,
onPressed: () {
login();
},
),
height: 80,
alignment: Alignment.bottomCenter,
),
],
),
)
3.构建微信验证码登录布局
Container(
margin: EdgeInsets.only(left: 40, right: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Divider(
height: 4,
color: Colors.black12,
),
),
Container(
margin: EdgeInsets.only(left: 10, right: 10),
child: Text(
'或者',
style: TextStyle(fontSize: 14),
),
),
Expanded(
child: Divider(
height: 4,
color: Colors.black12,
),
),
],
),
),
Container(
margin: EdgeInsets.only(bottom: 20, top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: RawMaterialButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
_typeImg,
height: 48,
width: 48,
),
Container(
margin: EdgeInsets.only(top: 4),
child: Text(
_typeStr,
style: TextStyle(fontSize: 12),
),
)
],
),
onPressed: () {
codeLogin();
},
),
flex: 1,
),
SizedBox(
width: 50,
),
Expanded(
child: RawMaterialButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/images/wechat_btn.png',
height: 48,
width: 48,
),
Container(
margin: EdgeInsets.only(top: 4),
child: Text(
'微信登录',
style: TextStyle(fontSize: 12),
),
)
],
),
onPressed: () {
wxLogin();
},
),
flex: 1,
),
],
),
)
布局已经构建完成，接下来把他们拼接起来
- 用一个垂直布局Column把他们包裹起来
- 用Expanded布局包裹输入框那段布局，把微信验证码登录布局撑到最底下
Column(
children: [
//这里放LOGO布局，
Expanded(
child://这里放输入账号密码登录布局
),
//这里放置验证码微信登录布局
]
)
代码就不贴完整的了，上面的自己去凑，锻炼下自己，然后举一反三，自己去把服务协议行布局手敲出来.
这一篇文章学完之后你会获得一下知识：
- 基本组件的使用
- 布局的灵活运动
- Flutter的布局规则
- 本地文件的使用
下一篇文章讲解：登录界面的交互与需要处理的小问题
有时候，制定计划会让我们觉得繁琐而不去实行，然而实际上，这 2%的时间常常有不亚于 10%的效果，它不仅帮助我们节约了做任务时 的边际时间，还带给我们一种踏实感。“先做了再说”和“胸有成竹”地做效率是截然不同的。