下拉筛选菜单框,支持单选、多选、栅栏样式及自定义显示内容
!!!由于分体式设计,给定默认选中值时,需要外部初始化SpinnerController
后手动使用给菜单栏标题赋值
demo link:flutter web link。
Spinner Box
使用案例
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('多选操作')),
body: Column(
children: [
SpinnerBox.builder(
titles: const ['多选条件', '多选条件', '混合条件+拦截'].toSpinnerData,
builder: (notifier) {
return [
SpinnerFilter(
data: _condition1,
onCompleted: (result, name, data, onlyClosed) {
_condition1 = data;
notifier.updateName(name);
setState(() {
_result = result;
});
},
).heightPart,
SpinnerFilter(
data: _condition2,
onCompleted: (result, name, data, onlyClosed) {
_condition2 = data;
notifier.updateName(name);
setState(() {
_result = result;
});
},
).heightPart,
SpinnerFilter(
data: _condition3,
onItemIntercept: (entity, item, index) async {
// 可以从数据源来确定拦截按钮,也可以从点击时通过额外逻辑来判定
// 但按钮置灰样式只能通过数据源配置处理
if (item.isItemIntercept ||
(entity.key == 'text2' && index == 2)) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('欸~ 就是选不了~')),
);
return true;
}
return false;
},
onCompleted: (result, name, data, onlyClosed) {
_condition3 = data;
notifier.updateName(name);
setState(() {
_result = result;
});
},
).heightPart,
];
},
),
Padding(
padding: const EdgeInsets.all(30.0),
child: Text('筛选结果: $_result'),
),
],
),
);
}
外部初始化SpinnerController
var spinnerController = PopupValueNotifier.titles(['全部'].toSpinnerData);
...
SpinnerBox.builder(
controller: spinnerController,
builder: (spinner) {
...
});
更新所选项的标题或设置高亮显示
spinnerController.updateName(name);
or
spinnerController.setHighlight(true)
Libraries
- asset
- popup_message
- spinner/route/trans_dialog
- spinner/route/trans_route
- spinner/route/trans_route_new
- spinner/spinner
- spinner/state
- spinner/theme
- spinner_box
- spinner_filter_notifier/providers/entity
- spinner_filter_notifier/providers/provider
- spinner_filter_notifier/providers/provider_fence
- spinner_filter_notifier/providers/state
- spinner_filter_notifier/spinner_fence
- spinner_filter_notifier/spinner_filter
- spinner_filter_notifier/theme/theme