Element 系列组件之 ECheckbox 多选组件

2021-12-27 13:21:05 浏览数 (2)

介绍

「ECheckbox」「Element」 系列组件中的多选框组件。

引入

「pubspec.yaml」 中依赖

代码语言:javascript复制
element_ui: ^0.0.1

import

代码语言:javascript复制
import 'package:element_ui/widgets.dart';

用法

基础用法,「value」 是否选中,true表示选中,false表示未选中。

代码语言:javascript复制
ECheckbox(
  value: false,
  label: '复选框',
)

「border」 是否显示边框。

代码语言:javascript复制
ECheckbox(
  value: false,
  label: '复选框',
  border: true,
)

「onChanged」 是否选中发生变化时回调

代码语言:javascript复制
ECheckbox(
  value: true,
  label: '复选框',
  onChanged: (value){},
)

「tristate」表示有3种状态,分别为选中、未选中、横线。

代码语言:javascript复制
ECheckbox(
  value: true,
  label: '复选框',
  tristate: true,
)

「enable」 设置为true时,表示禁用。

代码语言:javascript复制
ECheckbox(
  value: false,
  label: '禁用',
  enable: false,
)

「style」 样式

  • 「fontColor」:字体颜色
  • 「checkedFontColor」:选中字体颜色
  • 「backgroundColor」:背景颜色
  • 「checkedBackgroundColor」:选中背景颜色
  • 「borderColor」:边框颜色
  • 「checkedBorderColor」:选中边框颜色
  • 「borderRadius」:边框圆角半径
  • 「padding」:内边距
  • 「space」:label与选择框之间的距离

字体样式

代码语言:javascript复制
ECheckbox(
  value: false,
  label: '复选框',
  style: ECheckboxStyle(
    fontColor: Colors.red,
    checkedFontColor: Colors.blue,
  ),
)

背景样式

代码语言:javascript复制
ECheckbox(
  value: false,
  label: '复选框',
  style: ECheckboxStyle(
    backgroundColor: Colors.grey.withOpacity(.3),
    checkedBackgroundColor: Colors.blue,
  ),
)

边框样式

代码语言:javascript复制
ECheckbox(
  value: false,
  label: '复选框',
  border: true,
  style: ECheckboxStyle(
    borderColor: Colors.green,
    checkedBorderColor: Colors.red,
    borderRadius: BorderRadius.circular(10),
  ),
)

设置边距

代码语言:javascript复制
ECheckbox(
  value: false,
  label: '复选框',
  border: true,
  style: ECheckboxStyle(
    padding: EdgeInsets.symmetric(horizontal: 32,vertical: 24),
    space: 30
  ),
)

0 人点赞