Flutter架构搭建《三》 自定义Spinner
自定义Spinner
/**
* @Author: Nimodou
* @Blog: https://blog.csdn.net/qq_28535319
* @Email: 344451903@qq.com
* @Email: Nimodou93@163.com
* @Date: 2019/7/31
* @Description:
*/
///
class SpinnerWidget extends StatefulWidget{
List<String> _list;
final double left,right,bottom,top,height,width,iconLeft;
final String title;
final Color bgColor;
String content;
final Function backSelector;
TextStyle textStyle;
SpinnerWidget(this.title,this._list,{this.left,this.right,this.bottom,this.top,
this.height,this.width,this.bgColor,this.content,this.iconLeft,this.textStyle,
this.backSelector,
});
@override
State createState() {
return SpinnerState();
}
}
class SpinnerState extends State<SpinnerWidget>{
@override
Widget build(BuildContext context) {
return
Padding(
padding: EdgeInsets.only(left: widget.left??0, right: widget.right??0, bottom:widget.bottom?? 0,top: widget.top??0),
child: GestureDetector(
child: Container(
height: widget.height??50,
width: widget.width??double.infinity,
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: widget.bgColor??ThemeApp.white),
child: PopupMenuButton(itemBuilder: (ctx) {
return widget._list.map((value) {
return PopupMenuItem<String>(
child: Text("$value"), value: "$value");
}).toList();
},
child: Row(
children: <Widget>[
Text("${widget.title}",style: widget.textStyle??null,),
Padding(padding: EdgeInsets.only(left: 10),),
Text("${widget.content}",style: widget.textStyle??null,),
Padding(padding: EdgeInsets.only(left: widget.iconLeft??60),
child: Icon(Icons.arrow_drop_down),)
],
),
onSelected: (String action){
setState(() {
widget.backSelector(action);
});
},
),
),
));
}
}
class SpinnerCustomItemWidget<T> extends StatefulWidget{
final double left,right,bottom,top,height,width;
final String title;
final Color bgColor;
List<T> list;
String content;
final Function backSelector;
final Function backWidget;
SpinnerCustomItemWidget(this.title,this.list,this.backWidget,{this.left,this.right,this.bottom,this.top,
this.height,this.width,this.bgColor,this.content,
this.backSelector,
});
@override
State createState() {
return SpinnerCustomItemState<T>();
}
}
class SpinnerCustomItemState<T> extends State<SpinnerCustomItemWidget>{
@override
Widget build(BuildContext context) {
return
Padding(
padding: EdgeInsets.only(left: widget.left??0, right: widget.right??0, bottom:widget.bottom?? 0,top: widget.top??0),
child: GestureDetector(
child: Container(
height: widget.height??50,
width: widget.width??double.infinity,
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: widget.bgColor??ThemeApp.white),
child: PopupMenuButton(itemBuilder: (ctx) {
return widget.list.map((value) {
return PopupMenuItem<T>(
child: widget.backWidget(widget.list.indexOf(value)), value: value);
}).toList();
},
child: Row(
children: <Widget>[
Text("${widget.title}"),
Padding(padding: EdgeInsets.only(left: 10),),
Text("${widget.content}"),
Padding(padding: EdgeInsets.only(left: 60),
child: Icon(Icons.arrow_drop_down),)
],
),
onSelected: (T action){
setState(() {
widget.backSelector(action);
});
},
),
),
));
}
}
使用
分两种一种是String的一种是范型需要自定义Item的
(1)string 的
SpinnerWidget("窗帘转向",
clList,
left: 40,
right: 40,
top: 15,
content: widget.roomBean?.curtainDirection!=null?
widget.roomBean?.curtainDirection==0?"左":"右":"请选择",
backSelector: (value){
value=="左"? widget.roomBean.curtainDirection=0:widget.roomBean.curtainDirection=1;
clContent=value;
setState(() {});
},
),
(2)范型的,数据就是你的期望的展示l数据model
SpinnerCustomItemWidget<RoomOrgidDeviceBean>("触发设备",
cfList,
(index)=> Text("${cfList[index].bindingDevName}"),
content: cfDevice??"请选择",
top: 20,
right: 40,
left: 40,
backSelector: (RoomOrgidDeviceBean value){
cfDevice=value.bindingDevName;
widget.scensItemBean?.triggerDevice=value.bindingId;
setState(() {
});
},),
具体使用因人而异
效果
路还很长,慢慢走