平行四辺形に基づくQtQMLプログレスバー
すべての愛は努力を惜しまないでください。あなたが本当にそれを好きなら、それをより高い優先順位とより多くの時間を与えてください！
GITプロジェクトファイルはこちら： QmlLearningPro
QMLその他の記事はこちらをクリックしてください： QT QUICKQMLスタディノート
1.デモンストレーション
あまりナンセンスではありません、上の写真：
2.実装プロセス
1.最初に平行四辺形を実現します： Rectangleのマトリックス変更（変換：Matrix4x4）を介して：
Rectangle {
id: rect
...
// 切变矩阵
transform: Matrix4x4 {
matrix: Qt.matrix4x4(1, xs, 0, 0, // xs平方向切变 +表示朝右
ys, 1, 0, 0, // ys垂直方向切变 +表示朝下
0, 0, 1, 0,
0, 0, 0, 1)
}
}
参照：https：//blog.csdn.net/weixin_39644614/article/details/112220330
2.さらに15の平行四辺形を実現します。リピーターと行を組み合わせて次のことを行います。
Row {
id: row
...
Repeater {
id: rep
model: 15
Parallelogram {
xs: -0.6
ys: 0.01
...
}
}
}
3.異なる色の2つの平行四辺形を通してプログレスバーのパーセンテージを実現します：制御する正方形の数を表示する属性を作成します
property int showIndex: 0
onShowIndexChanged: {
for(var i=0; i<15; i++) {
if (row.children[i].toString().startsWith("Parallelogram")) {
if(i<showIndex) row.children[i].color = "lightblue"
else row.children[i].color = "white"
}
}
}
4.入力を提供するスライド式プログレスバーを作成します。
Rectangle {
id: container
...
//小滑块条
Rectangle {
id: slider
...
MouseArea {
...
drag.axis: Drag.XAxis
}
//滑块变动，影响 showIndex 的变化
onXChanged:{
showIndex = 15*x/(sliderMax)
}
}
}
5.同時に、入力を提供するために2つのボタンが作成されます。
Button {
id: sub
text: "SUB"
...
onClicked: {
showIndex--
if(showIndex <= 0) showIndex=0;
slider.x = showIndex * sliderMax / 15
}
}
Button {
text: "ADD"
...
onClicked: {
showIndex++
if(showIndex >= 15) showIndex=15;
slider.x = showIndex * sliderMax / 15
}
}
3.完全なコード
Parallelogram.qml：
import QtQuick 2.12
Item {
property real xs: 0 // 水平方向切变
property real ys: 0 // 垂直方向切变
property alias radius: rect.radius // 圆角
property alias text: title.text // 文本
property alias color: rect.color
Rectangle {
id: rect
anchors.fill: parent
color: "lightblue"
// 切变矩阵
transform: Matrix4x4 {
matrix: Qt.matrix4x4(1, xs, 0, 0,
ys, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1)
}
Text {
id: title
anchors.centerIn: rect
text: "0"
}
}
}
main.qml：
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
visible: true
width: 600
height: 220
title: qsTr("不一样的进度条！")
color: "#404040"
property int showIndex: 0 //lightblue
property int _pix: 20
property int sliderMax: container.width - slider.width-1
onShowIndexChanged: {
for(var i=0; i<15; i++) {
if (row.children[i].toString().startsWith("Parallelogram")) {
if(i<showIndex) {
row.children[i].color = "lightblue"
}
else {
row.children[i].color = "white"
}
}
}
}
Row {
id: row
anchors.horizontalCenter: parent.horizontalCenter
y: 40
spacing: 4
Repeater {
id: rep
model: 15
Parallelogram {
xs: -0.6
ys: 0.01
radius: 3
width: 28
color: "white"
height: 10 + (28-10) * (15-index) / 15
anchors.bottom: parent.bottom
// anchors.bottomMargin: -index
text: index + 1
}
}
}
Rectangle {
id: container
anchors {
top: row.bottom
topMargin: 30
left: row.left
leftMargin: -10
}
width: row.width
height: _pix
radius: height/2;
opacity: 0.6 //不透明度
antialiasing: true // 抗锯齿，具体效果见下面图片
//渐变色
gradient: Gradient {
GradientStop {
position: 0.0; color: "White" }
GradientStop {
position: 1.0; color: "LightSalmon" }
}
//小滑块条
Rectangle {
id: slider
x: 0
y: 2
width: _pix*2;
height: _pix-4
radius: height/2;
antialiasing: true
gradient: Gradient {
GradientStop {
position: 0.0; color: "green" }
GradientStop {
position: 1.0; color: "aqua" }
}
MouseArea {
anchors.fill: parent
anchors.margins: -_pix
drag.target: parent;
drag.axis: Drag.XAxis
drag.minimumX: 1;
drag.maximumX: sliderMax;
}
//滑块变动，影响 showIndex 的变化
onXChanged:{
showIndex = 15*x/(sliderMax)
}
}
}
Button {
id: sub
text: "SUB"
anchors.top: container.bottom
anchors.topMargin: 20
anchors.left: container.left
onClicked: {
showIndex--
if(showIndex <= 0) showIndex=0;
slider.x = showIndex * sliderMax / 15
}
}
Button {
text: "ADD"
anchors.top: container.bottom
anchors.topMargin: 20
anchors.left: sub.right
anchors.leftMargin: 20
onClicked: {
showIndex++
if(showIndex >= 15) showIndex=15;
slider.x = showIndex * sliderMax / 15
}
}
}
GITプロジェクトファイルについては、ここをクリックしてください： QmlLearningPro
QML他の記事については、ここをクリックしてください： QT QUICKQML研究ノート