Element 系列组件之 ERadioGroup 单选组件-技术圈

介绍

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

引入

在 「pubspec.yaml」 中依赖
```
element_ui: ^0.0.1
```

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」

让你每天进步一点点