1. 前言
<1> 自定義樣式 （節(jié)點(diǎn)和滑竿）
<2> 過(guò)渡值和分段值效果都可實(shí)現(xiàn)
2. 效果展示
 diamond_node_slider.gif
|
 diamond_node_slider.jpg
|
|---|
3. 使用
該插件為本人撰寫(xiě)，點(diǎn)擊pub.dev查看态贤。
dependencies:
diamond_node_slider: ^1.0.6
4. 代碼
///常用
DiamondNodeSlisder(
activeTrackColor: Color(0xFF878E9A),
unActiveTrackColor: Color(0xFFEBEBEB),
width: 300.0,
height: 2.5,
divisions: 4,
maxValue: 100,
minValue: 0,
textUnitStr: '%',
valueChanged:(value,ratioV) {
print('value===$value');
},
),
///最小值不為0
DiamondNodeSlisder(
activeTrackColor: Colors.red,
unActiveTrackColor: Color(0xFFEBEBEB),
width: 300.0,
height: 2.5,
divisions: 5,
maxValue: 125,
minValue: 1,
textUnitStr: 'x',
valueChanged:(value,ratioV) {
print('value===$value');
},
),
///節(jié)點(diǎn)文字不顯示
DiamondNodeSlisder(
activeTrackColor: Colors.blue,
unActiveTrackColor: Color(0xFFEBEBEB),
width: 300.0,
height: 2.5,
divisions: 4,
maxValue: 80,
minValue: 0,
textShowBool: false,
valueChanged:(value,ratioV) {
print('value===$value');
},
),
///節(jié)點(diǎn)圓形舱呻、設(shè)置軌道高度
DiamondNodeSlisder(
activeTrackColor: Colors.orange,
unActiveTrackColor: Color(0xFFEBEBEB),
width: 300.0,
height: 5, //軌道高度
nodeWidth: 15, //節(jié)點(diǎn)寬高
divisions: 4,
maxValue: 120,
minValue: 0,
isRhombus: false, //非菱形
valueChanged:(value,ratioV) {
print('value===$value');
},
),
///直接跳到節(jié)點(diǎn)，無(wú)過(guò)渡
DiamondNodeSlisder(
activeTrackColor: Colors.green,
unActiveTrackColor: Color(0xFFEBEBEB),
width: 300.0,
height: 2.5,
divisions: 4,
maxValue: 150,
minValue: 0,
textUnitStr: 'm',
toNodeBool: true,
valueChanged:(value,ratioV) {
print('value===$value');
},
),
///無(wú)節(jié)點(diǎn)
DiamondNodeSlisder(
activeTrackColor: Colors.purple,
unActiveTrackColor: Color(0xFFEBEBEB),
width: 300.0,
height: 5,
divisions: 0, //段數(shù)為0
nodeWidth: 15,
isRhombus: false,
maxValue: 100,
minValue: 0,
textUnitStr: '%',
textShowBool: false,
valueChanged: (value, ratioV) {
print('value===$value');
},
),
///有初始值
DiamondNodeSlisder(
ratioValue: _ratioValue,
activeTrackColor: Color(0xFF878E9A),
unActiveTrackColor: Color(0xFFEBEBEB),
width: 300.0,
height: 2.5,
divisions: 4,
maxValue: sliderMaxValue,
minValue: sliderMinValue,
textUnitStr: 'x',
valueChanged:(value,ratioV) {
setState(() {
_currentValue= value;
print('_currentValue===$_currentValue');
_ratioValue = ratioV;
print('ratioV===$_ratioValue');
//輸入框賦值
leverController.text='${value}x';
});
},
)
5. 參數(shù)說(shuō)明
final double width;//長(zhǎng)度
final double height;//高度
final int? maxValue;//最大值
final int? minValue;//最小值
final int divisions;//段數(shù)
final Color? unActiveTrackColor;//不活躍顏色
final Color? activeTrackColor;//活躍顏色
final String textUnitStr;//文字單位：%、x等
final bool textShowBool;//是否顯示節(jié)點(diǎn)下的文字
final double nodeWidth;//節(jié)點(diǎn)寬高
final bool isRhombus;//true:菱形（默認(rèn)） false：圓形
final bool toNodeBool;//滑動(dòng)直接跳到節(jié)點(diǎn)箱吕，無(wú)過(guò)渡
final double? ratioValue; //百分率芥驳，范圍:0-1, 初始值/ maxValue
final Function(int) valueChanged;//回調(diào)slider值
