mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-10-31 00:07:36 +08:00
update
This commit is contained in:
parent
7122407b0b
commit
b22e79148b
@ -63,12 +63,15 @@ FluScrollablePage{
|
|||||||
onFinish: {
|
onFinish: {
|
||||||
btn_download.disabled = false
|
btn_download.disabled = false
|
||||||
btn_download.text = "下载文件"
|
btn_download.text = "下载文件"
|
||||||
|
text_file_size.text = ""
|
||||||
}
|
}
|
||||||
onDownloadProgress:
|
onDownloadProgress:
|
||||||
(recv,total)=>{
|
(recv,total)=>{
|
||||||
|
var locale = Qt.locale()
|
||||||
var precent = (recv/total * 100).toFixed(0) + "%"
|
var precent = (recv/total * 100).toFixed(0) + "%"
|
||||||
console.debug(precent)
|
console.debug(precent)
|
||||||
btn_download.text = "下载中..."+precent
|
btn_download.text = "下载中..."+precent
|
||||||
|
text_file_size.text = "%1/%2".arg(locale.formattedDataSize(recv)).arg(locale.formattedDataSize(total))
|
||||||
}
|
}
|
||||||
onError:
|
onError:
|
||||||
(status,errorString)=>{
|
(status,errorString)=>{
|
||||||
@ -101,13 +104,20 @@ FluScrollablePage{
|
|||||||
http_post.post({k:"jitpack"})
|
http_post.post({k:"jitpack"})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluButton{
|
RowLayout{
|
||||||
id:btn_download
|
FluButton{
|
||||||
text:disabled ? "下载中..." : "下载文件"
|
id:btn_download
|
||||||
onClicked: {
|
text:disabled ? "下载中..." : "下载文件"
|
||||||
file_dialog.open()
|
onClicked: {
|
||||||
|
file_dialog.open()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluText{
|
||||||
|
id:text_file_size
|
||||||
|
Layout.alignment: Qt.AlignVCenter
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -125,6 +135,7 @@ FluScrollablePage{
|
|||||||
id:window_result
|
id:window_result
|
||||||
width: 600
|
width: 600
|
||||||
height: 400
|
height: 400
|
||||||
|
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||||
Item{
|
Item{
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
Flickable{
|
Flickable{
|
||||||
|
@ -12,7 +12,7 @@ FluScrollablePage{
|
|||||||
FluArea{
|
FluArea{
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
height: 110
|
height: 130
|
||||||
paddings: 10
|
paddings: 10
|
||||||
|
|
||||||
ColumnLayout{
|
ColumnLayout{
|
||||||
@ -45,7 +45,7 @@ FluProgressRing{
|
|||||||
FluArea{
|
FluArea{
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
height: 230
|
height: 286
|
||||||
paddings: 10
|
paddings: 10
|
||||||
|
|
||||||
ColumnLayout{
|
ColumnLayout{
|
||||||
@ -59,21 +59,24 @@ FluProgressRing{
|
|||||||
}
|
}
|
||||||
FluProgressBar{
|
FluProgressBar{
|
||||||
indeterminate: false
|
indeterminate: false
|
||||||
progress: slider.value/100
|
value:slider.value/100
|
||||||
}
|
Layout.topMargin: 10
|
||||||
FluProgressRing{
|
|
||||||
indeterminate: false
|
|
||||||
progress: slider.value/100
|
|
||||||
}
|
}
|
||||||
FluProgressBar{
|
FluProgressBar{
|
||||||
indeterminate: false
|
indeterminate: false
|
||||||
|
value:slider.value/100
|
||||||
progressVisible: true
|
progressVisible: true
|
||||||
progress: slider.value/100
|
Layout.topMargin: 10
|
||||||
}
|
}
|
||||||
FluProgressRing{
|
FluProgressRing{
|
||||||
indeterminate: false
|
indeterminate: false
|
||||||
|
value: slider.value/100
|
||||||
|
Layout.topMargin: 10
|
||||||
|
}
|
||||||
|
FluProgressRing{
|
||||||
progressVisible: true
|
progressVisible: true
|
||||||
progress: slider.value/100
|
indeterminate: false
|
||||||
|
value: slider.value/100
|
||||||
}
|
}
|
||||||
FluSlider{
|
FluSlider{
|
||||||
id:slider
|
id:slider
|
||||||
|
@ -164,7 +164,7 @@ CustomWindow {
|
|||||||
height: parent.height
|
height: parent.height
|
||||||
z:999
|
z:999
|
||||||
//Stack模式,每次切换都会将页面压入栈中,随着栈的页面增多,消耗的内存也越多,内存消耗多就会卡顿,这时候就需要按返回将页面pop掉,释放内存。该模式可以配合FluPage中的launchMode属性,设置页面的启动模式
|
//Stack模式,每次切换都会将页面压入栈中,随着栈的页面增多,消耗的内存也越多,内存消耗多就会卡顿,这时候就需要按返回将页面pop掉,释放内存。该模式可以配合FluPage中的launchMode属性,设置页面的启动模式
|
||||||
// pageMode: FluNavigationViewType.Stack
|
pageMode: FluNavigationViewType.Stack
|
||||||
//NoStack模式,每次切换都会销毁之前的页面然后创建一个新的页面,只需消耗少量内存(推荐)
|
//NoStack模式,每次切换都会销毁之前的页面然后创建一个新的页面,只需消耗少量内存(推荐)
|
||||||
// pageMode: FluNavigationViewType.NoStack
|
// pageMode: FluNavigationViewType.NoStack
|
||||||
items: ItemsOriginal
|
items: ItemsOriginal
|
||||||
|
@ -2,56 +2,48 @@ import QtQuick
|
|||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
Item{
|
ProgressBar{
|
||||||
|
property real strokeWidth: 6
|
||||||
property real progress: 0.5
|
|
||||||
property bool indeterminate: true
|
|
||||||
property bool progressVisible: false
|
property bool progressVisible: false
|
||||||
id: control
|
property color color: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||||
width: 150
|
property color backgroundColor : FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
|
||||||
height: 5
|
id:control
|
||||||
|
indeterminate : true
|
||||||
FluRectangle {
|
QtObject{
|
||||||
shadow: false
|
id:d
|
||||||
radius: [3,3,3,3]
|
property real _radius: strokeWidth/2
|
||||||
anchors.fill: parent
|
}
|
||||||
color: FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
|
background: Rectangle {
|
||||||
Component.onCompleted: {
|
implicitWidth: 150
|
||||||
if(indeterminate){
|
implicitHeight: control.strokeWidth
|
||||||
bar.x = -control.width*0.5
|
color: control.backgroundColor
|
||||||
behavior.enabled = true
|
radius: d._radius
|
||||||
bar.x = control.width
|
}
|
||||||
}else{
|
contentItem: FluItem {
|
||||||
bar.x = 0
|
clip: true
|
||||||
}
|
radius: [d._radius,d._radius,d._radius,d._radius]
|
||||||
}
|
Rectangle {
|
||||||
Rectangle{
|
id:rect_progress
|
||||||
id:bar
|
width: {
|
||||||
radius: 3
|
if(control.indeterminate){
|
||||||
width: control.width*progress
|
return 0.5 * parent.width
|
||||||
height: control.height
|
|
||||||
color:FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
|
||||||
Behavior on x{
|
|
||||||
id:behavior
|
|
||||||
enabled: false
|
|
||||||
NumberAnimation{
|
|
||||||
duration: 1000
|
|
||||||
onRunningChanged: {
|
|
||||||
if(!running){
|
|
||||||
behavior.enabled = false
|
|
||||||
bar.x = -control.width*0.5
|
|
||||||
behavior.enabled = true
|
|
||||||
bar.x = control.width
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
return control.visualPosition * parent.width
|
||||||
|
}
|
||||||
|
height: parent.height
|
||||||
|
radius: d._radius
|
||||||
|
color: control.color
|
||||||
|
PropertyAnimation on x {
|
||||||
|
running: control.indeterminate && control.visible
|
||||||
|
from: -rect_progress.width
|
||||||
|
to:control.width+rect_progress.width
|
||||||
|
loops: Animation.Infinite
|
||||||
|
duration: 888
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluText{
|
FluText{
|
||||||
text:(control.progress * 100).toFixed(0) + "%"
|
text:(control.visualPosition * 100).toFixed(0) + "%"
|
||||||
font.pixelSize: 10
|
|
||||||
visible: {
|
visible: {
|
||||||
if(control.indeterminate){
|
if(control.indeterminate){
|
||||||
return false
|
return false
|
||||||
|
@ -1,32 +1,31 @@
|
|||||||
import QtQuick
|
import QtQuick
|
||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
|
import QtQuick.Shapes
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
Rectangle {
|
ProgressBar{
|
||||||
property real linWidth : 5
|
property real strokeWidth: 6
|
||||||
property real progress: 0.25
|
|
||||||
property bool indeterminate: true
|
|
||||||
property color primaryColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
|
||||||
property bool progressVisible: false
|
property bool progressVisible: false
|
||||||
id: control
|
property color color: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||||
width: 44
|
property color backgroundColor : FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
|
||||||
height: 44
|
id:control
|
||||||
radius: width/2
|
indeterminate : true
|
||||||
border.width: linWidth
|
clip: true
|
||||||
color: "#00000000"
|
background: Rectangle {
|
||||||
border.color: FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
|
implicitWidth: 56
|
||||||
onProgressChanged: {
|
implicitHeight: 56
|
||||||
canvas.requestPaint()
|
radius: control.width/2
|
||||||
}
|
color:"transparent"
|
||||||
Component.onCompleted: {
|
border.color: control.backgroundColor
|
||||||
if(indeterminate){
|
border.width: control.strokeWidth
|
||||||
behavior.enabled = true
|
|
||||||
control.rotation = 360
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
QtObject{
|
QtObject{
|
||||||
id:d
|
id:d
|
||||||
property real _radius: control.radius-control.linWidth/2
|
property real _radius: control.width/2-control.strokeWidth/2
|
||||||
|
property real _progress: control.indeterminate ? 0.3 : control.visualPosition
|
||||||
|
on_ProgressChanged: {
|
||||||
|
canvas.requestPaint()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Connections{
|
Connections{
|
||||||
target: FluTheme
|
target: FluTheme
|
||||||
@ -34,43 +33,35 @@ Rectangle {
|
|||||||
canvas.requestPaint()
|
canvas.requestPaint()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Behavior on rotation{
|
contentItem: Item {
|
||||||
id:behavior
|
RotationAnimation on rotation {
|
||||||
enabled: false
|
running: control.indeterminate && control.visible
|
||||||
NumberAnimation{
|
from: 0
|
||||||
duration: 999
|
to:360
|
||||||
onRunningChanged: {
|
loops: Animation.Infinite
|
||||||
if(!running){
|
duration: 888
|
||||||
behavior.enabled = false
|
}
|
||||||
control.rotation = 0
|
Canvas {
|
||||||
behavior.enabled = true
|
id:canvas
|
||||||
control.rotation = 360
|
anchors.fill: parent
|
||||||
}
|
antialiasing: true
|
||||||
|
renderTarget: Canvas.Image
|
||||||
|
onPaint: {
|
||||||
|
var ctx = canvas.getContext("2d")
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||||
|
ctx.save()
|
||||||
|
ctx.lineWidth = control.strokeWidth
|
||||||
|
ctx.strokeStyle = control.color
|
||||||
|
ctx.beginPath()
|
||||||
|
ctx.arc(width/2, height/2, d._radius ,-0.5 * Math.PI,-0.5 * Math.PI + d._progress * 2 * Math.PI)
|
||||||
|
ctx.stroke()
|
||||||
|
ctx.closePath()
|
||||||
|
ctx.restore()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Canvas {
|
|
||||||
id:canvas
|
|
||||||
anchors.fill: parent
|
|
||||||
antialiasing: true
|
|
||||||
renderTarget: Canvas.Image
|
|
||||||
onPaint: {
|
|
||||||
var ctx = canvas.getContext("2d")
|
|
||||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
|
||||||
ctx.save()
|
|
||||||
ctx.lineWidth = linWidth
|
|
||||||
ctx.strokeStyle = primaryColor
|
|
||||||
ctx.fillStyle = primaryColor
|
|
||||||
ctx.beginPath()
|
|
||||||
ctx.arc(width/2, height/2, d._radius ,-0.5 * Math.PI,-0.5 * Math.PI + progress * 2 * Math.PI)
|
|
||||||
ctx.stroke()
|
|
||||||
ctx.closePath()
|
|
||||||
ctx.restore()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
FluText{
|
FluText{
|
||||||
text:(control.progress * 100).toFixed(0) + "%"
|
text:(control.visualPosition * 100).toFixed(0) + "%"
|
||||||
font.pixelSize: 10
|
|
||||||
visible: {
|
visible: {
|
||||||
if(control.indeterminate){
|
if(control.indeterminate){
|
||||||
return false
|
return false
|
||||||
@ -80,3 +71,4 @@ Rectangle {
|
|||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user