柚子快報(bào)激活碼778899分享：java 前端 Flutter

http://yzkb.51969.com/

body: SliderTheme( data: SliderTheme.of(context).copyWith( trackHeight: 10, // 軌道高度 trackShape: RectangularSliderTrackShape(), // 軌道形狀，可以自定義 activeTrackColor: Colors.blueGrey, // 激活的軌道顏色 inactiveTrackColor: Colors.black26, // 未激活的軌道顏色 thumbShape: RoundSliderThumbShape( // 滑塊形狀，可以自定義 enabledThumbRadius: 30 // 滑塊大小 ), thumbColor: Colors.white, // 滑塊顏色 overlayShape: RoundSliderOverlayShape( // 滑塊外圈形狀，可以自定義 overlayRadius: 50, // 滑塊外圈大小 ), overlayColor: Colors.black54, // 滑塊外圈顏色 valueIndicatorShape: PaddleSliderValueIndicatorShape(), // 標(biāo)簽形狀，可以自定義 activeTickMarkColor: Colors.red, // 激活的刻度顏色 ), child: Slider( value: _value, min: 0, max: 100, divisions: 10, label: ‘$_value’, onChanged: (v){

setState(() {

_value = v; }); }, ), ),

呈現(xiàn)出來(lái)的效果是這樣的。

介紹 Slider 的使用方法絕對(duì)不是本文的目的。細(xì)心的讀者可能會(huì)發(fā)現(xiàn)，在上圖中，Slider 的軌道（track）寬度并沒(méi)有占滿水平方向，左右還留有空間。讀者在直觀上可能會(huì)認(rèn)為是軌道自帶了外邊距（margin）或內(nèi)邊距（padding），其實(shí)都不是！左右留有的空間是 Slider 的大小，Slider 占據(jù)了整個(gè)屏幕的水平寬度。留出的左右空白大小，剛好是滑塊外圈直徑的大?。』瑝K滑到最左或最右，能保證滑塊仍然在 Slider 內(nèi)部，僅此而已，如下圖。

柚子快報(bào)激活碼778899分享：java 前端 Flutter

http://yzkb.51969.com/

參考文章