Flutter 自定義單選控件

在Flutter 應用開發中，常常會遇到各類單選效果，雖然官方提供了Radio組件，可是並不能知足咱們實際的開發需求，因此每每還須要自定義控件才能知足平時的開發需求。下面就平時開發中用到的單選進行介紹：

自定義SegmentBar

對於分段組件你們確定不會陌生，主要是實現多個分段，實現單選功能，效果以下圖。

話很少說，直接上代碼：

class SegmentBarView extends StatefulWidget {

  List<String> datas;
  Function(String) onSelected;
  int defaultIndex=0;
  SegmentBarView({@required this.datas, this.onSelected,this.defaultIndex});

  @override
  _SegmentBarViewState createState() => _SegmentBarViewState();
}

class _SegmentBarViewState extends State<SegmentBarView> {

  List<String> sdkLists;
  String selectItem;

  @override
  void initState() {
    super.initState();
    sdkLists = widget.datas;
    selectItem=sdkLists[widget.defaultIndex];
  }
  
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Container(
        padding: EdgeInsets.only(left: 10, right: 10),
        child: Row(
          children: _buildSegments(sdkLists),
        ),
      ),
    );
  }

  _buildSegments(List list) {
    if(list == null) {
      return Container();
    }
    List<Widget> items = List();
    list.forEach((item){
      if(item != null) {
        items.add(Container(
          padding: EdgeInsets.only(top: 8,bottom: 8),
          child: _buildItem(item),
        ));
      }
    });
    return items;
  }

  _buildItem(String item) {
    if(selectItem == item) {
      return Container(
        height: 34,
        child: RaisedButton(
          shape:  RoundedRectangleBorder(
//            borderRadius: BorderRadius.circular(15)
          ),
          color: Color(0xFF00A6DE),
          onPressed: (){

          },
          child: Text(item,style: TextStyle(color: Colors.white),),
        ),
      );
    }else {
      return Container(
        height: 34,
        child: OutlineButton(
          borderSide: BorderSide(color: Color(0xFFcccccc),width: 0.5),
          onPressed: (){
            updateGroupValue(item);
          },
          child: Text(item),
        ),
      );

    }
  }

  updateGroupValue(String item) {
    if(item == selectItem) {
      return;
    }else {
      selectItem = item;
      widget.onSelected(selectItem);
      setState(() {
      });
    }
  }
  
}

使用的時候，只須要按照構造函數傳入對應的參數便可。

自定義Radio

固然，開發中還能夠遇到下面這種帶圓角的按鈕，效果以下。

對於這種效果怎麼作呢，最簡單的就是硬編碼，用兩個按鈕，而後點擊的時候去切換，代碼以下：

//只能支持兩個按鈕單選
class RadioGroupWidget extends StatefulWidget {

  List<String> datas ;
  Function(String) onSelected;
  double radioWidth=80;
  double radioHeight=28;
  RadioGroupWidget({@required this.datas,@required this.onSelected,this.radioWidth, this.radioHeight,});

  @override
  State<StatefulWidget> createState() {
    return RadioGroupState();
  }
}

class RadioGroupState extends State<RadioGroupWidget> {

  var chooseStr;
  int choosed=1;
  Color choosedBgColor=Colors.blue;
  Color choosedCornerColor=Colors.blue;
  Color choosedTxtColor=Colors.white;
  Color defaultBgColor=Colors.white;
  Color defaultCornerColor=Colors.grey;
  Color defaultTxtColor=Colors.grey;

  @override
  void initState() {
    super.initState();
    chooseStr=widget.datas[0];
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        GestureDetector(
          onTap: (){
            choosed=1;
            chooseStr=widget.datas[0];
            setState(() {});
            widget.onSelected(chooseStr);
          },
          child: Container(
            height: widget.radioHeight,
            width: widget.radioWidth,
            decoration: BoxDecoration(
              color: choosed==1?choosedBgColor:defaultBgColor,
              borderRadius: BorderRadius.only(topLeft: Radius.circular(15),bottomLeft: Radius.circular(15)),
              border:  Border.all(width: 1, color: choosed==1?choosedCornerColor:defaultCornerColor),
            ),
            child: Center(child: Text(widget.datas[0],style: TextStyle(color: choosed==1?choosedTxtColor:defaultTxtColor,fontSize: 12))),
          )
        ),
        GestureDetector(
          onTap: (){
            choosed=2;
            chooseStr=widget.datas[1];
            setState(() {});
            widget.onSelected(chooseStr);
          },
          child: Container(
            height: widget.radioHeight,
            width: widget.radioWidth,
            decoration: BoxDecoration(
              color: choosed==2?choosedBgColor:defaultBgColor,
              borderRadius: BorderRadius.only(topRight: Radius.circular(15),bottomRight: Radius.circular(15)),
              border:  Border.all(width: 1, color: choosed==2?choosedCornerColor:defaultCornerColor),
            ),
            child: Center(child: Text(widget.datas[1],style: TextStyle(color: choosed==2?choosedTxtColor:defaultTxtColor,fontSize: 12))),
          )
        )
      ],
    );
  }


}

實際使用時，傳入參數便可。

List<String> lineRadios = ['實時流水', '累計流水'];
RadioGroupWidget(radioWidth:80,radioHeight:28,datas: lineRadios, onSelected: (value){
                 print('_buildChartTitle value: '+value.toString());
              },)