首页 文章详情

Element 系列组件之 ERadioGroup 单选组件

老孟Flutter | 292 2021-12-19 23:41 0 0 0
UniSMS (合一短信)


介绍

「ERadioGroup」「Element」 系列组件中的单选组件。

引入

  1. 「pubspec.yaml」 中依赖

    element_ui: ^0.0.1
  2. import

    import 'package:element_ui/widgets.dart';

用法

基础用法

ERadioGroup(
  radios: [
    ERadioItem(
      value: '1',
      label: '备选项',
    ),
    ERadioItem(
      value: '2',
      label: '备选项',
    ),
  ],
)

禁用选项

ERadioGroup(
  radios: [
    ERadioItem(
      value: '1',
      label: '禁用',
      enable: false,
    ),
    ERadioItem(
      value: '2',
      label: '备选项',
    ),
  ],
)

「onChanged」 当值发生变化时触发

ERadioGroup(
  selectValue: '1',
  onChanged: (value) {
    print('ERadioGroup onChanged value:$value');
  },
  radios: [
    ERadioItem(
      value: '1',
      label: '备选项1',
    ),
    ERadioItem(
      value: '2',
      label: '备选项2',
    ),
  ],
)

「selectValue」 默认选中值

ERadioGroup(
  selectValue: '1',
  radios: [
    ERadioItem(
      value: '1',
      label: '备选项1',
    ),
    ERadioItem(
      value: '2',
      label: '备选项2',
    ),
    ERadioItem(
      value: '3',
      label: '备选项3',
    )
  ],
),

按钮样式单选

ERadioButtonGroup(
  style: ERadioStyle(
      padding:
          EdgeInsets.symmetric(horizontal: 24, vertical: 12)),
  radios: [
    ERadioItem(
      value: '1',
      label: '北京',
    ),
    ERadioItem(
      value: '2',
      label: '上海',
    ),
    ERadioItem(
      value: '3',
      label: '广州',
    ),
    ERadioItem(
      value: '4',
      label: '深圳',
    ),
  ],
)

「border」 是否显示边框

ERadioGroup(
  border: true,
  radios: [
    ERadioItem(
      value: '1',
      label: '备选项1',
    ),
    ERadioItem(
      value: '2',
      label: '备选项2',
    ),
  ],
)

「style」 样式属性

  • 「fontColor」:字体颜色
  • 「checkedFontColor」:选中字体颜色
  • 「backgroundColor」:背景颜色
  • 「checkedBackgroundColor」:选中背景颜色
  • 「borderColor」:边框颜色
  • 「checkedBorderColor」:选中边框颜色
  • 「borderRadius」:边框圆角
  • 「padding」:每一个选项padding
  • 「space」:两个选项选项间的间距

字体样式

ERadioGroup(
  style: ERadioStyle(
    fontColor: Colors.black,
    checkedFontColor: Colors.red
  ),
  radios: [
    ERadioItem(
      value: '1',
      label: '备选项1',
    ),
    ERadioItem(
      value: '2',
      label: '备选项2',
    ),
  ],
),

背景样式

ERadioGroup(
  style: ERadioStyle(
      backgroundColor: Colors.grey.withOpacity(.5),
      checkedBackgroundColor: Colors.red,
      checkedFontColor: Colors.white),
  radios: [
    ERadioItem(
      value: '1',
      label: '备选项1',
    ),
    ERadioItem(
      value: '2',
      label: '备选项2',
    ),
  ],
)

边框样式

ERadioGroup(
  style: ERadioStyle(
    borderColor: Colors.grey.withOpacity(.3),
    checkedBorderColor: Colors.red,
    borderRadius: BorderRadius.all(Radius.circular(3))
  ),
  border: true,
  radios: [
    ERadioItem(
      value: '1',
      label: '备选项1',
    ),
    ERadioItem(
      value: '2',
      label: '备选项2',
    ),
  ],
)


你可能还喜欢

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