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
}
FluSlider{
orientation:FluSlider.Vertical
vertical:true
Layout.topMargin: 20
Layout.leftMargin: 10
Layout.bottomMargin: 20

View File

@ -11,6 +11,8 @@ FluScrollablePage{
rightPadding:10
bottomPadding:20
property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
Component{
id:com_page
Rectangle{
@ -19,26 +21,93 @@ FluScrollablePage{
}
}
Component.onCompleted: {
var colors = [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
for(var i =0;i<colors.length;i++){
tab_view.appendTab("","Document "+i,com_page,colors[i].dark)
function newTab(){
tab_view.appendTab("qrc:/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
}
Component.onCompleted: {
newTab()
newTab()
newTab()
}
FluArea{
width: parent.width
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
paddings: 10
FluTabView{
id:tab_view
onNewPressed:{
newTab()
}
}
}
}
}

View File

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

View File

@ -83,7 +83,7 @@ Button {
iconSource: FluentIcons.AcceptMedium
iconSize: 15
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 {
NumberAnimation{
duration: 150

View File

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

View File

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

View File

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

View File

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

View File

@ -4,17 +4,12 @@ import QtGraphicalEffects 1.15
Item{
enum Orientation {
Horizontal,
Vertical
}
property int size: 180
property int dotSize: 24
property int value: 50
property int maxValue: 100
property int orientation: FluSlider.Horizontal
property bool isHorizontal: orientation === FluSlider.Horizontal
property bool enableTip : true
property bool vertical: false
property bool tipEnabled : true
property var onLineClickFunc
signal pressed
signal released
@ -22,7 +17,7 @@ Item{
id:root
height: control.height
width: control.width
rotation: isHorizontal ? 0 : 180
rotation: vertical ? 180 : 0
Component.onCompleted: {
seek(value)
@ -31,16 +26,16 @@ Item{
MouseArea{
id:mouse_line
anchors.centerIn: control
width: isHorizontal ? control.width : 10
height: isHorizontal ? 10 : control.height
width: vertical ? 10 : control.width
height: vertical ? control.height : 10
hoverEnabled: true
onClicked:
(mouse) => {
var val;
if(isHorizontal){
val = mouse.x*maxValue/control.width
}else{
if(vertical){
val = mouse.y*maxValue/control.height
}else{
val = mouse.x*maxValue/control.width
}
if(onLineClickFunc){
onLineClickFunc(val)
@ -52,20 +47,18 @@ Item{
Rectangle {
id: control
width: isHorizontal ? size : 4
height: isHorizontal ? 4 : size
width: vertical ? 4 :size
height: vertical ? size : 4
radius: 2
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)
Rectangle{
id:rect
radius: 2.5
width: isHorizontal ? control.width*(value/maxValue) : 5
height: isHorizontal ? 5 : control.height*(value/maxValue)
width: vertical ? 5 : control.width*(value/maxValue)
height: vertical ? control.height*(value/maxValue) : 5
color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
}
}
Rectangle{
@ -76,8 +69,8 @@ Item{
radius: dotSize/2
}
radius: dotSize/2
anchors.verticalCenter: isHorizontal ? parent.verticalCenter : undefined
anchors.horizontalCenter: isHorizontal ? undefined :parent.horizontalCenter
anchors.verticalCenter: vertical ? undefined : parent.verticalCenter
anchors.horizontalCenter: vertical ? parent.horizontalCenter : undefined
color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
Rectangle{
width: dotSize/2
@ -85,7 +78,12 @@ Item{
radius: dotSize/4
color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
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 {
NumberAnimation{
duration: 150
@ -98,14 +96,14 @@ Item{
hoverEnabled: true
drag {
target: dot
axis: isHorizontal ? Drag.XAxis : Drag.YAxis
minimumX: isHorizontal ? -dotSize/2 : 0
maximumX: isHorizontal ? (control.width - dotSize/2) : 0
minimumY: isHorizontal ? 0 : -dotSize/2
maximumY: isHorizontal ? 0 : (control.height - dotSize/2)
axis: vertical ? Drag.YAxis : Drag.XAxis
minimumX: vertical ? 0 : -dotSize/2
maximumX: vertical ? 0 : (control.width - dotSize/2)
minimumY: vertical ? -dotSize/2 : 0
maximumY: vertical ? (control.height - dotSize/2) : 0
}
onPressed: {
if(enableTip){
if(tipEnabled){
tool_tip.visible = true
}
root.pressed()
@ -120,23 +118,22 @@ Item{
FluTooltip{
id:tool_tip
text:String(root.value)
y: isHorizontal ? -40 : 32
y: vertical ? 32 : -40
}
}
function seek(val){
if(isHorizontal){
dot.x =val/maxValue*control.width - dotSize/2
root.value = Qt.binding(function(){
return (dot.x+dotSize/2)/control.width*maxValue
})
}else{
if(vertical){
dot.y =val/maxValue*control.height - dotSize/2
root.value = Qt.binding(function(){
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.Controls 2.15
import QtQuick.Layouts 1.15
import FluentUI 1.0
Item {
@ -14,6 +15,11 @@ Item {
implicitHeight: height
implicitWidth: width
MouseArea{
anchors.fill: parent
preventStealing: true
}
enum TabWidthBehavior {
Equal,
SizeToContent,
@ -29,23 +35,42 @@ Item {
property int tabWidthBehavior : FluTabView.Equal
property int closeButtonVisibility : FluTabView.Always
property int itemWidth: 146
signal newPressed
QtObject {
id: d
property int dragIndex: -1
property bool dragBehavior: false
property bool itemPress: false
property int maxEqualWidth: 240
}
ListModel{
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{
id:tab_nav
height: 34
orientation: ListView.Horizontal
width: parent.width
anchors{
top: parent.top
left: parent.left
right: parent.right
rightMargin: 34
}
interactive: false
model: tab_model
move: Transition {
@ -56,20 +81,20 @@ Item {
NumberAnimation { properties: "x"; duration: 300; easing.type: Easing.OutCubic}
NumberAnimation { properties: "y"; duration: 100; easing.type: Easing.OutCubic }
}
clip: false
clip: true
ScrollBar.horizontal: ScrollBar{
id: scroll_nav
policy: ScrollBar.AlwaysOff
}
delegate: Item{
width: itemWidth
width: item_layout.width
height: item_container.height
z: item_mouse_drag.pressed ? 1000 : 1
Item{
id:item_layout
width: itemWidth
width: item_container.width
height: item_container.height
FluItem{
@ -78,8 +103,19 @@ Item {
property real timestamp: new Date().getTime()
height: tab_nav.height
width: itemWidth
radius: [5,5,0,0]
width: {
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 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{
id:item_text
anchors.centerIn: parent
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{
id:item_btn_close
iconSource: FluentIcons.ChromeClose
iconSize: 10
width: 24
width: visible ? 24 : 0
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{
right: parent.right
rightMargin: 5
@ -220,6 +288,15 @@ Item {
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)
}
function count(){
return tab_nav.count
}
}

View File

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