QML自定义组件集合
前几天上传了两个组件代码，这次把一些自定义组件整理下全部上传
- 文字滚动
QML组件部分整理
/*!
*@file TextScroll.qml
*@description 文字滚动
*@version 1.0
*/
import QtQuick 2.0
Rectangle {
id: rectText
property alias text: contentTextId.text
property int fontPixelSize: 24
property alias color: contentTextId.color
property alias backcolor: rectText.color
width: parent.width
height: contentTextId.height
color: color_background
clip: true
Text{
id:contentTextId
anchors.verticalCenter: parent.verticalCenter
text:""
font.pixelSize: fontPixelSize
font.family: fontFamily
color:color
//elide: Text.ElideRight
SequentialAnimation{
id:animText
NumberAnimation {
target: contentTextId
property: "x"
duration: 500 + Math.abs(contentTextId.width - rectText.width) * 5
to:(rectText.width - contentTextId.width*1.5)
running: false
easing.type: Easing.Linear
}
NumberAnimation {
target: contentTextId
property: "x"
duration: 500
from: rectText.width
to:0
running: false
easing.type: Easing.Linear
}
}
NumberAnimation {
id:animreturnText
target: contentTextId
property: "x"
duration: 0
to:0
running: false
easing.type: Easing.Linear
}
}
function animationStart(){
if(contentTextId.width > rectText.width)
animText.start()
}
function animationStop(){
if(contentTextId.width > rectText.width)
{ animText.stop()
animreturnText.start()}
}
MouseArea{
anchors.fill:parent
onClicked: {
animationStart()
}
onEntered: {
animationStart()
}
onExited: {
animationStop()
}
}
}
- spinbox
QML组件部分整理
/*!
*@file ESpinBox.qml
*@description 选择器
*@version 1.0
*/
import QtQuick 2.12
import QtQuick.Controls 2.5
SpinBox {
property alias foreStyle: _input
property alias bckStyle: _bck
property real _implicitWidth : 120
property real _implicitHeight : 60
id: spin
implicitWidth: _implicitWidth
implicitHeight: _implicitHeight
leftPadding: ( _bck.radius != 0) ? _bck.radius : 2 * _down.width
rightPadding: (_bck.radius != 0) ? _bck.radius : 2 * _up.width
topPadding: 0
bottomPadding: 0
editable: false
background: Rectangle {
id: _bck
color: color_transparent
border.color: "gray"
radius: spin.implicitHeight / 2
}
contentItem: Rectangle {
color: _bck.color
border.width: _bck.border.width
border.color: _bck.border.color
TextInput {
id: _input
anchors.fill: parent
font: spin.font
text: spin.displayText
readOnly: !spin.editable
validator: spin.validator
horizontalAlignment: TextInput.AlignHCenter
verticalAlignment: TextInput.AlignVCenter
}
}
down.indicator: Item {
width: leftPadding
height: parent.height
Text {
id: _down
text: qsTr("-")
font: spin.font
color: (spin.value !== spin.from) ? "black" : _input.color
anchors.centerIn: parent
}
}
up.indicator: Item {
x: parent.width - rightPadding
width: rightPadding
height: parent.height
Text {
id: _up
text: qsTr("+")
font: spin.font
color: (spin.value !== spin.to) ? "black" : _input.color
anchors.centerIn: parent
}
}
}
- combobox
QML组件部分整理
/*!
*@file MycomboBox.qml
*@description 下拉comboBox
*@version 1.0
*/
import QtQuick 2.12
import QtQuick.Controls 2.4
import QtGraphicalEffects 1.0
ComboBox {
id:dataList
property alias _backgroundColor: backRect.color
anchors.centerIn: parent
width: 240 * m_ratio
height: /*80 * m_ratio*/parent.height
background: Rectangle {
id:backRect
implicitWidth: parent.width
implicitHeight: parent.height
color: color_background
border.color: "#979797"
border.width: /*dataList.visualFocus ? 2 :*/ 0
radius: radius_real
}
delegate: ItemDelegate {
id:itemDlgt
width: dataList.width
contentItem: Text {//下拉字体
text: modelData
color: color_vice
width: parent.width
font.family: fontFamily
font.pixelSize: 36 * m_ratioFont
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
anchors.left: parent.left
anchors.leftMargin: 10 * m_ratio
}
background: Rectangle {
radius:radius_real
width: parent.width - 6 * m_ratio
height: parent.height - 6 * m_ratio
color:itemDlgt.hovered ? color_background : color_white
anchors.centerIn: parent
}
highlighted: dataList.highlightedIndex === index
}
contentItem: Text {//显示字体
text: dataList.displayText
width: parent.width
font.family: fontFamily
font.pixelSize: 36 * m_ratioFont
color: color_Rosered
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
anchors.left: parent.left
anchors.leftMargin: 10 * m_ratio
}
popup: Popup {
y: dataList.height/* - 1*/
width: dataList.width
implicitHeight: contentItem.implicitHeight
padding: 0 * m_ratio
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: dataList.popup.visible ? dataList.delegateModel : null
currentIndex: dataList.highlightedIndex
ScrollIndicator.vertical: ScrollIndicator { }
interactive:false
anchors.centerIn: parent
}
background: Rectangle {
id:backpop
width: dataList.width
height: parent.implicitHeight
border.color: "#FE4AEC"
border.width: 1.0 * m_ratio
radius: radius_real
color: color_white
Rectangle{
id:backRect2
width: parent.width
height: parent.height
radius: radius_real
color: color_white
anchors.centerIn: parent
}
DropShadow {
anchors.fill: backRect2
radius: 4
samples: 9
color: "#FE4AEC"
spread: 0.5
source: backRect2
cached: true
}
}
}
indicator: Canvas {
id: canvas
x: dataList.width - width - dataList.rightPadding
y: dataList.topPadding + (dataList.availableHeight - height) / 2
width: 24 * m_ratio
height: 12 * m_ratio
contextType: "2d"
opacity: 0.4
Connections {
target: dataList
onPressedChanged: canvas.requestPaint()
}
onPaint: {
context.save()
context.reset()
context.lineWidth = 2 * m_ratio
context.beginPath()
context.moveTo(0, 0)
context.lineTo(width / 2, height)
context.lineTo(width, 0)
context.fillStyle = Qt.rgba(200, 155, 255,0)/*dataList.pressed ? color_vice : */
context.stroke()
context.restore()
}
}
}//ComboBox
- circularprogress
/*!
*@file CircularProgressBtn.qml
*@description 按钮切换圆形进度条
*@version 1.0
*/
import QtQuick 2.0
Rectangle{
width: 240 * m_ratio
height: 80 * m_ratio
property alias _enableBtn: background._idgrandient
property alias _submissionText: submissionText.text
property bool _Finish: false
signal finishSignal();
Rectangle{
id:submitRect
width: parent.width
height: parent.height
anchors.centerIn: parent
radius: radius_real
ObliqueGradient{
id:background
width: parent.width;height: parent.height
anchors.fill: parent
_idgrandient:false
}
Text {
id: submissionText
text: qsTr("加载")
font.family: fontFamily
font.pixelSize: 36 * m_ratioFont
color: color_white
anchors.centerIn: parent
}
MouseArea{
anchors.fill: parent
onClicked: {
if(background._idgrandient && !_Finish){
if (rAniStart.running || rAniStop.running) return
submissionText.visible = false;
background._radius = submitRect.height/2
rAniStart.start();
widthAniStart.start();
}
else if(_Finish){
finishSignal()
}
}
}
PropertyAnimation{
id: rAniStart
target: submitRect
property: "radius"
duration: 300
from: 0
to: submitRect.height/2
onStopped: {
cProgress.onStart();
cProgress.visible = true;
}
}
PropertyAnimation{
id: widthAniStart
target: submitRect
property: "width"
duration: 300
from: submitRect.width
to: submitRect.height
}
MyCircularprogress{
id: cProgress
anchors.centerIn: parent
visible: false
arcWidth: 4 * m_ratio
radius: submitRect.height/2
interval: 1
progressAdd: 3
arcColor: "#148014"
onSStop: {
visible = false;
rAniStop.start();
widthAniStop.start();
}
}
PropertyAnimation{
id: rAniStop
target: submitRect
property: "radius"
duration: 300
from: submitRect.height/2
to: 0
onStopped: {
submissionText.text = qsTr("完 成");
submissionText.visible = true;
background._radius = radius_real;
//background._idgrandient = false;
// _Finish = true
}
}
PropertyAnimation{
id: widthAniStop
target: submitRect
property: "width"
duration: 300
from: submitRect.height
to: 240 * m_ratio
}
}
}
/*!
*@file CircularProgress.qml
*@description Qml圆形进度条
*@version 1.0
*/
import QtQuick 2.4
Canvas {
property color arcColor: "#148014"
property color arcBackgroundColor: "yellow"
property int arcWidth: 4 * m_ratio
property real progress: 0
property real progressAdd: 1
property real radius: 100 * m_ratio
property bool anticlockwise: false
property alias interval: timer.interval
signal sStart()
signal sStop()
id: canvas
width: 2*radius + arcWidth
height: 2*radius + arcWidth
Text{
anchors.centerIn: parent
font.family: fontFamily
color: color_Rosered
font.pixelSize: 24 * m_ratioFont
text: Math.floor((parent.progress / 360) * 100 )+ "%"
}
Timer{
id: timer
running: false
repeat: true
interval: 10
onTriggered:{
parent.progress = parent.progress + progressAdd;
if (parent.progress > 360){
onStop();
return;
}
parent.requestPaint();
}
}
function isRunning(){
return(timer.running)
}
function onStart(){
progress = 0;
var ctx = getContext("2d");
ctx.clearRect(0,0,width,height);
timer.running = true;
emit: sStart()
}
function onStop(){
timer.running = false;
emit: sStop()
}
onPaint: {
var ctx = getContext("2d")
ctx.clearRect(0,0,width,height)
ctx.beginPath()
ctx.strokeStyle = arcBackgroundColor
ctx.lineWidth = arcWidth
ctx.arc(width/2,height/2,radius,0,Math.PI*2,anticlockwise)
ctx.stroke()
var r = progress*Math.PI/180
ctx.beginPath()
ctx.strokeStyle = arcColor
ctx.lineWidth = arcWidth
ctx.arc(width/2,height/2,radius,0-90*Math.PI/180,r-90*Math.PI/180,anticlockwise)
ctx.stroke()
}
}
- menuBtn
QML组件部分整理
/*!
*@file menuleftBtn.qml
*@description 左侧页面主键按钮
*@version 1.0
*/
import QtQuick 2.0
Item {
id: replyBtn
property bool _focus: false
property string _imageSource:"qrc:/image/app-menu-icon-home.svg"
signal btnClicked()
width: 142 * m_ratio
height: 120 * m_ratio
z:1
Rectangle{
id: replyRect
anchors.fill: parent
color: "#565656"
opacity: _focus ? 1 : 0.07
}
Image {
id: replyImage
sourceSize.width: 45 * m_ratio
sourceSize.height: 45 * m_ratio
anchors.centerIn: parent
source: _imageSource
opacity: _focus ? 1 : 0.35
}
MouseArea {
id: replyArea
hoverEnabled : true
anchors.fill: parent
onClicked: {
btnClicked()
}
onEntered:{
replyRect.opacity = 0.5
replyImage.opacity = 0.7
}
onExited:{
replyRect.opacity = _focus ? 1 : 0.07
replyImage.opacity = _focus ? 1 : 0.35
}
}
function focusChange(isfocus){
if(isfocus){
_focus = true
replyRect.opacity = 1
replyImage.opacity = 1
}
else{
_focus = false
replyRect.opacity = 0.07
replyImage.opacity = 0.35
}
}
}
- newmessage
QML组件部分整理
/*!
*@file NewMessage.qml
*@description 通知显示按钮
*@version 1.0
*/
import QtQuick 2.0
Rectangle{
id:messageRect
property bool _NewTypeSys: true
property string _newsNum: "3"
signal messagePopopen()
width: 100 * m_ratio
height: 100 * m_ratio
color: color_transparent
Image {
id: messageImage
sourceSize.width: 35 * m_ratio
sourceSize.height: 35 * m_ratio
anchors.centerIn: parent
source: "qrc:/image/app-topbar-icon-message2.svg"
}
Rectangle{
width: newsNum.width < newsNum.height ? newsNum.height : newsNum.width+6*m_ratio
height: newsNum.height
radius: newsNum.height / 2
border.width: 1*m_ratio
border.color: color_white
color: color_Rosered
anchors.left: messageImage.right
anchors.leftMargin: -10 * m_ratio
anchors.bottom: messageImage.top
anchors.bottomMargin: -10 * m_ratio
opacity: _newsNum === "0" ? 0 : 1
Text {
id: newsNum
text: qsTr(_newsNum)
font.family: fontFamily
font.pixelSize: 18 * m_ratioFont
color: color_white
anchors.centerIn: parent
}
}
Rectangle{
id:newmessage
width: 12 * m_ratio
height: width
radius: width / 2
anchors.top: messageImage.bottom
anchors.topMargin: 20 * m_ratio
anchors.horizontalCenter: parent.horizontalCenter
//color: _NewTypeSys ? color_white : color_Fontvice
gradient: Gradient{
GradientStop {position: 0.0; color: _newsNum != "0" ? "#FE5DEB" : _NewTypeSys ? color_white : color_Fontvice }
GradientStop {position: 1.0; color: _newsNum != "0" ? "#588EDD" : _NewTypeSys ? color_white : color_Fontvice }
}
}
Rectangle{
width: 5 * m_ratio
height: 36 * m_ratio
anchors.left: messageImage.right
anchors.leftMargin: 50 * m_ratio
anchors.verticalCenter: parent.verticalCenter
color: _NewTypeSys ? "#000000" : "#EBEBEB"
opacity: 0.2
}
MouseArea{
id:messageArea
anchors.fill: parent
onClicked: {
messagePopopen()
}
}
}
- tumbler
import QtQuick 2.0
import QtQuick.Extras 1.4
import QtQuick.Controls.Styles 1.4
Rectangle {
width: parent.width
height: parent.height
color:color_background
property var years: [2015,2016,2017,2018,2019,2020]
property var mouths: [1,2,3,4,5,6,7,8,9,10,11,12]
property var days: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
Tumbler {
id : thumberp
anchors.centerIn: parent
TumblerColumn {
model: years
width: 100
}
TumblerColumn {
model: mouths
width: 100
}
TumblerColumn {
model: days
width: 100
}
style: TumblerStyle{
id : styleData;
//外面的边框
frame : Rectangle{
// implicitWidth : 2
color: "green"
opacity: 0.6
}
//背景色设置
background: Rectangle{
color: "white"
}
foreground: Rectangle{
color: "black"
opacity: 0.3
gradient: Gradient {
GradientStop { position: 0.2; color: "lightsteelblue" }
GradientStop { position: 0.5; color: "blue" }
GradientStop { position: 0.8; color: "lightsteelblue" }
}
}
delegate : Rectangle{
width: 120
height: thumberp.height/3
color: "black"
opacity: 0.5
Text {
anchors.centerIn: parent
text: styleData.value
opacity: 0.4 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6
color: "white"
font.pointSize: 15
}
}
}
}
}
- drawer
import QtQuick 2.0
import QtQuick.Controls 2.5
Rectangle {
id: window
width: parent.width
height: parent.height
visible: true
Button {
id: button
x: parent.width * 0.5
anchors.verticalCenter: parent.verticalCenter
text: qsTr("LeftDrawer")
onClicked: {
if(drawer.visible)
drawer.close()
else
drawer.open()
}
}
Drawer {
id: drawer
width: 0.5 * window.width
height: window.height
modal: true
clip: true
edge: Qt.LeftEdge
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
background: Rectangle{
anchors.fill: parent
color: "#298b89"
opacity: 0.5
}
}
}
- tooltip
QML组件部分整理
import QtQuick 2.0
import QtQuick.Controls.Material 2.3
import QtQuick.Window 2.10
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
Rectangle {
width: parent.width
height: parent.height
color:color_background
Row{
spacing: 30;
Button {
text: qsTr("Save")
ToolTip.visible: down
ToolTip.text: qsTr("Save the active project")
}
Button {
text: qsTr("Button")
ToolTip.visible: pressed
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
ToolTip.text: qsTr("This tool tip is shown after pressing and holding the button down.")
}
Button {
text: qsTr("Button")
hoverEnabled: true
ToolTip.delay: 1000
ToolTip.timeout: 5000
ToolTip.visible: hovered
ToolTip.text: qsTr("This tool tip is shown after hovering the button for a second.")
}
Slider {
id: slider
value: 0.5
ToolTip {
parent: slider.handle
visible: slider.pressed
text: slider.value.toFixed(1)
}
}
}
}
- myswitch
QML组件部分整理
import QtQuick 2.0
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
Item {
id: switchItem
width: 50
height: width / 2
property bool _isOpen: true
Rectangle {
id: closeBtn
visible: !_isOpen
width: parent.width
height: width / 2
color: color_Fontmain
radius: 25
anchors.fill: parent
Rectangle {
width: 20
height: width
radius: width / 2
color: color_white
anchors.left: parent.left
anchors.leftMargin: 3
anchors.verticalCenter: parent.verticalCenter
}
}
Rectangle {
id: openBtn
visible: _isOpen
width: parent.width
height: width / 2
color: color_Rosered
radius: 25
anchors.fill: parent
Rectangle {
width: 20
height: width
radius: width / 2
color: color_white
anchors.right: parent.right
anchors.rightMargin: 3
anchors.verticalCenter: parent.verticalCenter
}
}
}
- swipeview
QML组件部分整理
import QtQuick 2.12
import QtQuick.Controls 2.5
Rectangle {
width: parent.width
height: parent.height
SwipeView {
id: view
currentIndex: 0
anchors.fill: parent
Page{
Image{
anchors.fill: parent
source: "qrc:/image/logo2.jpg"
}
}
Page{
Image{
anchors.fill: parent
source: "qrc:/image/logo4.jpg"
}
}
Page{
Image{
anchors.fill: parent
source: "qrc:/image/logo6.jpg"
}
}
Item {
Image{
anchors.fill: parent
source: "qrc:/image/logo8.jpg"
}
}
Item {
id: secondPage
Rectangle{
anchors.centerIn: parent
width: 200
height: 200
color: "black"
}
}
}
//数字显示
Rectangle{
width: 60
height: 20
radius: height / 2
color: "#858585"
anchors.bottom: view.bottom
anchors.right: parent.right
Text {
id: _numIndicatorText
anchors.centerIn: parent
font.family: fontFamily
font.pixelSize: 14
color: "#FFFFFF"
text: qsTr((view.currentIndex + 1) + "/" + view.count)
}
}
//原点显示
PageIndicator {
id: indicator
interactive: true
count: view.count
currentIndex: view.currentIndex
anchors.bottom: view.bottom
anchors.horizontalCenter: parent.horizontalCenter
delegate: Rectangle {
implicitWidth: 8
implicitHeight: implicitWidth
radius: width / 2
color: index === indicator.currentIndex ? "red" : "#858585"
opacity: index === indicator.currentIndex ? 1 : pressed ? 0.7 : 0.3
anchors.verticalCenter: parent.verticalCenter
Behavior on opacity {
OpacityAnimator {
duration: 1000
}
}
}
}
Timer {
interval: 1500; running: true; repeat: true
onTriggered: {
if(view.currentIndex < view.count - 1) view.currentIndex++;
else view.currentIndex = 0;
}
}
}
- mydial
QML组件部分整理
import QtQuick 2.0
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4
Rectangle {
width: parent.width
height: parent.height
Dial {
id: dial
snapMode: Dial.SnapAlways;
stepSize: 0.05;
onMoved: {
lbl.text = value;
}
}
Button{
id: btnIncrease
text: "增加"
anchors.left: dial.right;
anchors.leftMargin: 40;
anchors.bottom: dial.bottom;
onClicked: {
dial.increase();
lbl.text = dial.value;
}
}
Button{
id: btnDecrease
text: "减少"
anchors.left: btnIncrease.right;
anchors.leftMargin: 40;
anchors.bottom: btnIncrease.bottom;
onClicked: {
dial.decrease();
lbl.text = dial.value;
}
}
Label{
id: lbl;
text: "0";
font.bold: true;
font.pixelSize: 28;
anchors.left: btnDecrease.right;
anchors.leftMargin: 40;
anchors.bottom: btnIncrease.bottom;
}
}
源码地址https://download.csdn.net/download/jiangxiaoyu20/11647973
源码下载