在Flutter 应用开发中&＃xff0c;经常会遇到各种单选效果&＃xff0c;虽然官方提供了Radio组件&＃xff0c;但是并不能满足我们实际的开发需求&＃xff0c;所以往往还需要自定义控件才能满足平时的开发需求。下面就平时开发中用到的单选进行介绍&＃xff1a;
自定义SegmentBar
对于分段组件大家肯定不会陌生&＃xff0c;主要是实现多个分段&＃xff0c;实现单选功能&＃xff0c;效果如下图。
话不多说&＃xff0c;直接上代码&＃xff1a;
class SegmentBarView extends StatefulWidget {List datas;Function(String) onSelected;int defaultIndex&＃61;0;SegmentBarView({&＃64;required this.datas, this.onSelected,this.defaultIndex});&＃64;override_SegmentBarViewState createState() &＃61;> _SegmentBarViewState();
}class _SegmentBarViewState extends State {List sdkLists;String selectItem;&＃64;overridevoid initState() {super.initState();sdkLists &＃61; widget.datas;selectItem&＃61;sdkLists[widget.defaultIndex];}&＃64;overrideWidget 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 &＃61;&＃61; null) {return Container();}List items &＃61; List();list.forEach((item){if(item !&＃61; null) {items.add(Container(padding: EdgeInsets.only(top: 8,bottom: 8),child: _buildItem(item),));}});return items;}_buildItem(String item) {if(selectItem &＃61;&＃61; 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 &＃61;&＃61; selectItem) {return;}else {selectItem &＃61; item;widget.onSelected(selectItem);setState(() {});}}}
使用的时候&＃xff0c;只需要按照构造函数传入对应的参数即可。
自定义Radio
当然&＃xff0c;开发中还可以遇到下面这种带圆角的按钮&＃xff0c;效果如下。
对于这种效果怎么做呢&＃xff0c;最简单的就是硬编码&＃xff0c;用两个按钮&＃xff0c;然后点击的时候去切换&＃xff0c;代码如下&＃xff1a;
//只能支持两个按钮单选
class RadioGroupWidget extends StatefulWidget {List datas ;Function(String) onSelected;double radioWidth&＃61;80;double radioHeight&＃61;28;RadioGroupWidget({&＃64;required this.datas,&＃64;required this.onSelected,this.radioWidth, this.radioHeight,});&＃64;overrideState createState() {return RadioGroupState();}
}class RadioGroupState extends State {var chooseStr;int choosed&＃61;1;Color choosedBgColor&＃61;Colors.blue;Color choosedCornerColor&＃61;Colors.blue;Color choosedTxtColor&＃61;Colors.white;Color defaultBgColor&＃61;Colors.white;Color defaultCornerColor&＃61;Colors.grey;Color defaultTxtColor&＃61;Colors.grey;&＃64;overridevoid initState() {super.initState();chooseStr&＃61;widget.datas[0];}&＃64;overrideWidget build(BuildContext context) {return Row(children: [GestureDetector(onTap: (){choosed&＃61;1;chooseStr&＃61;widget.datas[0];setState(() {});widget.onSelected(chooseStr);},child: Container(height: widget.radioHeight,width: widget.radioWidth,decoration: BoxDecoration(color: choosed&＃61;&＃61;1?choosedBgColor:defaultBgColor,borderRadius: BorderRadius.only(topLeft: Radius.circular(15),bottomLeft: Radius.circular(15)),border: Border.all(width: 1, color: choosed&＃61;&＃61;1?choosedCornerColor:defaultCornerColor),),child: Center(child: Text(widget.datas[0],style: TextStyle(color: choosed&＃61;&＃61;1?choosedTxtColor:defaultTxtColor,fontSize: 12))),)),GestureDetector(onTap: (){choosed&＃61;2;chooseStr&＃61;widget.datas[1];setState(() {});widget.onSelected(chooseStr);},child: Container(height: widget.radioHeight,width: widget.radioWidth,decoration: BoxDecoration(color: choosed&＃61;&＃61;2?choosedBgColor:defaultBgColor,borderRadius: BorderRadius.only(topRight: Radius.circular(15),bottomRight: Radius.circular(15)),border: Border.all(width: 1, color: choosed&＃61;&＃61;2?choosedCornerColor:defaultCornerColor),),child: Center(child: Text(widget.datas[1],style: TextStyle(color: choosed&＃61;&＃61;2?choosedTxtColor:defaultTxtColor,fontSize: 12))),))],);}}
实际使用时&＃xff0c;传入参数即可。
List lineRadios &＃61; [&＃39;实时流水&＃39;, &＃39;累计流水&＃39;];
RadioGroupWidget(radioWidth:80,radioHeight:28,datas: lineRadios, onSelected: (value){print(&＃39;_buildChartTitle value: &＃39;&＃43;value.toString());},)
京公网安备 11010802041100号