This commit is contained in:
zhuzihcu 2023-03-30 11:43:35 +08:00
parent 036450f0a3
commit 37ae17d92d
11 changed files with 235 additions and 69 deletions

View File

@ -17,7 +17,7 @@ FluScrollablePage{
Layout.leftMargin: 10 Layout.leftMargin: 10
} }
FluSlider{ FluSlider{
orientation:FluSlider.Vertical vertical:true
Layout.topMargin: 20 Layout.topMargin: 20
Layout.leftMargin: 10 Layout.leftMargin: 10
Layout.bottomMargin: 20 Layout.bottomMargin: 20

View File

@ -11,6 +11,8 @@ FluScrollablePage{
rightPadding:10 rightPadding:10
bottomPadding:20 bottomPadding:20
property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
Component{ Component{
id:com_page id:com_page
Rectangle{ Rectangle{
@ -19,26 +21,93 @@ FluScrollablePage{
} }
} }
Component.onCompleted: { function newTab(){
var colors = [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green] tab_view.appendTab("qrc:/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
for(var i =0;i<colors.length;i++){
tab_view.appendTab("","Document "+i,com_page,colors[i].dark)
} }
Component.onCompleted: {
newTab()
newTab()
newTab()
} }
FluArea{ FluArea{
width: parent.width width: parent.width
Layout.topMargin: 20 Layout.topMargin: 20
height: 50
paddings: 10
RowLayout{
spacing: 14
FluDropDownButton{
id:btn_tab_width_behavior
Layout.preferredWidth: 140
text:"Equal"
items:[
FluMenuItem{
text:"Equal"
onClicked: {
btn_tab_width_behavior.text = text
tab_view.tabWidthBehavior = FluTabView.Equal
}
},
FluMenuItem{
text:"SizeToContent"
onClicked: {
btn_tab_width_behavior.text = text
tab_view.tabWidthBehavior = FluTabView.SizeToContent
}
},
FluMenuItem{
text:"Compact"
onClicked: {
btn_tab_width_behavior.text = text
tab_view.tabWidthBehavior = FluTabView.Compact
}
}
]
}
FluDropDownButton{
id:btn_close_button_visibility
text:"Always"
Layout.preferredWidth: 120
items:[
FluMenuItem{
text:"Nerver"
onClicked: {
btn_close_button_visibility.text = text
tab_view.closeButtonVisibility = FluTabView.Nerver
}
},
FluMenuItem{
text:"Always"
onClicked: {
btn_close_button_visibility.text = text
tab_view.closeButtonVisibility = FluTabView.Always
}
},
FluMenuItem{
text:"OnHover"
onClicked: {
btn_close_button_visibility.text = text
tab_view.closeButtonVisibility = FluTabView.OnHover
}
}
]
}
}
}
FluArea{
width: parent.width
Layout.topMargin: 5
height: 400 height: 400
paddings: 10 paddings: 10
FluTabView{ FluTabView{
id:tab_view id:tab_view
onNewPressed:{
newTab()
}
}
} }
}
} }

View File

@ -50,7 +50,7 @@ Rectangle {
FluIcon{ FluIcon{
iconSource: FluentIcons.Calendar iconSource: FluentIcons.Calendar
iconSize: 14 iconSize: 14
color: text_date.color iconColor: text_date.color
anchors{ anchors{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
right: parent.right right: parent.right

View File

@ -83,7 +83,7 @@ Button {
iconSource: FluentIcons.AcceptMedium iconSource: FluentIcons.AcceptMedium
iconSize: 15 iconSize: 15
visible: selected visible: selected
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible { Behavior on visible {
NumberAnimation{ NumberAnimation{
duration: 150 duration: 150

View File

@ -44,7 +44,7 @@ Button {
rightMargin: 10 rightMargin: 10
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
color:title.color iconColor:title.color
} }
} }

View File

@ -178,7 +178,7 @@ FluObject {
return FluentIcons.FA_info_circle return FluentIcons.FA_info_circle
} }
iconSize:20 iconSize:20
color: { iconColor: {
if(FluTheme.dark){ if(FluTheme.dark){
switch(_super.type){ switch(_super.type){
case mcontrol.const_success: return Qt.rgba(108/255,203/255,95/255,1); case mcontrol.const_success: return Qt.rgba(108/255,203/255,95/255,1);

View File

@ -14,6 +14,18 @@ Item{
opacity: 0 opacity: 0
} }
onWidthChanged: {
canvas.requestPaint()
}
onHeightChanged: {
canvas.requestPaint()
}
onRadiusChanged: {
canvas.requestPaint()
}
Canvas { Canvas {
id: canvas id: canvas
anchors.fill: parent anchors.fill: parent

View File

@ -83,7 +83,7 @@ Rectangle {
size:parent.width-20 size:parent.width-20
y:20 y:20
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
enableTip:false tipEnabled:false
onPressed: { onPressed: {
mediaplayer.autoSeek = false mediaplayer.autoSeek = false
mediaplayer.pause() mediaplayer.pause()

View File

@ -4,17 +4,12 @@ import QtGraphicalEffects 1.15
Item{ Item{
enum Orientation {
Horizontal,
Vertical
}
property int size: 180 property int size: 180
property int dotSize: 24 property int dotSize: 24
property int value: 50 property int value: 50
property int maxValue: 100 property int maxValue: 100
property int orientation: FluSlider.Horizontal property bool vertical: false
property bool isHorizontal: orientation === FluSlider.Horizontal property bool tipEnabled : true
property bool enableTip : true
property var onLineClickFunc property var onLineClickFunc
signal pressed signal pressed
signal released signal released
@ -22,7 +17,7 @@ Item{
id:root id:root
height: control.height height: control.height
width: control.width width: control.width
rotation: isHorizontal ? 0 : 180 rotation: vertical ? 180 : 0
Component.onCompleted: { Component.onCompleted: {
seek(value) seek(value)
@ -31,16 +26,16 @@ Item{
MouseArea{ MouseArea{
id:mouse_line id:mouse_line
anchors.centerIn: control anchors.centerIn: control
width: isHorizontal ? control.width : 10 width: vertical ? 10 : control.width
height: isHorizontal ? 10 : control.height height: vertical ? control.height : 10
hoverEnabled: true hoverEnabled: true
onClicked: onClicked:
(mouse) => { (mouse) => {
var val; var val;
if(isHorizontal){ if(vertical){
val = mouse.x*maxValue/control.width
}else{
val = mouse.y*maxValue/control.height val = mouse.y*maxValue/control.height
}else{
val = mouse.x*maxValue/control.width
} }
if(onLineClickFunc){ if(onLineClickFunc){
onLineClickFunc(val) onLineClickFunc(val)
@ -52,20 +47,18 @@ Item{
Rectangle { Rectangle {
id: control id: control
width: isHorizontal ? size : 4 width: vertical ? 4 :size
height: isHorizontal ? 4 : size height: vertical ? size : 4
radius: 2 radius: 2
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1) color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
Rectangle{ Rectangle{
id:rect id:rect
radius: 2.5 radius: 2.5
width: isHorizontal ? control.width*(value/maxValue) : 5 width: vertical ? 5 : control.width*(value/maxValue)
height: isHorizontal ? 5 : control.height*(value/maxValue) height: vertical ? control.height*(value/maxValue) : 5
color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
} }
} }
Rectangle{ Rectangle{
@ -76,8 +69,8 @@ Item{
radius: dotSize/2 radius: dotSize/2
} }
radius: dotSize/2 radius: dotSize/2
anchors.verticalCenter: isHorizontal ? parent.verticalCenter : undefined anchors.verticalCenter: vertical ? undefined : parent.verticalCenter
anchors.horizontalCenter: isHorizontal ? undefined :parent.horizontalCenter anchors.horizontalCenter: vertical ? parent.horizontalCenter : undefined
color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1) color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
Rectangle{ Rectangle{
width: dotSize/2 width: dotSize/2
@ -85,7 +78,12 @@ Item{
radius: dotSize/4 radius: dotSize/4
color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
anchors.centerIn: parent anchors.centerIn: parent
scale: control_mouse.containsMouse || mouse_line.containsMouse ? 1.3 : 1 scale: {
if(control_mouse.pressed){
return 0.9
}
return control_mouse.containsMouse || mouse_line.containsMouse ? 1.3 : 1
}
Behavior on scale { Behavior on scale {
NumberAnimation{ NumberAnimation{
duration: 150 duration: 150
@ -98,14 +96,14 @@ Item{
hoverEnabled: true hoverEnabled: true
drag { drag {
target: dot target: dot
axis: isHorizontal ? Drag.XAxis : Drag.YAxis axis: vertical ? Drag.YAxis : Drag.XAxis
minimumX: isHorizontal ? -dotSize/2 : 0 minimumX: vertical ? 0 : -dotSize/2
maximumX: isHorizontal ? (control.width - dotSize/2) : 0 maximumX: vertical ? 0 : (control.width - dotSize/2)
minimumY: isHorizontal ? 0 : -dotSize/2 minimumY: vertical ? -dotSize/2 : 0
maximumY: isHorizontal ? 0 : (control.height - dotSize/2) maximumY: vertical ? (control.height - dotSize/2) : 0
} }
onPressed: { onPressed: {
if(enableTip){ if(tipEnabled){
tool_tip.visible = true tool_tip.visible = true
} }
root.pressed() root.pressed()
@ -120,23 +118,22 @@ Item{
FluTooltip{ FluTooltip{
id:tool_tip id:tool_tip
text:String(root.value) text:String(root.value)
y: isHorizontal ? -40 : 32 y: vertical ? 32 : -40
} }
} }
function seek(val){ function seek(val){
if(isHorizontal){ if(vertical){
dot.x =val/maxValue*control.width - dotSize/2
root.value = Qt.binding(function(){
return (dot.x+dotSize/2)/control.width*maxValue
})
}else{
dot.y =val/maxValue*control.height - dotSize/2 dot.y =val/maxValue*control.height - dotSize/2
root.value = Qt.binding(function(){ root.value = Qt.binding(function(){
return (dot.y+dotSize/2)/control.height*maxValue return (dot.y+dotSize/2)/control.height*maxValue
}) })
}else{
dot.x =val/maxValue*control.width - dotSize/2
root.value = Qt.binding(function(){
return (dot.x+dotSize/2)/control.width*maxValue
})
}
} }
} }
}

View File

@ -1,5 +1,6 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Controls 2.15 import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import FluentUI 1.0 import FluentUI 1.0
Item { Item {
@ -14,6 +15,11 @@ Item {
implicitHeight: height implicitHeight: height
implicitWidth: width implicitWidth: width
MouseArea{
anchors.fill: parent
preventStealing: true
}
enum TabWidthBehavior { enum TabWidthBehavior {
Equal, Equal,
SizeToContent, SizeToContent,
@ -29,23 +35,42 @@ Item {
property int tabWidthBehavior : FluTabView.Equal property int tabWidthBehavior : FluTabView.Equal
property int closeButtonVisibility : FluTabView.Always property int closeButtonVisibility : FluTabView.Always
property int itemWidth: 146 property int itemWidth: 146
signal newPressed
QtObject { QtObject {
id: d id: d
property int dragIndex: -1 property int dragIndex: -1
property bool dragBehavior: false property bool dragBehavior: false
property bool itemPress: false property bool itemPress: false
property int maxEqualWidth: 240
} }
ListModel{ ListModel{
id:tab_model id:tab_model
} }
FluIconButton{
id:btn_new
width: 34
height: 34
x:Math.min(tab_nav.contentWidth,tab_nav.width)
anchors.top: parent.top
iconSource: FluentIcons.Add
onClicked: {
newPressed()
}
}
ListView{ ListView{
id:tab_nav id:tab_nav
height: 34 height: 34
orientation: ListView.Horizontal orientation: ListView.Horizontal
width: parent.width anchors{
top: parent.top
left: parent.left
right: parent.right
rightMargin: 34
}
interactive: false interactive: false
model: tab_model model: tab_model
move: Transition { move: Transition {
@ -56,20 +81,20 @@ Item {
NumberAnimation { properties: "x"; duration: 300; easing.type: Easing.OutCubic} NumberAnimation { properties: "x"; duration: 300; easing.type: Easing.OutCubic}
NumberAnimation { properties: "y"; duration: 100; easing.type: Easing.OutCubic } NumberAnimation { properties: "y"; duration: 100; easing.type: Easing.OutCubic }
} }
clip: false clip: true
ScrollBar.horizontal: ScrollBar{ ScrollBar.horizontal: ScrollBar{
id: scroll_nav id: scroll_nav
policy: ScrollBar.AlwaysOff policy: ScrollBar.AlwaysOff
} }
delegate: Item{ delegate: Item{
width: itemWidth width: item_layout.width
height: item_container.height height: item_container.height
z: item_mouse_drag.pressed ? 1000 : 1 z: item_mouse_drag.pressed ? 1000 : 1
Item{ Item{
id:item_layout id:item_layout
width: itemWidth width: item_container.width
height: item_container.height height: item_container.height
FluItem{ FluItem{
@ -78,8 +103,19 @@ Item {
property real timestamp: new Date().getTime() property real timestamp: new Date().getTime()
height: tab_nav.height height: tab_nav.height
width: itemWidth width: {
radius: [5,5,0,0] if(tabWidthBehavior === FluTabView.Equal){
return Math.max(Math.min(d.maxEqualWidth,tab_nav.width/tab_nav.count),41 + item_btn_close.width)
}
if(tabWidthBehavior === FluTabView.SizeToContent){
return itemWidth
}
if(tabWidthBehavior === FluTabView.Compact){
return item_mouse_hove.containsMouse || item_btn_close.hovered || tab_nav.currentIndex === index ? itemWidth : 41 + item_btn_close.width
}
return Math.max(Math.min(d.maxEqualWidth,tab_nav.width/tab_nav.count),41 + item_btn_close.width)
}
radius: [6,6,0,0]
Behavior on x { enabled: d.dragBehavior; NumberAnimation { duration: 200 } } Behavior on x { enabled: d.dragBehavior; NumberAnimation { duration: 200 } }
Behavior on y { enabled: d.dragBehavior; NumberAnimation { duration: 200 } } Behavior on y { enabled: d.dragBehavior; NumberAnimation { duration: 200 } }
@ -198,19 +234,51 @@ Item {
} }
} }
RowLayout{
spacing: 0
height: parent.height
Image{
source:model.icon
Layout.leftMargin: 10
Layout.preferredWidth: 14
Layout.preferredHeight: 14
Layout.alignment: Qt.AlignVCenter
}
FluText{ FluText{
id:item_text id:item_text
anchors.centerIn: parent
text: model.text text: model.text
rightPadding: 24 Layout.leftMargin: 10
visible: {
if(tabWidthBehavior === FluTabView.Equal){
return true
}
if(tabWidthBehavior === FluTabView.SizeToContent){
return true
}
if(tabWidthBehavior === FluTabView.Compact){
return item_mouse_hove.containsMouse || item_btn_close.hovered || tab_nav.currentIndex === index
}
return false
}
Layout.preferredWidth: visible?item_container.width - 41 - item_btn_close.width:0
elide: Text.ElideRight
Layout.alignment: Qt.AlignVCenter
}
} }
FluIconButton{ FluIconButton{
id:item_btn_close id:item_btn_close
iconSource: FluentIcons.ChromeClose iconSource: FluentIcons.ChromeClose
iconSize: 10 iconSize: 10
width: 24 width: visible ? 24 : 0
height: 24 height: 24
visible: {
if(closeButtonVisibility === FluTabView.Nerver)
return false
if(closeButtonVisibility === FluTabView.OnHover)
return item_mouse_hove.containsMouse || item_btn_close.hovered
return true
}
anchors{ anchors{
right: parent.right right: parent.right
rightMargin: 5 rightMargin: 5
@ -220,6 +288,15 @@ Item {
tab_model.remove(index) tab_model.remove(index)
} }
} }
FluDivider{
width: 1
height: 16
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
}
} }
} }
} }
@ -260,4 +337,8 @@ Item {
tab_model.append(list) tab_model.append(list)
} }
function count(){
return tab_nav.count
}
} }

View File

@ -31,7 +31,6 @@ Button {
height: control.height height: control.height
radius: height / 2 radius: height / 2
smooth: true smooth: true
antialiasing: true
FluFocusRectangle{ FluFocusRectangle{
visible: control.visualFocus visible: control.visualFocus
radius: 20 radius: 20
@ -58,8 +57,13 @@ Button {
border.width: 1 border.width: 1
border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666" border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
Rectangle { Rectangle {
x: selected ? control_backgound.width - width - 4 : 4 width: pressed ? control.height - 4 : control.height - 8
width: pressed ? control.height - 6 : control.height - 8 anchors{
left: selected ? undefined : parent.left
leftMargin: selected ? control_backgound.width - width - 4 : 4
right: selected ? parent.right : undefined
rightMargin: selected ? 4 : control_backgound.width - width - 4
}
height: control.height - 8 height: control.height - 8
radius: width / 2 radius: width / 2
antialiasing: true antialiasing: true
@ -67,7 +71,10 @@ Button {
smooth: true smooth: true
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: selected ? "#FFFFFF" : "#666666" color: selected ? "#FFFFFF" : "#666666"
Behavior on x { Behavior on anchors.leftMargin {
NumberAnimation { duration: 150 }
}
Behavior on anchors.rightMargin {
NumberAnimation { duration: 150 } NumberAnimation { duration: 150 }
} }
Behavior on width { Behavior on width {