快速编写一个Flutter UI组件
##为了方便大家快速上手以编写Radio组件为例
##先附源码方便大家观看
###初步思路是前端的同学能上快速适应Flutter Dart语言的特性,并能快速加入到Flutter的团队中
前端的同学在HTML语言的特性中编写一个Radio是这样的
<input type="radio" name="colors" value=1 checked=true id='testRadio'>
<Radio />
<lable for="testRadio">
我是单选框
</lable>
在React或VUE的高级封装组件已变成这样了
<Radio value=''" name="" value="" defaultValue="" onClick={....} />
为了让前端的小伙伴能够快速的适应这种转变
Radio组件的应该是易用的并能与HTML快速的无缝迭代
Radio(
lable: '张三峰',
value:1,
checked: true,
onChange: (s, checked) {....},
);
请原谅我来不急说话,直接上代码了
/**
* @jeatStone
* @date:2020/12/12
* 仿HTML radio单选项项
* 参数:onChane eventFnCallBack;
* labList:<string> 列表项,也可以加值
* checked:bool
*/
class DRadio extends StatelessWidget {
String lable;
dynamic value;
bool checked = false;
Function onChange;
DRadio({
Key key,
this.lable,
this.value,
this.checked = false,
this.onChange,
}) : super(key: key);
@override
Widget build(BuildContext context) {
IconData iconName = Icons.radio_button_off_rounded;
if (checked == true) {
iconName = Icons.radio_button_checked;
}
return Container(
child: GestureDetector(
onTap: () {
if (onChange != null) {
onChange(this);
}
},
child: Container(
child: Row(
children: [
Container(
child: Icon(iconName, color: Colors.blueAccent),
),
Text(lable)
],
),
),
));
}
}
调用方法 DRadio(
lable: ‘张三峰’,
value: {‘name’: ‘张三峰’},
checked: checkedFlag,
onChange: (s, checked) {
setState(() {
checkedFlag = checked;
});
},
)