一次學(xué)習(xí)Flutter的過程，一個簡單的單選或者多選。
地址
截圖
1.gif
導(dǎo)入
flutter_sujian_select:^1.0.1
import 'package:flutter_sujian_select/flutter_select.dart';
使用
單選
SelectGroup<int>(
index:0,
items: <SelectItem<int>>[
SelectItem(label: '30天',value: 1),
SelectItem(label: '60天',value: 2),
SelectItem(label: '90天',value: 3),
],
onSingleSelect: (int value){
},
),
多選
SelectGroup<int>(
type: SelectType.multiple,
style: SelectStyle.rectangle,
direction: SelectDirection.vertical,
listIndex: [1,2],
items: <SelectItem<int>>[
SelectItem(label: '1',value: 1),
SelectItem(label: '2',value: 2),
SelectItem(label: '3',value: 3),
SelectItem(label: '4',value: 4),
],
onMultipleSelect: (List<int> value){
},
),
屬性說明
| 屬性 | 描述 | 默認(rèn)值 |
|---|---|---|
| borderColor | 邊框顏色 | Colors.blue |
| unSelectColor | 未選中背景顏色 | Colors.white |
| selectColor | 選中顏色 | Colors.blue |
| space | item之間的距離 | const EdgeInsets.all(0.0) |
| padding | 內(nèi)邊距 | const EdgeInsets.all(8.0) |
| isRepeatBorderLine | 是否去掉重復(fù)的線（矩形生效） | false |
| type | 選擇類型 | SelectType.single |
| style | item風(fēng)格 | SelectStyle.circular |
| direction | 排列方向 | SelectDirection.horizontal |
| index | 默認(rèn)值（單選可用） | null |
| listIndex | 默認(rèn)值（多選可用） | null |
| onSingleSelect | 單選回調(diào)（單選可用） | null |
| onMultipleSelect | 多選回調(diào)（單選可用） | null |
| items | 選項(xiàng)（必要） | null |
