首页 文章详情

Element 系列组件之 ECheckbox 多选组件

老孟Flutter | 287 2021-12-25 19:11 0 0 0
UniSMS (合一短信)


介绍

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

引入

  1. 「pubspec.yaml」 中依赖

    element_ui: ^0.0.1
  2. 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
  ),
)



关注「老孟Flutter」
让你每天进步一点点
good-icon 0
favorite-icon 0
收藏
回复数量: 0
    暂无评论~~
    Ctrl+Enter