盛世清平~Qt quick学习笔记_16
2018_01_27感兴趣的控件学习:
Slider(196)
面板（panel）滑槽（groove）刻度线（tickMarks）滑块（handle）
定制滑块控件外观SliderStyle类：groove，handle,panel,tickmarks
滑块每个部分都可定制
maximumValue设置最大值
minimumValue设置最小值
stepSize用来设置滑块变化的步长
orientation用来设置控件的方向（Qt.Horizontal、Qt.Vertical）
updateValueWhileDragging用来设置拖动滑块时控件的当前值是否变化
tickmarksEnabled是否显示刻度线：默认false
hovered指示鼠标是否悬停在控件上方
pressed指示鼠标或手指是否按下
activeFocusOnPress属性指示当用户按下鼠标或手指时，控件是否获得键盘焦点
style属性指向一个SliderStyle对象
定制面板、滑槽、滑块、刻度线四部分
control--应用此风格对象的滑块控件实例
groove--滑槽组件
handle--滑块组件
tickmarks---刻度线组件
panel--面板组件
以上四个都是Component类型
import QtQuick 2.2
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
Window {
visible: true
Rectangle{
width:320;
height:240;
color:"lightgray";
Row{
anchors.fill:parent;
spacing: 20;
Column{
width:200;
spacing:16;
Text{
id:sliderStat;
color:"blue";
text:"current - 0.1";
}
Slider{
width:200;
height:30;
stepSize: 0.01;
value:0.1;
onValueChanged: {
sliderStat.text = "current -" + value;
}
}
Slider{
width:200;
height:30;
minimumValue: 0;
maximumValue: 100;
stepSize: 1;
value:50;
tickmarksEnabled: true;
}
Slider{
id:customGrooveAndHandle;
width:200;
height:30;
stepSize: 0.1;
value:0;
tickmarksEnabled: true;
style:SliderStyle{
groove:Rectangle{
implicitHeight: 8;
implicitWidth: 200;
color:"gray";
radius:8;
}
handle:Rectangle{
anchors.centerIn: parent;
color:control.pressed?"white":"lightgray";
border.color: "gray";
border.width: 2;
width:34;
height:34;
radius:12;
}
}
}
Slider{
id:customPanel;
width:200;
height:36;
stepSize: 0.1;
value:0;
tickmarksEnabled: true;
style:SliderStyle{
groove:Rectangle{
implicitHeight: 8;
implicitWidth: 200;
color:"gray";
radius:8;
}
handle:Rectangle{
anchors.centerIn: parent;
color:control.pressed?"white":"lightgray";
border.color: "gray";
border.width: 2;
width:34;
height:34;
radius:12;
Text{
anchors.centerIn: parent;
text:control.value;
color:"red";
}
}
panel:Rectangle{
anchors.fill: parent;
radius:4;
color:"lightsteelblue";
Loader{
id:grooveLoader;
anchors.centerIn: parent;
sourceComponent: groove;
}
Loader{
id:handleLoader;
anchors.verticalCenter:
grooveLoader.verticalCenter;
x:Math.min(grooveLoader.x+(control.value*grooveLoader.
width)/(control.maximumValue),grooveLoader.width - item.width);
sourceComponent: handle;
}
}
}
}
}
Slider{
width:30;
height:200;
orientation: Qt.Vertical;
stepSize: 0.1;
value:0.2;
tickmarksEnabled: true;
}
}
}
}