Element 系列组件之 ECheckbox 多选组件

老孟Flutter

发布于 2021-12-27 13:21:05

1K0

发布于 2021-12-27 13:21:05

文章被收录于专栏：Flutter

介绍

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

引入

在 「pubspec.yaml」 中依赖

element_ui: ^0.0.1

import

import 'package:element_ui/widgets.dart';

用法

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

ECheckbox(
  value: false,
  label: '复选框',
)

「border」 是否显示边框。

ECheckbox(
  value: false,
  label: '复选框',
  border: true,
)

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

ECheckbox(
  value: true,
  label: '复选框',
  onChanged: (value){},
)

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

ECheckbox(
  value: true,
  label: '复选框',
  tristate: true,
)

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

ECheckbox(
  value: false,
  label: '禁用',
  enable: false,
)

「style」 样式

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

字体样式

ECheckbox(
  value: false,
  label: '复选框',
  style: ECheckboxStyle(
    fontColor: Colors.red,
    checkedFontColor: Colors.blue,
  ),
)

背景样式

ECheckbox(
  value: false,
  label: '复选框',
  style: ECheckboxStyle(
    backgroundColor: Colors.grey.withOpacity(.3),
    checkedBackgroundColor: Colors.blue,
  ),
)

边框样式

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

设置边距

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