轻松编写自定义Flutter 组件

快速编写一个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;
});
},
)