阅读 597

Flutter 实现 element UI 之路(Radio 单选框)

代码仓库地址:github.com/1124863805/…

演示部署网站:ele.d0.pub/

Radio 单选框 , 切换动画,全部用FLutter重写,可能会有些差异,按照Element 官网上案例去实现,双向绑使用 ValueNotifier 代替,尺寸大小也是根据那个css 里面px 值来的

Button 按钮地址: juejin.cn/post/695195…

Radio 单选框: juejin.cn/post/695196…

注意

使用 HTML 渲染 使用 HTML,CSS,Canvas 和 SVG 元素来渲染,应用的大小相对较小。

使用 CanvasKit 渲染 将 Skia 编译成 WebAssembly 格式,并使用 WebGL 渲染。应用在移动和桌面端保持一致,有更好的性能,以及降低不同浏览器渲染效果不一致的风险。但是应用的大小会增加大约 2MB。

CanvasKit 使用这种打包方式,当字体没加载完的时候 会出现中文乱码,而且速度不如第一种
我使用的HTML 渲染,具体请看web渲染器

截屏2021-04-17 上午11.21.50.png

这是下面所需要的变量

  final ValueNotifier<String> value = ValueNotifier<String>("2");
  final ValueNotifier<String> value1 = ValueNotifier<String>("2");
  final ValueNotifier<String> value2 = ValueNotifier<String>("2");
  final ValueNotifier<String> value3 = ValueNotifier<String>("2");
  final ValueNotifier<String> value4 = ValueNotifier<String>("2");
  final ValueNotifier<String> value5 = ValueNotifier<String>("2");
  final ValueNotifier<String> value6 = ValueNotifier<String>("2");
  final ValueNotifier<String> value7 = ValueNotifier<String>("北京");
  final ValueNotifier<String> value8 = ValueNotifier<String>("北京");
  final ValueNotifier<String> value9 = ValueNotifier<String>("广州");
  final ValueNotifier<String> value10 = ValueNotifier<String>("北京");
复制代码

基础用法

              Row(
              children: [
                ElRadio(
                  label: "2",
                  value: value,
                  text: "备选项",
                ),
                SizedBox(width: 50),
                ElRadio(
                  label: "1",
                  value: value,
                  text: "备选项",
                ),
              ],
            )
复制代码

禁用状态

              Row(
              children: [
                ElRadio(
                  label: "2",
                  value: value1,
                  disabled: true,
                  text: "备选项",
                ),
                SizedBox(width: 50),
                ElRadio(
                  label: "1",
                  value: value1,
                  disabled: true,
                  text: "备选项",
                ),
              ],
            )
复制代码

单选框组

适用于在多个互斥的选项中选择的场景

             ElRadioGroup(
              value: value2,
              children: [
                ElRadio(
                  label: "2",
                  text: "备选项",
                ),
                ElRadio(
                  label: "1",
                  text: "备选项",
                ),
                ElRadio(
                  label: "4",
                  text: "备选项",
                ),
              ],
            )
复制代码

带有边框 (支持不同大小)

           Row(
              children: [
                ElRadio(
                  label: "1",
                  text: "备选项",
                  value: value3,
                  border: true,
                ),
                SizedBox(width: 30),
                ElRadio(
                  label: "4",
                  text: "备选项",
                  value: value3,
                  border: true,
                ),
              ],
            ),
            SizedBox(
              height: 30,
            ),
            Row(
              children: [
                ElRadio(
                  label: "1",
                  text: "备选项",
                  size: ElSize.medium,
                  value: value4,
                  border: true,
                ),
                SizedBox(width: 30),
                ElRadio(
                  label: "4",
                  text: "备选项",
                  value: value4,
                  size: ElSize.medium,
                  border: true,
                ),
              ],
            ),
            SizedBox(
              height: 30,
            ),
            Row(
              children: [
                ElRadio(
                  label: "1",
                  text: "备选项",
                  size: ElSize.small,
                  value: value5,
                  border: true,
                ),
                SizedBox(width: 30),
                ElRadio(
                  label: "4",
                  text: "备选项",
                  value: value5,
                  size: ElSize.small,
                  border: true,
                ),
              ],
            ),
            SizedBox(
              height: 30,
            ),
            ElRadioGroup(
              value: value6,
              size: ElSize.mini,
              border: true,
              disabled: true,
              children: [
                ElRadio(
                  label: "4",
                  text: "备选项",
                  value: value6,

                ),
                ElRadio(
                  label: "4",
                  text: "备选项",
                  value: value6,
                ),
              ],
            )
复制代码

按钮样式 (支持不同大小)

按钮样式的单选组合

          ElRadioGroup(
              value: value7,
              children: [
                SizedBox(width:20),
                ElRadioButton(
                  label: "上海",
                ),
                ElRadioButton(
                  label: "北京",
                ),
                ElRadioButton(
                  label: "广州",
                ),
                ElRadioButton(
                  label: "深圳",
                )
              ],
            ),
            SizedBox(height: 20),
            ElRadioGroup(
              size: ElSize.medium,
              value: value8,
              children: [
                SizedBox(width:20),
                ElRadioButton(
                  label: "上海",
                ),
                ElRadioButton(
                  label: "北京",
                ),
                ElRadioButton(
                  label: "广州",
                ),
                ElRadioButton(
                  label: "深圳",
                )
              ],
            ),

            SizedBox(height: 20),
            ElRadioGroup(
              size: ElSize.small,
              value: value9,
              children: [
                SizedBox(width:20),
                ElRadioButton(
                  label: "上海1",
                ),
                ElRadioButton(
                  disabled: true,
                  label: "北京",
                ),
                ElRadioButton(
                  label: "广州",
                ),

                ElRadioButton(
                  label: "深圳",
                )
              ],
            ),

            SizedBox(height: 20),
            ElRadioGroup(
              disabled: true,
              size: ElSize.mini,
              value: value10,
              children: [
                SizedBox(width:20),
                ElRadioButton(
                  label: "上海",
                ),
                ElRadioButton(
                  label: "北京",
                ),
                ElRadioButton(
                  label: "广州",
                ),
                ElRadioButton(
                  label: "深圳",
                )
              ],
            ),
复制代码
文章分类
前端
文章标签