Shulou(Shulou.com)05/31 Report--

This article Xiaobian introduces in detail for you "Flutter how to achieve single selection, check and switch components", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "Flutter how to achieve single selection, check and switch components" can help you solve your doubts.

1. Switch Switch

Construction method:

Const Switch ({Key? Key, required this.value,// current switch state required this.onChanged,// change state callback this.activeColor,// turn on all colors this.activeTrackColor,// open track color this.inactiveThumbColor,// close slider color this.inactiveTrackColor,// close track color this.activeThumbImage,// open slider picture this.onActiveThumbImageError,// open slider picture failed to load failed to trigger this.inactiveThumbImage / / close slider picture this.onInactiveThumbImageError,// close slider picture loading failure trigger this.thumbColor,// can set slider color through different states this.trackColor,// can set track color through different states this.materialTapTargetSize,// set minimum size of component this.dragStartBehavior = DragStartBehavior.start,// handle gesture drag behavior this.mouseCursor / / set mouse hover state app does not need this.focusColor,// to get focus color this.hoverColor,// pointer hover color this.overlayColor,// setting press slide cover top color this.splashRadius,// set click slide cover ring radius this.focusNode,// focus controls whether this.autofocus = false,// automatically acquires focus

Through the Switch construction method we can achieve a simple switch component, and in addition to changing the color we can also customize the slider, if the switch component is described in addition to custom layout, you can also use SwitchListTile components, a list and a combination of Swith, official help us to achieve a lot of common functions, can be used directly. If you use Apple-style switches, you can use packaged CupertinoSwitch.

Sample code:

Switch (/ / activeColor: Colors.blue, activeTrackColor: Colors.red, inactiveTrackColor: Colors.green, / / inactiveThumbColor: Colors.yellow, materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, dragStartBehavior: DragStartBehavior.start, activeThumbImage: AssetImage ("images/lbxx.png"), inactiveThumbImage: AssetImage ("images/lbxx.png"), value: _ switchSelected, onChanged: (value) {setState (() {_ switchSelected = value;});})

2. Select Radio

Construction method:

Const Radio ({Key? Key, the value of the required this.value,// radio button required this.groupValue,// currently selected required this.onChanged,// selected the callback of this button this.mouseCursor,// mouse over state this.toggleable = false,// click on the selected button whether to call the onChanged callback this.activeColor,// option button color this.fillColor,// sets the color this.focusColor of different states of the radio box / / get focus color this.hoverColor,// pointer hover color this.overlayColor,// press overlay color this.splashRadius,// press overlay color radius this.materialTapTargetSize,// component minimum size this.visualDensity,// component compactness this.focusNode,// focus this.autofocus = whether false,// automatically obtains focus})

The radio component uses generics. When we use it, we can customize the data type of the option, which is usually used in the list. The radio component can help us to implement a radio list option. Of course, Radio also has a corresponding RadioListTile, which is used to describe the checkbox.

Sample code:

Column (children: [_ radioCheckBox (_ dataList [0]), _ radioCheckBox (_ dataList [1]), _ radioCheckBox (_ dataList [2]), _ radioCheckBox (_ dataList [3]),), Row _ radioCheckBox (FMRadioBean fmRadioBean) {return Row (children: [Radio (visualDensity: VisualDensity (horizontal: VisualDensity.minimumDensity, vertical: VisualDensity.minimumDensity), value: fmRadioBean) / / activeColor: Colors.red, fillColor: MaterialStateProperty.resolveWith ((state) {if (state.contains (MaterialState.selected)) {return Colors.red } else {return Colors.blue;}}), focusColor: Colors.orange, groupValue: groupValue, toggleable: false, onChanged: (value) {setState (() {groupValue = fmRadioBean; radioText = fmRadioBean.text;}) }), Text (fmRadioBean.text)],);} class FMRadioBean {int index; String text; bool isSelect; FMRadioBean (this.index, this.text, this.isSelect);}

3. Check multiple Checkbox

Construction method:

Const Checkbox ({Key? Key, whether required this.value,// is selected this.tristate = false,// check box value can be selected for null required this.onChanged,// callback this.mouseCursor,// mouse pointer state this.activeColor,// select color this.fillColor,// different state color set this.checkColor,// check color this.focusColor,// get focus color this.hoverColor / / pointer hover color this.overlayColor,// press overlay color this.splashRadius,// press coverage radius this.materialTapTargetSize,// minimum size this.visualDensity,// component compactness this.focusNode, this.autofocus = false, this.shape,// custom option box style this.side,// custom option box border style})

Multi-selection components can use shape and side fields to customize the selection box style, but the general interaction is a single selection of circles and more selection of squares. Since the first two brothers have ready-made auxiliary components, there is naturally a CheckboxListTile for more choices, and the three brothers are basically the same in usage.

Sample code:

Column (children: [_ checkCheckBox (_ dataList [0]), _ checkCheckBox (_ dataList [1]), _ checkCheckBox (_ dataList [2]), _ checkCheckBox (_ dataList [3]),), Text (_ checkText.toString ()) Row _ checkCheckBox (FMRadioBean fmRadioBean) {return Row (children: [Checkbox (visualDensity: VisualDensity (horizontal: VisualDensity.minimumDensity, vertical: VisualDensity.minimumDensity)) Value: fmRadioBean.isSelect, activeColor: Colors.blue, checkColor: Colors.white, shape: RoundedRectangleBorder (borderRadius: BorderRadius.all (Radius.circular (6)), side: BorderSide (color: Colors.black,width: 2 Magi style: BorderStyle.solid) OnChanged: (value) {setState () {if (value = = true) {fmRadioBean.isSelect = true _ checkText.add (fmRadioBean.text);} else {fmRadioBean.isSelect = false; _ checkText.remove (fmRadioBean.text);}});}), Text (fmRadioBean.text)],);}

Read here, the "Flutter how to achieve single selection, check and switch components" article has been introduced, want to master the knowledge of this article still need to practice and use in order to understand, if you want to know more related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.