Flutter学习总结（十四、Flutter基本组件第四部分)
Flutter基本组件第四部分
一起从0开始学习Flutter!
前面已经学习了很多容器和组件，基本上可以为我们搭建一个简单的APP了，这篇作为基础组件的最后一篇，其他的组件可以等到我们使用到的时候再去进行查漏就可以，就不再一一分析了。
这篇我们一起来学习ToggleButtons，Checkbox，CheckboxListTile，Switch，Slider，RangeSlide。
1.ToggleButtons
一组水平摆放的切换按钮，可以设置多个状态的切换选择。还是跟以前一样先看下它的构造：
const ToggleButtons({
Key key,
@required this.children,//每个ToggleButton的布局样式，我们可以传入Icon或者Text来作为子Button
@required this.isSelected,//需要为每一个Button设置，必须数量与给出的按钮个数一致，我们在每次点击触发后再去刷新State来更改状态
this.onPressed,//参照下面详解
this.textStyle,//如果我们设置的是Text则可以在这里设置统一的样式
this.constraints,//我们可以控制这一组按钮里的每个按钮的大小，需要传入BoxConstraints对象，可以设置宽高
this.color,//设置里面的按钮默认颜色
this.selectedColor,//选中状态的颜色
this.disabledColor,//不可用的颜色
this.fillColor,//选中状态时的按钮底色
this.focusColor,//获取焦点的颜色
this.highlightColor,//按下的时候高亮的颜色
this.hoverColor,//悬浮鼠标的颜色
this.splashColor,//点击时的过度色
this.focusNodes,//焦点的关联点
this.renderBorder = true,//是否显示边框，False则不显示边框
this.borderColor,//默认边框的颜色
this.selectedBorderColor,//被选中时的边框颜色
this.disabledBorderColor,//被禁用时的边框颜色
this.borderRadius,//边框的圆角度数
this.borderWidth,//边框线条的粗细
})
onPressed
点击每个button的回调，回调时会返回点击的按钮的位置，如果没有给定onPress的值那么默认的会设置ToggleButton的状态为disable，我们可以根据位置来更换button的状态，举个例子：
onPressed: (position){
setState(() {
selected[position] = !selected[position];
});
},
2.Checkbox
我们通常使用的复选框按钮，我们可以一般用来作为设置的状态按钮。
const Checkbox({
Key key,
@required this.value, //是否选中的状态
this.tristate = false, //当value的值为空时是否要显示一个破折号，也就是一个横杠。True表示显示。
@required this.onChanged,//在点击按钮的时候状态变化的监听，回调时会返回当时的状态
this.activeColor,//选中时按钮的颜色
this.checkColor,//选中时里面对勾的颜色
this.focusColor,//获取光标时的颜色
this.hoverColor,//鼠标悬停时的颜色
this.materialTapTargetSize,//设置大小，是否是固定大小还是根据主题的大小
this.focusNode,//焦点的关联点
this.autofocus = false,//是否允许自动获取焦点
})
看着还是比较简单的，我们可以根据需要进行参数的配置
3.CheckboxListTile
既然提到了CheckBox顺便看一下CheckboxListTile，这是一个已经帮我们封装好了的一条选择框，包含了图片和文字描述的位置还有选择框，省去了我们自己构造这样条目的麻烦，先了解下它的构造：
const CheckboxListTile({
Key key,
@required this.value,//是否选中的状态
@required this.onChanged,//按钮点击的变化回调
this.activeColor,//选中时按钮的颜色
this.checkColor,//选中时里面对勾的颜色
this.title,//添加条目的Title文字描述
this.subtitle,//添加的子标题描述
this.isThreeLine = false,//是否允许标题的多行显示，true允许多行，false在子标题为空时标题只能显示一行，不为空时可以显示两行，但是实际测试没有发现效果
this.dense,//是否密集的显示，设置为True后title的字体会变小
this.secondary,//在最左边显示的控件，一般用来放置一个图片
this.selected = false,//如果设置为True则文字和图片会显示被按下的颜色
this.controlAffinity = ListTileControlAffinity.platform,//图片和控制按钮的位置，leading则会让图片和控制按钮调换位置。
})
4.Switch
我们常见的开关按钮，用来做是否开关某个功能。先来看下它的构造方法：
const Switch({
Key key,
@required this.value,//设置的是否开启的状态
@required this.onChanged,//在点击按钮的时候状态变化的监听，回调时会返回当时的状态
this.activeColor,//打开时上面的圆扭颜色
this.activeTrackColor,//打开时下面的横条颜色
this.inactiveThumbColor,//在关闭时圆钮的颜色
this.inactiveTrackColor,//在关闭时下面的横条颜色
this.activeThumbImage,//打开时的按钮可以替换为图片
this.inactiveThumbImage,//关闭状态的按钮可以用图片进行替换
this.materialTapTargetSize,//设置大小，是否是固定大小还是根据主题的大小
this.dragStartBehavior = DragStartBehavior.start,//开始识别手势的点
this.focusColor,//获取光标时的颜色
this.hoverColor,//鼠标悬停时的颜色
this.focusNode,//焦点的关联点
this.autofocus = false,//是否允许自动获取焦点
})
看着按钮也是比较简单的，不再多加赘述。
5.Slider
滑块组件，我们可以拖拽来显示特定的值。
const Slider({
Key key,
@required this.value,//当前选定的值
@required this.onChanged,//拖动滑块的变化事件，会将拖动变化的值回传
this.onChangeStart,//在开始拖动时的回调，会将开始时点的值回传
this.onChangeEnd,//在停止拖动时的回调，将停止时的点的值回传
this.min = 0.0,//slide的开始点
this.max = 1.0,//slide的结束点
this.divisions,//将开始到结束的点划分为多少段
this.label,//设置之后拖动圆钮上在拖动时会有小气泡出现，显示label定义的文字
this.activeColor,//拖动圆钮和已经经过的部分会变成该颜色
this.inactiveColor,//没有拖到到的部分会显示该颜色
this.semanticFormatterCallback,//根据slide的值创建一个自定义语义的值,还是留给了辅助功能使用的
})
6.RangeSlide
跟Slide很相似，只是由由原来的选择的是某个值改为了某个区间段的值。我们只看下差异的部分：
RangeSlider({
Key key,
@required this.values,//需要给定一段区间的设置。例如values: RangeValues(startIndex,endIndex),
@required this.onChanged,//由原来的返回单值变成返回RangeValues的对象，RangeValues可以返回开始和结束的点的值
this.onChangeStart,//由原来的返回单值变成返回RangeValues的对象，RangeValues可以返回开始和结束的点的值
this.onChangeEnd,//由原来的返回单值变成返回RangeValues的对象，RangeValues可以返回开始和结束的点的值
...
})
这篇文章介绍的几个组件都是比较简单，我们可以自己多加练习，看看实际的效果。