Flutter架構搭建《三》 自定義Spinner

自定義Spinner

/**
 * @Author: Nimodou
 * @Blog: https://blog.csdn.net/qq_28535319
 * @Email: [email protected]
 * @Email: [email protected]
 * @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(() {
                                  });
                                },),
           

具體使用因人而異

效果

路還很長，慢慢走