前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Element 系列组件之 ECheckbox 多选组件

Element 系列组件之 ECheckbox 多选组件

作者头像
老孟Flutter
发布2021-12-27 13:21:05
1.1K0
发布2021-12-27 13:21:05
举报
文章被收录于专栏:Flutter

介绍

「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
  ),
)
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-12-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 老孟Flutter 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 引入
  • 用法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档