Flutter 实现 element UI 之路（Button 按钮）

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

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

鼠标移入移除选中效果，鼠标的选中的手势，基本仿照相似；加载动画使用提取的element图标.

最终实现可能有些差异，代码不同，加入自己的一点理解，小弟不才，如果有错误多多指教。

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

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

注意

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

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

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

-- 两种不同的打包方式 
flutter run -d chrome --web-renderer html
flutter build web --web-renderer canvaskit
复制代码

正常按钮

                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    ElButton(
                      text: "默认按钮",
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      text: "主要按钮",
                    ),
                    ElButton(
                      type: ElButtonType.success,
                      text: "成功按钮",
                    ),
                    ElButton(
                      type: ElButtonType.info,
                      text: "信息按钮",
                    ),
                    ElButton(
                      type: ElButtonType.warning,
                      text: "警告按钮",
                    ),
                    ElButton(
                      type: ElButtonType.danger,
                      text: "危险按钮",
                    ),
                  ],
                ),
复制代码

朴素按钮

Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    ElButton(
                      text: "朴素按钮",
                      plain: true,
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      text: "主要按钮",
                      plain: true,
                    ),
                    ElButton(
                      type: ElButtonType.success,
                      text: "成功按钮",
                      plain: true,
                    ),
                    ElButton(
                      type: ElButtonType.info,
                      text: "信息按钮",
                      plain: true,
                    ),
                    ElButton(
                      type: ElButtonType.warning,
                      text: "警告按钮",
                      plain: true,
                    ),
                    ElButton(
                      type: ElButtonType.danger,
                      text: "危险按钮",
                      plain: true,
                    ),
                  ],
                )
复制代码

圆角按钮

    Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    ElButton(
                      text: "圆角按钮",
                      round: true,
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      text: "主要按钮",
                      round: true,
                    ),
                    ElButton(
                        type: ElButtonType.success, text: "成功按钮", round: true),
                    ElButton(
                      type: ElButtonType.info,
                      text: "信息按钮",
                      round: true,
                    ),
                    ElButton(
                      type: ElButtonType.warning,
                      text: "警告按钮",
                      round: true,
                    ),
                    ElButton(
                      type: ElButtonType.danger,
                      text: "危险按钮",
                      round: true,
                    ),
                  ],
                )
复制代码

圆形图标按钮

    Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    ElButton(
                      circle: true,
                      plain: true,
                      iconData: EleIcons.el_icon_search,
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      circle: true,
                      plain: true,
                      iconData: EleIcons.el_icon_edit,
                    ),
                    ElButton(
                      type: ElButtonType.success,
                      circle: true,
                      iconData: EleIcons.el_icon_check,
                    ),
                    ElButton(
                      type: ElButtonType.info,
                      circle: true,
                      plain: true,
                      iconData: EleIcons.el_icon_message,
                    ),
                    ElButton(
                      type: ElButtonType.warning,
                      circle: true,
                      iconData: EleIcons.el_icon_star_off,
                    ),
                    ElButton(
                      type: ElButtonType.danger,
                      circle: true,
                      iconData: EleIcons.el_icon_delete,
                    ),
                  ],
                )
复制代码

被禁止的按钮

     Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    ElButton(
                      text: "默认按钮",
                      disabled: true,
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      text: "主要按钮",
                      disabled: true,
                    ),
                    ElButton(
                      type: ElButtonType.success,
                      text: "成功按钮",
                      disabled: true,
                    ),
                    ElButton(
                      type: ElButtonType.info,
                      text: "信息按钮",
                      disabled: true,
                    ),
                    ElButton(
                      type: ElButtonType.warning,
                      text: "警告按钮",
                      disabled: true,
                    ),
                    ElButton(
                      type: ElButtonType.danger,
                      text: "危险按钮",
                      disabled: true,
                    ),
                  ],
                )
复制代码

文字按钮

     Row(
                  children: [
                    ElButton(
                      type: ElButtonType.text,
                      text: "文字按钮",
                    ),
                    ElButton(
                      type: ElButtonType.text,
                      text: "文字按钮",
                      plain: true,
                      disabled: true,
                    ),
                  ],
                )
复制代码

图标按钮

     Row(
                  children: [
                    ElButton(
                      type: ElButtonType.primary,
                      // text: "文字按钮",
                      iconData: EleIcons.el_icon_edit,
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      iconData: EleIcons.el_icon_share,
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      iconData: EleIcons.el_icon_delete,
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      iconData: EleIcons.el_icon_search,
                      text: "搜索",
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      iconData: EleIcons.el_icon_upload,
                      iconPositoin: ElButtonIconPositoin.right,
                      text: "上传",
                    ),
                  ],
                )
复制代码

按钮组

     Row(
                  children: [
                    ElButtonGroup(
                      children: [
                        ElButton(
                          type: ElButtonType.primary,
                          iconData: EleIcons.el_icon_arrow_left,
                          text: "上一页",
                        ),
                        ElButton(
                          type: ElButtonType.primary,
                          iconData: EleIcons.el_icon_arrow_right,
                          iconPositoin: ElButtonIconPositoin.right,
                          text: "下一页",
                        ),
                      ],
                    ),
                    SizedBox(width: 20),
                    ElButtonGroup(
                      children: [
                        ElButton(
                          type: ElButtonType.primary,
                          iconData: EleIcons.el_icon_edit,
                        ),
                        ElButton(
                          type: ElButtonType.primary,
                          iconData: EleIcons.el_icon_share,
                        ),
                        ElButton(
                          type: ElButtonType.primary,
                          iconData: EleIcons.el_icon_delete,
                        ),
                      ],
                    ),
                  ],
                )
复制代码

加载中

    Row(
                  children: [
                    ElButton(
                      type: ElButtonType.primary,
                      text: "加载中",
                      loading: true,
                      disabled: true,
                    ),
                  ],
       )
复制代码

不同尺寸

    Row(
                  children: [
                    ElButton(
                      text: "默认按钮",
                    ),
                    SizedBox(width: 10),
                    ElButton(
                      text: "中等按钮",
                      size: ElSize.medium,
                    ),
                    SizedBox(width: 10),
                    ElButton(
                      text: "小型按钮",
                      size: ElSize.small,
                    ),
                    SizedBox(width: 10),
                    ElButton(
                      size: ElSize.mini,
                      text: "超小按钮",
                    ),
                  ],
                ),
                SizedBox(height: 20),
                Row(
                  children: [
                    ElButton(
                      text: "默认按钮",
                      round: true,
                    ),
                    SizedBox(width: 10),
                    ElButton(
                      text: "中等按钮",
                      round: true,
                      size: ElSize.medium,
                    ),
                    SizedBox(width: 10),
                    ElButton(
                      text: "小型按钮",
                      round: true,
                      size: ElSize.small,
                    ),
                    SizedBox(width: 10),
                    ElButton(
                      size: ElSize.mini,
                      round: true,
                      text: "超小按钮",
                    ),
                  ],
                )
复制代码