Flutter布局锦囊---完善信息页

设计给的效果如下：

拿到设计后，先把整体拆分成几个部分：

“用户昵称输入”，获取用户输入的昵称信息。
“用户头像选取”，获取用户选取作为头像的图片。
“用户性别选择”，获取用户选择的性别信息。
“提交按钮”，提交用户的信息。

然后就可以开始进行编码了。

第1步：绘制组件树

第2步：实现“用户昵称输入”

先通过脚手架（Scaffold）组件、安全区（SafeArea）组件和列表视图（ListView）组件搭一个适配现在各种奇形怪状屏幕的、可滚动的“脚手架”，方便后面填充组件。

import 'package:flutter/material.dart';
import 'widgets/complex_navigation.dart';
import 'widgets/upload_avatar.dart';
import 'widgets/gender_selection.dart';
import '../common/doodle_button.dart';/// 自定义的注册页面组件。
class RegisteredPage extends StatefulWidget {@override_RegisteredPageState createState() => _RegisteredPageState();
}/// 与自定义的注册页面组件关联的状态子类。
class _RegisteredPageState extends State<RegisteredPage> {/// 昵称文本字段的控制器。final _nameController = TextEditingController();/// 当前选择的性别值。int _genderSelect = 0;/// 当前昵称文本字段的状态。bool _userInput = false;@overrideWidget build(BuildContext context) {return Scaffold(body: SafeArea(child: ListView(children: <Widget>[// TODO: 第2步：实现“用户昵称输入”// TODO: 第3步：实现“用户头像选取”// TODO: 第4步：实现“用户性别选择”// TODO: 第5步：实现“提交按钮”],),),);}
}

下面使用的自定义的复合导航（ComplexNavigation）组件是《Flutter布局锦囊—带输入字段的应用栏》中实现的一个带有返回按钮、主题图片和文本输入框的自定义操作区域。

            // TODO: 第2步：实现“用户昵称输入”ComplexNavigation(textEditingController: _nameController,nonEmptyCallback: () {_userInput = true;setState(() {});},emptyCallback: () {_userInput = false;setState(() {});},),

第3步：实现“用户头像选取”

下面使用的自定义的上传头像（UploadAvatar）组件是《Flutter布局锦囊—有背景图的头像选择》中的一个借助Flutter团队开发的图片选择器（image_picker）插件实现的图片选取器。

            // TODO: 第3步：实现“用户头像选取”SizedBox(height: 42.0),UploadAvatar(),SizedBox(height: 36.0),

第4步：实现“用户性别选择”

下面使用的自定义的性别选择（GenderSelection）组件是《Flutter布局锦囊—男女性别单选》中实现的一个图文并貌的性能选择区域。

            // TODO: 第4步：实现“用户性别选择”GenderSelection(selectCallback: (genderSelect){_genderSelect = genderSelect;setState(() {});},),SizedBox(height: 48.0),

第5步：实现“提交按钮”

下面使用的自定义的涂鸦按钮（DoodleButton）组件是《Flutter布局锦囊—涂鸦风格按钮》中实现的一个涂鸦画风的自定义样式的按钮。

            // TODO: 第5步：实现“提交按钮”Container(padding: EdgeInsets.symmetric(horizontal: 40.0),child: DoodleButton(promptText: '好了',activation: _genderSelect != 0 && _userInput,onTapCallback: (){print('注册成功！');},),),

第6步：还原效果

Flutter布局锦囊---完善信息页相关推荐

Flutter布局锦囊---绑定手机页
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "顶部导航栏",标题+取消按钮+跳过按钮的应用栏. "手机号输入框",用于获取手机号码的圆角边框输入字 ...
Flutter布局锦囊---手机号登录页
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "运营位",使用自定义的旋转木马滑块组件实现可以滚动的运营位. "登录表单",使用自定义的登录表单组件 ...
Flutter布局锦囊---蜡笔画的表单
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "手机号输入框",使用自定义的登录表单字段组件实现的输入框. "验证码输入框",使用自定义的登录表单验 ...
【Swing 开发之图书管理系统】（五）管理员页面布局与用户信息页
Swing 开发之图书管理系统(五)管理员页面布局与用户信息页 Swing 开发之图书管理系统(五)管理员页面布局与用户信息页 1.管理员页面布局 2.用户信息页 Swing 开发之图书管理系统(五) ...
Flutter布局锦囊---屏幕顶部提醒
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "提醒页面",显示在屏幕上方的文字提醒页面,不会覆盖原路由页面. "路由导航",使用Flutter的路 ...
Flutter布局锦囊---带彩条的文本字段
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "文本输入框",使用文本字段(TextField)组件实现的输入框. "状态指示条",使用容器(Con ...
Flutter布局锦囊---涂鸦风格按钮
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "可点击框",使用堆栈(Stack)组件布局的可点击区域. "底部矩形",用来衬托"主要矩形 ...
Flutter布局锦囊---轮播图片与滑块
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "运营位",可以通过左右滑动来切换图片. "进度条",显示"运营位"当前位置的进度 ...
Flutter布局锦囊---圆框的表单字段
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "黑色圆角边框",因为文本字段(TextField)组件的没有符合需求的样式,所以要自己做一个边框. "文本输入 ...