Third generation software development-Customized Slider (1)
Article directory
- Third generation software development-customized Slider (1)
-
- Project Introduction
- Custom Slider(1)
- in conclusion
Keywords:
Qt、
Qml、
Slider、
position、
Keyword 5
Project introduction
Welcome to our QML & C++ project! This project combines the power of QML (Qt Meta-Object Language) and C++ to develop excellent user interfaces and high-performance backend logic.
In the project, we leveraged QML’s declarative syntax and visual design capabilities to create a modern user interface. Through intuitive coding and reusable components, we can quickly develop rich and diverse interface effects and animation effects. At the same time, we use QML’s powerful integration capabilities to easily integrate the underlying logic and data model of C++ into the front-end interface.
On the backend side, we use C++ to write high-performance algorithms, data processing, and computational logic. C++ is a powerful programming language that offers excellent performance and scalability. Our team is committed to optimizing code and reducing resource consumption to ensure that our projects run efficiently on a variety of platforms and devices.
Whether you’re interested in QML and C++ development or need us to build complex user interfaces and backend logic for you, we’re ready to support you. Please feel free to contact us and let’s build a modern, high-performance QML & C++ project together!
Important?
?The price of this column will increase after the third generation soft development update.
Customized Slider (1)
This part of the code was developed by our little partners. I would like to share it here. According to my habits, I will definitely not write one myself. I will go to Qt’s built-in Slider to get the style. But looking at the code, our little partners are I implemented one myself. When I write a simple video player later, there will be a custom Slider (second appearance).
My friend’s blog ID: https://blog.csdn.net/weixin_44641897?type=blog
? 
import QtQuick 2.0
Item {
id: root
// The position of the cursor
property int position: 5
//Maximum number of scales
property int maxSchedule: 11
//Display string position -1 left 0 none 1 right
property int textLocation: 0
// The width of the position occupied by the string is less than or equal to 0, which means there is no value.
property int textWidth: 150
//The length of the character through the content should be the tick value + 1
property var textData: []
//scale interval
property real space: 4
// Scale bar width (without interval)
property int barWidth: 20
//Scale bar width
property int barWidthContain: barWidth + spac
width: textLocation == 0 ? processBar.width + 40 : processBar.width + textWidth + 40
height: 60
Component.onCompleted: {
// console.log(textData.length)
}
// background image
Image {
id: backSlider
source: textLocation == -1 ? "qrc:/MainWindow/T_Resource/T_Image/MainWindow/Thyroid/Slider/bg_time.png" : "qrc:/MainWindow/T_Resource/T_Image/MainWindow/Thyroid/Slider/bg. png"
anchors.centerIn: parent
width: textLocation == 0 ? processBar.width + 40 : processBar.width + textWidth + 40
// anchors.margins: 20
// Cursor scale display
Text {
id: sliderText
// Prevent the provided scale value from being insufficient
text: textData.length > position ? textData[position] : "null"
width: textWidth
height: 20
visible: textLocation == 0 || textWidth == 0 ? false : true
color: "#D8D8D8"
x: textLocation == -1 ? 20 : textLocation == 1 ? backSlider.width - textWidth : 0
y: backSlider.height / 2 - height / 2
}
// progress bar
Image {
id: processBar
width: 8 + maxSchedule * barWidthContain
height: 10
x: textLocation == 1 ? 20 : textLocation == -1 ? backSlider.width - processBar.width-20 : 20
y: backSlider.height / 2 - height / 2
source: "qrc:/MainWindow/T_Resource/T_Image/MainWindow/Thyroid/Slider/slider_bar.png"
//scale
ListView {
id:list
spacing:spac
orientation: ListView.Horizontal
width: processBar.width
height: 10
x: space
model: maxSchedule
interactive: false
delegate: Rectangle{
width: barWidth
height: 4
y: processBar.height / 2 - height / 2
color: index < position ? "#00B1FF" : "#53555C"
}
//Realize fast forward and rewind when clicking on the progress bar
MouseArea{
anchors.fill: parent
onClicked: {
position = (mouseX + barWidthContain/2)/barWidthContain
for(var i=1;i<maxSchedule;i + + )
{
if(i < position)
{
list.currentIndex = i //Click which item to select
list.currentItem.color = "#00B1FF"
}
else
{
list.currentIndex = i //Click which item to select
list.currentItem.color = "#53555C"
}
}
}
}
// cursor
Image {
id: sliderRect
source: "qrc:/MainWindow/T_Resource/T_Image/MainWindow/Thyroid/Slider/pointer.png"
x: position==0 ? 0-sliderRect.width/2 : position*barWidthContain -spac -sliderRect.width/2
y: list.height / 2 - height / 2 + 2
MouseArea{
anchors.fill: parent
onMouseXChanged: {
if(mouseX>barWidth + sliderRect.width/2)
{
if(position < maxSchedule)
{
list.currentIndex = position //Click which item to select
list.currentItem.color = "#00B1FF"
position++
}
}
if(mouseX<0)
{
if(position > 1)
{
list.currentIndex = position-1 //Click which item to select
list.currentItem.color = "#53555C"
position--
}
}
}
}
}
}
}
}
}
How to use:
Turing_Slider{
id:slider_voltage
anchors.left: parent.left
anchors.bottom: parent.bottom
visible: false
position: UserProfile.voltageRange
maxSchedule: 13
textLocation: 1
textWidth: 80
textData: ["","20uV","50uV","100uV","200uV","500uV","1KuV","2KuV", "5KuV","1WuV","2WuV","5WuV","10WuV","Adaptive"]
onPositionChanged: {
UserProfile.voltageRange = position;
switch (position){
case 1:set_voltageRange(20);playSound.play();break
case 2:set_voltageRange(50);playSound.play();break
case 3:set_voltageRange(100);playSound.play();break
case 4:set_voltageRange(200);playSound.play();break
case 5:set_voltageRange(500);playSound.play();break
case 6:set_voltageRange(1000);playSound.play();break
case 7:set_voltageRange(2000);playSound.play();break
case 8:set_voltageRange(5000);playSound.play();break
case 9:set_voltageRange(10000);playSound.play();break
case 10:set_voltageRange(20000);playSound.play();break
case 11:set_voltageRange(50000);playSound.play();break
case 12:set_voltageRange(100000);playSound.play();break
case 13:set_voltageRange(0);playSound.play();break
}
}
Summary
The meaning of this Slider is to provide an idea, but there shouldn’t be much reusability, including in our project, and it can’t be reused. It can be said that it is specially customized for a certain function. Reference Reference
