Flutter布局锦囊---男女性别单选

设计给的效果如下：

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

“点击操作”，感应用户选择性别的区域。
“选择性别男”，性别男的选择区域，点击会更新图片和样式。
“选择性别女”，性别女的选择区域，点击会更新图片和样式。

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

第1步：绘制组件树

第2步：实现“点击操作”

首先为性别男和性别女的图文内容搭一个可以点击的区域，等一下把它们俩放在这个区域里来，同时定义一个性别选择的控制器，用来记录用户选择的性别。

import 'package:flutter/material.dart';/// 自定义的性别选择组件。
class GenderSelection extends StatefulWidget {/// 选择性别时的回调函数。final Function selectCallback;GenderSelection({this.selectCallback,});@override_GenderSelectionState createState() => _GenderSelectionState();
}/// 与自定义的性别选择组件关联的状态子类。
class _GenderSelectionState extends State<GenderSelection> {/// 性别选择的控制器，0表示未选择，1表示男人，2表示女人。int _genderController = 0;@overrideWidget build(BuildContext context) {return Row(// 主轴对齐（`mainAxisAlignment`）属性，如何将子组件放在主轴上。mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[// TODO: 第3步：实现“选择性别男”// TODO: 第4步：实现“选择性别女”],);}
}

第3步：实现“选择性别男”

将性别男的选中、未选中图片和文本说明，来组合一个选择性别男的组件，并结合性别选择的控制器来更新图片和文本。

        // TODO: 第3步：实现“选择性别男”GestureDetector(onTap: (){// 选择男人时返回1并更新组件。setState(() {_genderController = 1;widget.selectCallback(_genderController);});},child: Column(children: <Widget>[Image.asset(_genderController == 1? 'assets/icon_male_selected.png': 'assets/icon_male_normal.png',fit: BoxFit.contain,height: 90.0,width: 90.0,),Text('男',style: TextStyle(fontSize: 16.0,color: _genderController == 1? Color(0xFF25C6CA): Color(0xFF4A4A4A),),),],),),

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

与上面选择性别男的组件一样，不过你要在中间插入一个大小框（SizedBox）组件来分离它们，毕竟距离产生美鸭。

        // TODO: 第4步：实现“选择性别女”SizedBox(width: 36.0),GestureDetector(onTap: (){// 选择女人时返回2并更新组件。setState(() {_genderController = 2;widget.selectCallback(_genderController);});},child: Column(children: <Widget>[Image.asset(_genderController == 2? 'assets/icon_female_selected.png': 'assets/icon_female_normal.png',fit: BoxFit.contain,height: 90.0,width: 90.0,),Text('女',style: TextStyle(fontSize: 16.0,color: _genderController == 2? Color(0xFFFF6B47): Color(0xFF4A4A4A),),),],),),

第5步：还原效果

Flutter布局锦囊---男女性别单选相关推荐

Flutter布局锦囊---完善信息页
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "用户昵称输入",获取用户输入的昵称信息. "用户头像选取",获取用户选取作为头像的图片. " ...
Flutter布局锦囊---绑定手机页
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "顶部导航栏",标题+取消按钮+跳过按钮的应用栏. "手机号输入框",用于获取手机号码的圆角边框输入字 ...
Flutter布局锦囊---蜡笔画的表单
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "手机号输入框",使用自定义的登录表单字段组件实现的输入框. "验证码输入框",使用自定义的登录表单验 ...
Flutter布局锦囊---手机号登录页
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "运营位",使用自定义的旋转木马滑块组件实现可以滚动的运营位. "登录表单",使用自定义的登录表单组件 ...
Flutter布局锦囊---带彩条的文本字段
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "文本输入框",使用文本字段(TextField)组件实现的输入框. "状态指示条",使用容器(Con ...
Flutter布局锦囊---涂鸦风格按钮
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "可点击框",使用堆栈(Stack)组件布局的可点击区域. "底部矩形",用来衬托"主要矩形 ...
Flutter布局锦囊---轮播图片与滑块
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "运营位",可以通过左右滑动来切换图片. "进度条",显示"运营位"当前位置的进度 ...
Flutter布局锦囊---圆框的表单字段
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "黑色圆角边框",因为文本字段(TextField)组件的没有符合需求的样式,所以要自己做一个边框. "文本输入 ...
Flutter布局锦囊---带输入字段的应用栏
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "堆栈容器",使用大小框(SizedBox)和堆栈(Stack)组件搞的容器,用于实现层次结构. "下层的导航& ...