amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2025-07-01 15:42:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zhuzichu
2023-08-11 14:31:23 +08:00
parent b1a2266c5e
commit 6fe3081d23
4 changed files with 365 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/Def.h
View File

@ -15,6 +15,17 @@ Q_ENUM_NS(DarkMode)
QML_NAMED_ELEMENT(FluThemeType)
}
namespace FluTimelineType {
Q_NAMESPACE
enum Mode {
Left = 0x0000,
Right = 0x0001,
Alternate = 0x0002,
};
Q_ENUM_NS(Mode)
QML_NAMED_ELEMENT(FluTimelineType)
}
namespace FluPageType {
Q_NAMESPACE
enum LaunchMode {

1
src/imports/FluentUI/Controls/FluDropDownButton.qml
View File

@ -70,7 +70,6 @@ Button {
contentItem: FluText {
id:title
text: control.text
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: control.textColor
}

284
src/imports/FluentUI/Controls/FluTimeline.qml
View File

@ -3,22 +3,77 @@ import QtQuick.Controls
import FluentUI
Item{
property int mode: FluTimelineType.Left
property alias model: repeater.model
property color lineColor: Qt.rgba(240/255,240/255,240/255,1)
id:control
width: layout_column.width
height: layout_column.height
Rectangle{
color: Qt.rgba(240/255,240/255,240/255,1)
height: parent.height
width: 2
anchors{
left: parent.left
leftMargin: 7
implicitWidth: 380
implicitHeight: layout_column.height
QtObject{
id:d
property bool isLeft: control.mode === FluTimelineType.Left
property bool isRight: control.mode === FluTimelineType.Right
property bool isAlternate: control.mode === FluTimelineType.Alternate
property bool hasLable: {
for(var i=0;i<model.count;i++){
var lable = model.get(i).lable
if(lable !== undefined && undefined !== ""){
return true
}
}
return false
}
property string stateName : {
if(hasLable){
return "Center"
}
if(isRight){
return "Right"
}
if(isAlternate){
return "Center"
}
return "Left"
}
}
Rectangle{
id:rect_line
color: control.lineColor
height: parent.height
width: 2
state: d.stateName
states: [
State {
name: "Left"
AnchorChanges {
target: rect_line
anchors.left: control.left
}
PropertyChanges {
target: rect_line
anchors.leftMargin: 7
}
},
State {
name: "Right"
AnchorChanges {
target: rect_line
anchors.right: control.right
}
PropertyChanges {
target: rect_line
anchors.rightMargin: 7
}
},
State {
name: "Center"
AnchorChanges {
target: rect_line
anchors.horizontalCenter: control.horizontalCenter
}
}
]
}
Component{
id:com_dot
Rectangle{
@ -26,20 +81,68 @@ Item{
height: 16
radius: 8
border.width: 4
border.color: FluTheme.primaryColor.dark
color:FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
border.color: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
}
}
Component{
id:com_lable
FluText{
wrapMode: Text.WrapAnywhere
horizontalAlignment: textAlignment
text: modelData.lable
color: FluTheme.primaryColor.dark
}
}
Component{
id:com_text
FluText{
wrapMode: Text.WrapAnywhere
horizontalAlignment: textAlignment
text: modelData.text
}
}
Column{
id:layout_column
spacing: 30
width: control.width
Repeater{
id:repeater
Item{
width: item_text.width
height: item_text.height
id:item_layout
width: layout_column.width
height: loader_text.height
Loader{
id:item_loader
state: d.stateName
states: [
State {
name: "Left"
AnchorChanges {
target: item_loader
anchors.left: item_layout.left
}
},
State {
name: "Right"
AnchorChanges {
target: item_loader
anchors.right: item_layout.right
}
},
State {
name: "Center"
AnchorChanges {
target: item_loader
anchors.horizontalCenter: item_layout.horizontalCenter
}
}
]
sourceComponent: {
if(model.dot)
return model.dot()
@ -47,18 +150,149 @@ Item{
}
}
FluText{
id:item_text
anchors{
left: parent.left
leftMargin: 30
Loader{
property var modelData: control.model.get(index)
property int textAlignment: state === "Right" ? Qt.AlignRight : Qt.AlignLeft
id:loader_lable
sourceComponent: {
if(!modelData){
return undefined
}
var lableDelegate = model.lableDelegate
if(lableDelegate instanceof Function && lableDelegate() instanceof Component){
return lableDelegate()
}
return com_lable
}
text: model.text
state: {
if(d.isRight){
return "Left"
}
if(d.isAlternate){
if(index%2===0){
return "Right"
}else{
return "Left"
}
}
return "Right"
}
states: [
State {
name: "Left"
AnchorChanges {
target: loader_lable
anchors.left: item_loader.right
anchors.right: item_layout.right
}
PropertyChanges {
target: loader_lable
anchors.leftMargin: 14
anchors.rightMargin: 14
}
},
State {
name: "Right"
AnchorChanges {
target: loader_lable
anchors.right: item_loader.left
anchors.left: item_layout.left
}
PropertyChanges {
target: loader_lable
anchors.leftMargin: 14
anchors.rightMargin: 14
}
},
State {
name: "Center"
AnchorChanges {
target: loader_lable
anchors.right: item_loader.left
anchors.left: item_layout.left
}
PropertyChanges {
target: loader_lable
anchors.leftMargin: 14
anchors.rightMargin: 14
}
}
]
}
}
Loader{
id:loader_text
property var modelData: control.model.get(index)
property int textAlignment: state === "Right" ? Qt.AlignRight : Qt.AlignLeft
state: {
if(d.isRight){
return "Right"
}
if(d.isAlternate){
if(index%2===0){
return "Left"
}else{
return "Right"
}
}
return "Left"
}
sourceComponent: {
if(!modelData){
return undefined
}
var textDelegate = model.textDelegate
if(textDelegate instanceof Function && textDelegate() instanceof Component){
return textDelegate()
}
return com_text
}
states: [
State {
name: "Left"
AnchorChanges {
target: loader_text
anchors.left: item_loader.right
anchors.right: item_layout.right
}
PropertyChanges {
target: loader_text
anchors.leftMargin: 14
anchors.rightMargin: 14
}
},
State {
name: "Right"
AnchorChanges {
target: loader_text
anchors.right: item_loader.left
anchors.left: item_layout.left
}
PropertyChanges {
target: loader_text
anchors.leftMargin: 14
anchors.rightMargin: 14
}
},
State {
name: "Center"
AnchorChanges {
target: loader_text
anchors.right: item_loader.left
anchors.left: item_layout.left
}
PropertyChanges {
target: loader_text
anchors.leftMargin: 14
anchors.rightMargin: 14
}
}
]
}
}
}
}
}