mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2025-07-07 03:25:24 +08:00
update
This commit is contained in:
朱子楚\zhuzi
@ -2,7 +2,7 @@ import QtQuick 2.15
|
||||
import QtGraphicalEffects 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
FluItem {
|
||||
Item {
|
||||
id: control
|
||||
property color tintColor: Qt.rgba(1,1,1,1)
|
||||
property real tintOpacity: 0.65
|
||||
|
||||
@ -2,7 +2,7 @@ import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
FluItem {
|
||||
Item {
|
||||
property bool autoPlay: true
|
||||
property int loopTime: 2000
|
||||
property var model
|
||||
|
||||
17
src/Qt5/imports/FluentUI/Controls/FluClip.qml
Normal file
17
src/Qt5/imports/FluentUI/Controls/FluClip.qml
Normal file
@ -0,0 +1,17 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtGraphicalEffects 1.0
|
||||
import FluentUI 1.0
|
||||
|
||||
FluRectangle {
|
||||
id:control
|
||||
color: "#00000000"
|
||||
layer.enabled: !FluTools.isSoftware()
|
||||
layer.effect: OpacityMask{
|
||||
maskSource: FluRectangle{
|
||||
radius: control.radius
|
||||
width: control.width
|
||||
height: control.height
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -62,7 +62,7 @@ ComboBox {
|
||||
bottomInset:1
|
||||
rightInset:1
|
||||
background: FluTextBoxBackground{
|
||||
border.width: 0
|
||||
borderWidth: 0
|
||||
inputItem: contentItem
|
||||
}
|
||||
Component.onCompleted: {
|
||||
|
||||
@ -5,14 +5,14 @@ import FluentUI 1.0
|
||||
Rectangle {
|
||||
property real spacing
|
||||
property alias separatorHeight:separator.height
|
||||
|
||||
id:root
|
||||
id:control
|
||||
color:Qt.rgba(0,0,0,0)
|
||||
height: spacing*2+separator.height
|
||||
Rectangle{
|
||||
id:separator
|
||||
color: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(210/255,210/255,210/255,1)
|
||||
width:parent.width
|
||||
anchors.centerIn: parent
|
||||
clip: true
|
||||
color: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(210/255,210/255,210/255,1)
|
||||
width:parent.width
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
}
|
||||
|
||||
@ -70,14 +70,15 @@ Item {
|
||||
left: layout_header.left
|
||||
}
|
||||
width: parent.width
|
||||
clip: true
|
||||
visible: contentHeight+container.y !== 0
|
||||
height: contentHeight+container.y
|
||||
clip: true
|
||||
Rectangle{
|
||||
id:container
|
||||
width: parent.width
|
||||
height: parent.height
|
||||
radius: 4
|
||||
clip: true
|
||||
color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
|
||||
border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
|
||||
y: -contentHeight
|
||||
|
||||
@ -1,57 +0,0 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtGraphicalEffects 1.15
|
||||
|
||||
Item{
|
||||
property var radius:[0,0,0,0]
|
||||
default property alias contentItem: container.data
|
||||
id:control
|
||||
Item{
|
||||
id:container
|
||||
width: control.width
|
||||
height: control.height
|
||||
opacity: 0
|
||||
}
|
||||
onWidthChanged: {
|
||||
canvas.requestPaint()
|
||||
}
|
||||
onHeightChanged: {
|
||||
canvas.requestPaint()
|
||||
}
|
||||
onRadiusChanged: {
|
||||
canvas.requestPaint()
|
||||
}
|
||||
Canvas {
|
||||
id: canvas
|
||||
anchors.fill: parent
|
||||
visible: false
|
||||
onPaint: {
|
||||
var ctx = getContext("2d");
|
||||
var x = 0;
|
||||
var y = 0;
|
||||
var w = control.width;
|
||||
var h = control.height;
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + radius[0], y);
|
||||
ctx.lineTo(x + w - radius[1], y);
|
||||
ctx.arcTo(x + w, y, x + w, y + radius[1], radius[1]);
|
||||
ctx.lineTo(x + w, y + h - radius[2]);
|
||||
ctx.arcTo(x + w, y + h, x + w - radius[2], y + h, radius[2]);
|
||||
ctx.lineTo(x + radius[3], y + h);
|
||||
ctx.arcTo(x, y + h, x, y + h - radius[3], radius[3]);
|
||||
ctx.lineTo(x, y + radius[0]);
|
||||
ctx.arcTo(x, y, x + radius[0], y, radius[0]);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = control.color;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
OpacityMask {
|
||||
anchors.fill: container
|
||||
source: container
|
||||
maskSource: canvas
|
||||
}
|
||||
}
|
||||
@ -112,8 +112,16 @@ Item {
|
||||
id:com_panel_item_separatorr
|
||||
FluDivider{
|
||||
width: layout_list.width
|
||||
spacing: model.spacing
|
||||
spacing: {
|
||||
if(model){
|
||||
return model.spacing
|
||||
}
|
||||
return 1
|
||||
}
|
||||
separatorHeight: {
|
||||
if(!model){
|
||||
return 1
|
||||
}
|
||||
if(model.parent){
|
||||
return model.parent.isExpand ? model.size : 0
|
||||
}
|
||||
@ -200,6 +208,9 @@ Item {
|
||||
verticalCenterOffset: -8
|
||||
}
|
||||
visible: {
|
||||
if(!model){
|
||||
return false
|
||||
}
|
||||
if(!model.isExpand){
|
||||
for(var i=0;i<model.children.length;i++){
|
||||
var item = model.children[i]
|
||||
@ -220,6 +231,12 @@ Item {
|
||||
radius: 1.5
|
||||
color: FluTheme.primaryColor.dark
|
||||
visible: {
|
||||
if(!model){
|
||||
return false
|
||||
}
|
||||
if(!model.children){
|
||||
return false
|
||||
}
|
||||
for(var i=0;i<model.children.length;i++){
|
||||
var item = model.children[i]
|
||||
if(item._idx === nav_list.currentIndex && !model.isExpand){
|
||||
@ -234,7 +251,7 @@ Item {
|
||||
}
|
||||
FluIcon{
|
||||
id:item_icon_expand
|
||||
rotation: model.isExpand?0:180
|
||||
rotation: model&&model.isExpand?0:180
|
||||
iconSource:FluentIcons.ChevronUp
|
||||
iconSize: 15
|
||||
anchors{
|
||||
@ -279,7 +296,7 @@ Item {
|
||||
id:com_icon
|
||||
FluIcon{
|
||||
iconSource: {
|
||||
if(model.icon){
|
||||
if(model&&model.icon){
|
||||
return model.icon
|
||||
}
|
||||
return 0
|
||||
@ -299,7 +316,7 @@ Item {
|
||||
Loader{
|
||||
anchors.centerIn: parent
|
||||
sourceComponent: {
|
||||
if(model.cusIcon){
|
||||
if(model&&model.cusIcon){
|
||||
return model.cusIcon
|
||||
}
|
||||
return com_icon
|
||||
@ -308,7 +325,12 @@ Item {
|
||||
}
|
||||
FluText{
|
||||
id:item_title
|
||||
text:model.title
|
||||
text:{
|
||||
if(model){
|
||||
return model.title
|
||||
}
|
||||
return ""
|
||||
}
|
||||
visible: {
|
||||
if(d.isCompactAndNotPanel){
|
||||
return false
|
||||
@ -341,7 +363,7 @@ Item {
|
||||
if(d.isCompact){
|
||||
return undefined
|
||||
}
|
||||
return model.showEdit ? model.editDelegate : undefined
|
||||
return model&&model.showEdit ? model.editDelegate : undefined
|
||||
}
|
||||
onStatusChanged: {
|
||||
if(status === Loader.Ready){
|
||||
@ -377,13 +399,13 @@ Item {
|
||||
}
|
||||
}
|
||||
height: {
|
||||
if(model.parent){
|
||||
if(model&&model.parent){
|
||||
return model.parent.isExpand ? 38 : 0
|
||||
}
|
||||
return 38
|
||||
}
|
||||
visible: {
|
||||
if(model.parent){
|
||||
if(model&&model.parent){
|
||||
return model.parent.isExpand ? true : false
|
||||
}
|
||||
return true
|
||||
@ -497,7 +519,7 @@ Item {
|
||||
id:com_icon
|
||||
FluIcon{
|
||||
iconSource: {
|
||||
if(model.icon){
|
||||
if(model&&model.icon){
|
||||
return model.icon
|
||||
}
|
||||
return 0
|
||||
@ -517,7 +539,7 @@ Item {
|
||||
Loader{
|
||||
anchors.centerIn: parent
|
||||
sourceComponent: {
|
||||
if(model.cusIcon){
|
||||
if(model&&model.cusIcon){
|
||||
return model.cusIcon
|
||||
}
|
||||
return com_icon
|
||||
@ -526,7 +548,12 @@ Item {
|
||||
}
|
||||
FluText{
|
||||
id:item_title
|
||||
text:model.title
|
||||
text:{
|
||||
if(model){
|
||||
return model.title
|
||||
}
|
||||
return ""
|
||||
}
|
||||
visible: {
|
||||
if(d.isCompactAndNotPanel){
|
||||
return false
|
||||
@ -559,6 +586,9 @@ Item {
|
||||
if(d.isCompact){
|
||||
return undefined
|
||||
}
|
||||
if(!model){
|
||||
return undefined
|
||||
}
|
||||
return model.showEdit ? model.editDelegate : undefined
|
||||
}
|
||||
onStatusChanged: {
|
||||
@ -591,7 +621,7 @@ Item {
|
||||
verticalCenterOffset: isDot ? -8 : 0
|
||||
}
|
||||
sourceComponent: {
|
||||
if(model.infoBadge){
|
||||
if(model&&model.infoBadge){
|
||||
return model.infoBadge
|
||||
}
|
||||
return undefined
|
||||
@ -771,7 +801,9 @@ Item {
|
||||
anchors.fill: loader_content
|
||||
onDropped:
|
||||
(drag)=>{
|
||||
drag.source.modelData.dropped(drag)
|
||||
if(drag.source.modelData){
|
||||
drag.source.modelData.dropped(drag)
|
||||
}
|
||||
}
|
||||
}
|
||||
Loader{
|
||||
@ -938,6 +970,8 @@ Item {
|
||||
property var _idx: index
|
||||
property int type: 0
|
||||
sourceComponent: {
|
||||
if(model === null || !model)
|
||||
return undefined
|
||||
if(modelData instanceof FluPaneItem){
|
||||
return com_panel_item
|
||||
}
|
||||
@ -953,6 +987,7 @@ Item {
|
||||
if(modelData instanceof FluPaneItemEmpty){
|
||||
return com_panel_item_empty
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@ ProgressBar{
|
||||
color: control.backgroundColor
|
||||
radius: d._radius
|
||||
}
|
||||
contentItem: FluItem {
|
||||
contentItem: FluClip {
|
||||
clip: true
|
||||
radius: [d._radius,d._radius,d._radius,d._radius]
|
||||
Rectangle {
|
||||
|
||||
@ -40,7 +40,7 @@ Button {
|
||||
id: control
|
||||
enabled: !disabled
|
||||
horizontalPadding:12
|
||||
background: FluItem{
|
||||
background: FluClip{
|
||||
implicitWidth: 28
|
||||
implicitHeight: 28
|
||||
radius: [4,4,4,4]
|
||||
|
||||
@ -1,71 +0,0 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtGraphicalEffects 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item{
|
||||
property var radius:[0,0,0,0]
|
||||
property color color : FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||
property bool shadow: true
|
||||
default property alias contentItem: container.data
|
||||
id:control
|
||||
onWidthChanged: {
|
||||
canvas.requestPaint()
|
||||
}
|
||||
onHeightChanged: {
|
||||
canvas.requestPaint()
|
||||
}
|
||||
onRadiusChanged: {
|
||||
canvas.requestPaint()
|
||||
}
|
||||
FluShadow{
|
||||
anchors.fill: container
|
||||
radius: control.radius[0]
|
||||
visible: {
|
||||
if(control.radius[0] === control.radius[1] && control.radius[0] === control.radius[2] && control.radius[0] === control.radius[3] && control.shadow){
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
id:container
|
||||
width: control.width
|
||||
height: control.height
|
||||
opacity: 0
|
||||
color:control.color
|
||||
}
|
||||
Canvas {
|
||||
id: canvas
|
||||
anchors.fill: parent
|
||||
visible: false
|
||||
onPaint: {
|
||||
var ctx = getContext("2d")
|
||||
var x = 0
|
||||
var y = 0
|
||||
var w = control.width
|
||||
var h = control.height
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
ctx.save()
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + radius[0], y)
|
||||
ctx.lineTo(x + w - radius[1], y)
|
||||
ctx.arcTo(x + w, y, x + w, y + radius[1], radius[1])
|
||||
ctx.lineTo(x + w, y + h - radius[2])
|
||||
ctx.arcTo(x + w, y + h, x + w - radius[2], y + h, radius[2])
|
||||
ctx.lineTo(x + radius[3], y + h)
|
||||
ctx.arcTo(x, y + h, x, y + h - radius[3], radius[3])
|
||||
ctx.lineTo(x, y + radius[0])
|
||||
ctx.arcTo(x, y, x + radius[0], y, radius[0])
|
||||
ctx.closePath()
|
||||
ctx.fillStyle = "#000000"
|
||||
ctx.fill()
|
||||
ctx.restore()
|
||||
}
|
||||
}
|
||||
OpacityMask {
|
||||
anchors.fill: container
|
||||
source: container
|
||||
maskSource: canvas
|
||||
}
|
||||
}
|
||||
@ -23,24 +23,16 @@ T.Slider {
|
||||
radius: 12
|
||||
}
|
||||
Rectangle{
|
||||
width: 24
|
||||
height: 24
|
||||
radius: 12
|
||||
width: radius*2
|
||||
height: radius*2
|
||||
radius:{
|
||||
if(control.pressed){
|
||||
return 5
|
||||
}
|
||||
return control.hovered ? 7 : 6
|
||||
}
|
||||
color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
|
||||
anchors.centerIn: parent
|
||||
scale: {
|
||||
if(control.pressed){
|
||||
return 4/10
|
||||
}
|
||||
return control.hovered ? 6/10 : 5/10
|
||||
}
|
||||
Behavior on scale {
|
||||
enabled: FluTheme.enableAnimation
|
||||
NumberAnimation{
|
||||
duration: 167
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
background: Item {
|
||||
|
||||
@ -68,7 +68,7 @@ T.SpinBox {
|
||||
}
|
||||
}
|
||||
|
||||
up.indicator: FluItem {
|
||||
up.indicator: FluRectangle {
|
||||
x: control.mirrored ? 0 : control.width - width
|
||||
height: control.height
|
||||
implicitWidth: 32
|
||||
@ -103,7 +103,7 @@ T.SpinBox {
|
||||
}
|
||||
|
||||
|
||||
down.indicator: FluItem {
|
||||
down.indicator: FluRectangle {
|
||||
x: control.mirrored ? parent.width - width : 0
|
||||
height: control.height
|
||||
implicitWidth: 32
|
||||
|
||||
@ -76,7 +76,7 @@ Item {
|
||||
id:item_layout
|
||||
width: item_container.width
|
||||
height: item_container.height
|
||||
FluItem{
|
||||
Item{
|
||||
id:item_container
|
||||
property real timestamp: new Date().getTime()
|
||||
height: tab_nav.height
|
||||
@ -92,7 +92,6 @@ Item {
|
||||
}
|
||||
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 } }
|
||||
MouseArea{
|
||||
@ -186,8 +185,9 @@ Item {
|
||||
}
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
FluRectangle{
|
||||
anchors.fill: parent
|
||||
radius: [6,6,0,0]
|
||||
color: {
|
||||
if(FluTheme.dark){
|
||||
if(item_mouse_hove.containsMouse || item_btn_close.hovered){
|
||||
|
||||
@ -141,13 +141,15 @@ Rectangle {
|
||||
FluText {
|
||||
id:item_text
|
||||
text: itemData
|
||||
anchors.fill: parent
|
||||
leftPadding: 11
|
||||
rightPadding: 11
|
||||
topPadding: 6
|
||||
bottomPadding: 6
|
||||
elide: Text.ElideRight
|
||||
wrapMode: Text.WrapAnywhere
|
||||
anchors{
|
||||
fill: parent
|
||||
leftMargin: 11
|
||||
rightMargin: 11
|
||||
topMargin: 6
|
||||
bottomMargin: 6
|
||||
}
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
HoverHandler{
|
||||
id: hover_handler
|
||||
|
||||
@ -1,38 +1,34 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtGraphicalEffects 1.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Rectangle{
|
||||
FluClip{
|
||||
property Item inputItem
|
||||
id:content
|
||||
radius: 4
|
||||
layer.enabled: true
|
||||
color: {
|
||||
if(inputItem.disabled){
|
||||
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
|
||||
property int borderWidth: 1
|
||||
id:control
|
||||
radius: [4,4,4,4]
|
||||
Rectangle{
|
||||
radius: 4
|
||||
anchors.fill: parent
|
||||
color: {
|
||||
if(inputItem.disabled){
|
||||
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
|
||||
}
|
||||
if(inputItem.activeFocus){
|
||||
return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
|
||||
}
|
||||
if(inputItem.hovered){
|
||||
return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
|
||||
}
|
||||
return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
|
||||
}
|
||||
if(inputItem.activeFocus){
|
||||
return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
|
||||
border.width: control.borderWidth
|
||||
border.color: {
|
||||
if(inputItem.disabled){
|
||||
return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
|
||||
}
|
||||
return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
|
||||
}
|
||||
if(inputItem.hovered){
|
||||
return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
|
||||
}
|
||||
return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
|
||||
}
|
||||
layer.effect:OpacityMask {
|
||||
maskSource: Rectangle {
|
||||
width: content.width
|
||||
height: content.height
|
||||
radius: 4
|
||||
}
|
||||
}
|
||||
border.width: 1
|
||||
border.color: {
|
||||
if(inputItem.disabled){
|
||||
return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
|
||||
}
|
||||
return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
|
||||
}
|
||||
Rectangle{
|
||||
width: parent.width
|
||||
|
||||
@ -75,12 +75,12 @@ Button {
|
||||
}
|
||||
return borderNormalColor
|
||||
}
|
||||
Rectangle {
|
||||
FluIcon {
|
||||
width: parent.height
|
||||
x:checked ? control_backgound.width-width : 0
|
||||
height: width
|
||||
radius: width/2
|
||||
scale: hovered&enabled ? 7/10 : 6/10
|
||||
iconSource: FluentIcons.FullCircleMask
|
||||
iconSize: 20
|
||||
color: {
|
||||
if(!enabled){
|
||||
return dotDisableColor
|
||||
@ -91,14 +91,9 @@ Button {
|
||||
return dotNormalColor
|
||||
}
|
||||
Behavior on x {
|
||||
enabled: FluTheme.enableAnimation
|
||||
NumberAnimation {
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
Behavior on scale {
|
||||
enabled: FluTheme.enableAnimation
|
||||
NumberAnimation {
|
||||
duration: 167
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
import QtQuick 2.15
|
||||
|
||||
QtObject {
|
||||
property string key
|
||||
property string title
|
||||
property var children: []
|
||||
property int depth: 0
|
||||
property bool isExpanded: true
|
||||
property var __parent
|
||||
property int __childIndex: 0
|
||||
property bool __expanded:{
|
||||
var p = __parent;
|
||||
while (p) {
|
||||
if(!p.isExpanded){
|
||||
return false
|
||||
}
|
||||
p = p.__parent;
|
||||
}
|
||||
return true
|
||||
}
|
||||
property int index: 0
|
||||
}
|
||||
@ -9,55 +9,19 @@ Item {
|
||||
property int currentIndex : -1
|
||||
property var dataSource
|
||||
property bool showLine: true
|
||||
property bool draggable: false
|
||||
property color lineColor: FluTheme.dark ? Qt.rgba(111/255,111/255,111/255,1) : Qt.rgba(217/255,217/255,217/255,1)
|
||||
id:control
|
||||
QtObject {
|
||||
id:d
|
||||
property var rowData: []
|
||||
function handleTree(treeData) {
|
||||
var comItem = Qt.createComponent("FluTreeItem.qml");
|
||||
if (comItem.status !== Component.Ready) {
|
||||
return
|
||||
}
|
||||
var stack = []
|
||||
var rawData = []
|
||||
for (var item of treeData) {
|
||||
stack.push({node:item,depth:0,isExpanded:true,__parent:undefined,__childIndex:0})
|
||||
}
|
||||
stack = stack.reverse()
|
||||
var index =0
|
||||
while (stack.length > 0) {
|
||||
const { node, depth,isExpanded,__parent,__childIndex} = stack.pop();
|
||||
node.depth = depth;
|
||||
node.isExpanded = isExpanded;
|
||||
node.__parent = __parent;
|
||||
node.__childIndex = __childIndex;
|
||||
var objItem = comItem.createObject(table_view);
|
||||
objItem.title = node.title
|
||||
objItem.key = node.key
|
||||
objItem.depth = node.depth
|
||||
objItem.isExpanded = node.isExpanded
|
||||
objItem.__parent = node.__parent
|
||||
objItem.children = node.children
|
||||
objItem.__childIndex = node.__childIndex
|
||||
objItem.index = index
|
||||
index = index + 1;
|
||||
rawData.push(objItem)
|
||||
if (node.children && node.children.length > 0) {
|
||||
const children = node.children.reverse();
|
||||
var childIndex = children.length-1
|
||||
for (const child of children) {
|
||||
stack.push({ node: child, depth: depth + 1,isExpanded:true,__parent:objItem,__childIndex:childIndex});
|
||||
childIndex=childIndex-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
return rawData
|
||||
}
|
||||
property var current
|
||||
property int dropIndex: -1
|
||||
property int dragIndex: -1
|
||||
property color hitColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||
|
||||
}
|
||||
onDataSourceChanged: {
|
||||
d.rowData = d.handleTree(dataSource)
|
||||
tree_model.setData(d.rowData)
|
||||
tree_model.setDataSource(dataSource)
|
||||
}
|
||||
FluTreeModel{
|
||||
id:tree_model
|
||||
@ -69,65 +33,205 @@ Item {
|
||||
table_view.forceLayout()
|
||||
}
|
||||
}
|
||||
TableView{
|
||||
id:table_view
|
||||
ScrollBar.horizontal: FluScrollBar{}
|
||||
ScrollBar.vertical: FluScrollBar{}
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
model: tree_model
|
||||
clip: true
|
||||
anchors.fill: parent
|
||||
onContentYChanged:{
|
||||
timer_refresh.restart()
|
||||
}
|
||||
reuseItems: false
|
||||
delegate: Item {
|
||||
property bool hasChildren: {
|
||||
if(display.children){
|
||||
return true
|
||||
}
|
||||
return false
|
||||
Component{
|
||||
id:com_item_container
|
||||
Item{
|
||||
signal reused
|
||||
signal pooled
|
||||
|
||||
onReused: {
|
||||
console.debug("----->onReused")
|
||||
}
|
||||
property var itemData: display
|
||||
property bool vlineVisible: display.depth !== 0 && control.showLine
|
||||
property bool hlineVisible: display.depth !== 0 && control.showLine && !hasChildren
|
||||
property bool isLastIndex : {
|
||||
if(display.__parent && display.__parent.children){
|
||||
return display.__childIndex === display.__parent.children.length-1
|
||||
}
|
||||
return false
|
||||
onPooled: {
|
||||
console.debug("----->onPooled")
|
||||
}
|
||||
|
||||
property bool isCurrent: d.current === itemModel
|
||||
id:item_container
|
||||
width: {
|
||||
var w = 46 + item_layout_text.width + 30*itemModel.depth
|
||||
if(control.width>w){
|
||||
return control.width
|
||||
}
|
||||
return w
|
||||
}
|
||||
height: 30
|
||||
function toggle(){
|
||||
if(itemModel.isExpanded){
|
||||
tree_model.collapse(rowIndex)
|
||||
}else{
|
||||
tree_model.expand(rowIndex)
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
radius: 4
|
||||
anchors.leftMargin: 6
|
||||
anchors.rightMargin: 6
|
||||
border.color: d.hitColor
|
||||
border.width: d.dragIndex === rowIndex ? 1 : 0
|
||||
color: {
|
||||
if(FluTheme.dark){
|
||||
if(isCurrent){
|
||||
return Qt.rgba(1,1,1,0.03)
|
||||
}
|
||||
if(item_mouse.containsMouse){
|
||||
return Qt.rgba(1,1,1,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}else{
|
||||
if(isCurrent){
|
||||
return Qt.rgba(0,0,0,0.06)
|
||||
}
|
||||
if(item_mouse.containsMouse){
|
||||
return Qt.rgba(0,0,0,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 3
|
||||
height: 18
|
||||
radius: 1.5
|
||||
color: FluTheme.primaryColor.dark
|
||||
visible: isCurrent
|
||||
anchors{
|
||||
left: parent.left
|
||||
leftMargin: 6
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
MouseArea{
|
||||
id:item_mouse
|
||||
anchors.fill: parent
|
||||
drag.target:control.draggable ? loader_container : undefined
|
||||
hoverEnabled: true
|
||||
drag.onActiveChanged: {
|
||||
if(drag.active){
|
||||
if(itemModel.isExpanded && itemModel.hasChildren()){
|
||||
tree_model.collapse(rowIndex)
|
||||
}
|
||||
d.dragIndex = rowIndex
|
||||
loader_container.sourceComponent = com_item_container
|
||||
}
|
||||
}
|
||||
onPressed: {
|
||||
loader_container.itemControl = itemControl
|
||||
loader_container.itemModel = itemModel
|
||||
var cellPosition = item_container.mapToItem(table_view, 0, 0)
|
||||
loader_container.width = item_container.width
|
||||
loader_container.height = item_container.height
|
||||
loader_container.x = table_view.contentX + cellPosition.x
|
||||
loader_container.y = table_view.contentY + cellPosition.y
|
||||
|
||||
}
|
||||
onClicked: {
|
||||
d.current = itemModel
|
||||
}
|
||||
onDoubleClicked: {
|
||||
if(itemModel.hasChildren()){
|
||||
item_container.toggle()
|
||||
}
|
||||
}
|
||||
onPositionChanged:
|
||||
(mouse)=> {
|
||||
if(!drag.active){
|
||||
return
|
||||
}
|
||||
var cellPosition = item_container.mapToItem(table_view, 0, 0)
|
||||
if(mouse.y+cellPosition.y<0 || mouse.y+cellPosition.y>table_view.height){
|
||||
d.dropIndex = -1
|
||||
return
|
||||
}
|
||||
if((mouse.x-table_view.contentX)>table_view.width || (mouse.x-table_view.contentX)<0){
|
||||
d.dropIndex = -1
|
||||
return
|
||||
}
|
||||
var y = loader_container.y
|
||||
var index = Math.round(y/30)
|
||||
if(index !== d.dragIndex){
|
||||
d.dropIndex = index
|
||||
}else{
|
||||
d.dropIndex = -1
|
||||
}
|
||||
}
|
||||
onCanceled: {
|
||||
loader_container.sourceComponent = undefined
|
||||
d.dropIndex = -1
|
||||
d.dragIndex = -1
|
||||
}
|
||||
onReleased: {
|
||||
loader_container.sourceComponent = undefined
|
||||
if(d.dropIndex !== -1){
|
||||
tree_model.dragAnddrop(d.dragIndex,d.dropIndex)
|
||||
}
|
||||
d.dropIndex = -1
|
||||
d.dragIndex = -1
|
||||
}
|
||||
}
|
||||
Drag.active: item_mouse.drag.active
|
||||
Rectangle{
|
||||
anchors{
|
||||
left: parent.left
|
||||
leftMargin: {
|
||||
if(itemModel.hasChildren()){
|
||||
return 30*(itemModel.depth+1) - 8
|
||||
}
|
||||
return 30*(itemModel.depth+1) + 18
|
||||
}
|
||||
right: parent.right
|
||||
rightMargin: 10
|
||||
bottom: parent.bottom
|
||||
}
|
||||
height: 3
|
||||
radius: 1.5
|
||||
color: d.hitColor
|
||||
visible: d.dropIndex === rowIndex
|
||||
Rectangle{
|
||||
width: 10
|
||||
height: 10
|
||||
radius: 5
|
||||
border.width: 3
|
||||
border.color: d.hitColor
|
||||
color: FluTheme.dark ? FluColors.Black : FluColors.White
|
||||
anchors{
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
topMargin: -3
|
||||
leftMargin: -5
|
||||
}
|
||||
}
|
||||
}
|
||||
property bool isCurrent: control.currentIndex === row
|
||||
implicitWidth: 46 + item_layout_text.width + 30*display.depth
|
||||
implicitHeight: 30
|
||||
Rectangle{
|
||||
width: 1
|
||||
color: control.lineColor
|
||||
visible: hlineVisible
|
||||
height: isLastIndex ? parent.height/2 : parent.height
|
||||
visible: itemModel.depth !== 0 && control.showLine && !itemModel.hasChildren()
|
||||
height: itemModel.hideLineFooter() ? parent.height/2 : parent.height
|
||||
anchors{
|
||||
top: parent.top
|
||||
right: layout_row.left
|
||||
rightMargin: -9
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
height: 1
|
||||
color: control.lineColor
|
||||
visible: hlineVisible
|
||||
visible: itemModel.depth !== 0 && control.showLine && !itemModel.hasChildren()
|
||||
width: 18
|
||||
anchors{
|
||||
right: layout_row.left
|
||||
rightMargin: -18
|
||||
rightMargin: -27
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
Repeater{
|
||||
model: Math.max(display.depth-1,0)
|
||||
model: Math.max(itemModel.depth-1,0)
|
||||
delegate: Rectangle{
|
||||
required property int index
|
||||
width: 1
|
||||
color: control.lineColor
|
||||
visible: vlineVisible
|
||||
visible: itemModel.depth !== 0 && control.showLine
|
||||
anchors{
|
||||
top:parent.top
|
||||
bottom: parent.bottom
|
||||
@ -140,101 +244,32 @@ Item {
|
||||
id:layout_row
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 14 + 30*display.depth
|
||||
anchors.leftMargin: 14 + 30*itemModel.depth
|
||||
FluIconButton{
|
||||
Layout.preferredWidth: 20
|
||||
Layout.preferredHeight: 20
|
||||
enabled: opacity
|
||||
opacity: hasChildren
|
||||
opacity: itemModel.hasChildren()
|
||||
contentItem: FluIcon{
|
||||
rotation: itemData.isExpanded?0:-90
|
||||
rotation: itemModel.isExpanded?0:-90
|
||||
iconSource:FluentIcons.ChevronDown
|
||||
iconSize: 16
|
||||
Behavior on rotation{
|
||||
NumberAnimation{
|
||||
duration: FluTheme.enableAnimation ? 167 : 0
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
}
|
||||
onClicked: {
|
||||
var isExpanded = !itemData.isExpanded
|
||||
itemData.isExpanded = isExpanded
|
||||
var i,obj
|
||||
if(isExpanded){
|
||||
for( i=0;i<d.rowData.length;i++){
|
||||
obj = d.rowData[i]
|
||||
if(obj === itemData){
|
||||
var data = []
|
||||
for(var j=i+1;j<d.rowData.length;j++){
|
||||
obj = d.rowData[j]
|
||||
if(obj.depth === itemData.depth){
|
||||
break
|
||||
}
|
||||
if(obj.__expanded){
|
||||
data.push(obj)
|
||||
}
|
||||
}
|
||||
tree_model.insertRows(row+1,data)
|
||||
break
|
||||
}
|
||||
}
|
||||
}else{
|
||||
var removeCount = 0
|
||||
for( i=row+1;i<tree_model.rowCount();i++){
|
||||
obj = tree_model.getRow(i)
|
||||
if(obj.depth === itemData.depth){
|
||||
break
|
||||
}
|
||||
removeCount = removeCount + 1;
|
||||
}
|
||||
tree_model.removeRows(row+1,removeCount)
|
||||
}
|
||||
item_container.toggle()
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
Item{
|
||||
id:item_layout_text
|
||||
radius: 4
|
||||
Layout.preferredWidth: item_text.implicitWidth+14
|
||||
Layout.preferredHeight:item_text.implicitHeight+14
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
Rectangle{
|
||||
width: 3
|
||||
height: 18
|
||||
radius: 1.5
|
||||
color: FluTheme.primaryColor.dark
|
||||
visible: isCurrent
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
MouseArea{
|
||||
id:item_text_mousearea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onClicked: {
|
||||
control.currentIndex = row
|
||||
}
|
||||
}
|
||||
color: {
|
||||
if(FluTheme.dark){
|
||||
if(item_text_mousearea.containsMouse || isCurrent){
|
||||
return Qt.rgba(1,1,1,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}else{
|
||||
if(item_text_mousearea.containsMouse || isCurrent){
|
||||
return Qt.rgba(0,0,0,0.03)
|
||||
}
|
||||
return Qt.rgba(0,0,0,0)
|
||||
}
|
||||
}
|
||||
FluText {
|
||||
id:item_text
|
||||
text: display.title
|
||||
text: itemModel.title
|
||||
anchors.centerIn: parent
|
||||
color:{
|
||||
if(item_text_mousearea.pressed){
|
||||
if(item_mouse.pressed){
|
||||
return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
|
||||
}
|
||||
return FluTheme.dark ? FluColors.White : FluColors.Grey220
|
||||
@ -244,8 +279,58 @@ Item {
|
||||
}
|
||||
}
|
||||
}
|
||||
ScrollView{
|
||||
anchors.fill: parent
|
||||
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
||||
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
|
||||
TableView{
|
||||
id:table_view
|
||||
ScrollBar.horizontal: FluScrollBar{}
|
||||
ScrollBar.vertical: FluScrollBar{}
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
model: tree_model
|
||||
clip: true
|
||||
anchors.fill: parent
|
||||
onContentYChanged:{
|
||||
timer_refresh.restart()
|
||||
}
|
||||
onWidthChanged: {
|
||||
timer_refresh.restart()
|
||||
}
|
||||
delegate: Item {
|
||||
id:item_control
|
||||
implicitWidth: item_loader_container.width
|
||||
implicitHeight: item_loader_container.height
|
||||
TableView.onReused: {
|
||||
item_loader_container.item.reused()
|
||||
}
|
||||
TableView.onPooled: {
|
||||
item_loader_container.item.pooled()
|
||||
}
|
||||
Loader{
|
||||
property var itemControl: item_control
|
||||
property var itemModel: modelData
|
||||
property int rowIndex: row
|
||||
id:item_loader_container
|
||||
width: item.width
|
||||
height: item.height
|
||||
sourceComponent: {
|
||||
if(modelData)
|
||||
return com_item_container
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loader{
|
||||
id:loader_container
|
||||
property var itemControl
|
||||
property var itemModel
|
||||
}
|
||||
}
|
||||
function count(){
|
||||
return d.rowData.length
|
||||
return tree_model.dataSourceSize
|
||||
}
|
||||
function visibleCount(){
|
||||
return table_view.rows
|
||||
|
||||
@ -39,7 +39,6 @@ FluIcon 1.0 Controls/FluIcon.qml
|
||||
FluIconButton 1.0 Controls/FluIconButton.qml
|
||||
FluImage 1.0 Controls/FluImage.qml
|
||||
FluInfoBar 1.0 Controls/FluInfoBar.qml
|
||||
FluItem 1.0 Controls/FluItem.qml
|
||||
FluItemDelegate 1.0 Controls/FluItemDelegate.qml
|
||||
FluMenu 1.0 Controls/FluMenu.qml
|
||||
FluMenuBar 1.0 Controls/FluMenuBar.qml
|
||||
@ -66,7 +65,6 @@ FluQRCode 1.0 Controls/FluQRCode.qml
|
||||
FluRadioButton 1.0 Controls/FluRadioButton.qml
|
||||
FluRadioButtons 1.0 Controls/FluRadioButtons.qml
|
||||
FluRatingControl 1.0 Controls/FluRatingControl.qml
|
||||
FluRectangle 1.0 Controls/FluRectangle.qml
|
||||
FluRemoteLoader 1.0 Controls/FluRemoteLoader.qml
|
||||
FluScreenshot 1.0 Controls/FluScreenshot.qml
|
||||
FluScrollBar 1.0 Controls/FluScrollBar.qml
|
||||
@ -96,5 +94,5 @@ FluRangeSlider 1.0 Controls/FluRangeSlider.qml
|
||||
FluStaggeredView 1.0 Controls/FluStaggeredView.qml
|
||||
FluProgressButton 1.0 Controls/FluProgressButton.qml
|
||||
FluLoadingButton 1.0 Controls/FluLoadingButton.qml
|
||||
FluTreeItem 1.0 Controls/FluTreeItem.qml
|
||||
FluClip 1.0 Controls/FluClip.qml
|
||||
plugin fluentuiplugin
|
||||
|
||||
@ -33,7 +33,6 @@
|
||||
<file>FluentUI/Controls/FluIconButton.qml</file>
|
||||
<file>FluentUI/Controls/FluImage.qml</file>
|
||||
<file>FluentUI/Controls/FluInfoBar.qml</file>
|
||||
<file>FluentUI/Controls/FluItem.qml</file>
|
||||
<file>FluentUI/Controls/FluItemDelegate.qml</file>
|
||||
<file>FluentUI/Controls/FluMenu.qml</file>
|
||||
<file>FluentUI/Controls/FluMenuBar.qml</file>
|
||||
@ -62,7 +61,6 @@
|
||||
<file>FluentUI/Controls/FluRadioButtons.qml</file>
|
||||
<file>FluentUI/Controls/FluRangeSlider.qml</file>
|
||||
<file>FluentUI/Controls/FluRatingControl.qml</file>
|
||||
<file>FluentUI/Controls/FluRectangle.qml</file>
|
||||
<file>FluentUI/Controls/FluRemoteLoader.qml</file>
|
||||
<file>FluentUI/Controls/FluScreenshot.qml</file>
|
||||
<file>FluentUI/Controls/FluScrollablePage.qml</file>
|
||||
@ -96,6 +94,6 @@
|
||||
<file>FluentUI/Controls/ColorPicker/Content/PanelBorder.qml</file>
|
||||
<file>FluentUI/Controls/ColorPicker/Content/SBPicker.qml</file>
|
||||
<file>FluentUI/Controls/FluLoadingButton.qml</file>
|
||||
<file>FluentUI/Controls/FluTreeItem.qml</file>
|
||||
<file>FluentUI/Controls/FluClip.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
||||
Reference in New Issue
Block a user