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可以返回開始和結束的點的值
...
})
這篇文章介紹的幾個組件都是比較簡單，我們可以自己多加練習，看看實際的效果。