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

View File

@ -16,26 +16,80 @@ FluScrollablePage{
height: 16 height: 16
radius: 8 radius: 8
border.width: 4 border.width: 4
border.color: FluColors.Green.dark border.color: FluColors.Red.dark
} }
} }
Component{
id:com_lable
FluText{
wrapMode: Text.WrapAnywhere
horizontalAlignment: textAlignment
text: modelData.lable
color: FluTheme.primaryColor.dark
MouseArea{
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
showSuccess(modelData.lable)
}
}
}
}
Component{
id:com_text
FluText{
wrapMode: Text.WrapAnywhere
horizontalAlignment: textAlignment
text: modelData.text
font.bold: true
MouseArea{
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
showSuccess(modelData.text)
}
}
}
}
ListModel{ ListModel{
id:list_model id:list_model
ListElement{ ListElement{
text:"Create a services site 2015-09-01" lable:"2013-09-01"
lableDelegate:()=>com_lable
textDelegate:()=>com_text
text:"考上家里蹲大学"
} }
ListElement{ ListElement{
text:"Solve initial network problems 2015-09-01 \nSolve initial network problems 2015-09-01 \nSolve initial network problems 2015-09-01" lable:"2017-07-01"
text:"大学毕业在寝室打了4年LOL没想到毕业还要找工作瞬间蒙蔽~害"
}
ListElement{
lable:"2017-09-01"
text:"开始找工作,毕业即失业!回农村老家躺平,继承三亩良田!!"
dot:()=>com_dot dot:()=>com_dot
} }
ListElement{ ListElement{
text:"Technical testing 2015-09-01" lable:"2018-02-01"
text:"玩了一年没钱,惨,出去找工作上班"
} }
ListElement{ ListElement{
text:"Network problems being solved 2015-09-01" lable:"2018-03-01"
text:"找到一份Android外包开发岗位开发了一个Android应用满满成就感前端、服务端、Flutter也都懂一丢丢什么都会什么都不精通钱途无望"
}
ListElement{
lable:"2020-06-01"
text:"由于某个项目紧急临时加入Qt项目组就因为大学学了点C++),本来是想进去打个酱油,到后面竟然成开发主力,坑啊"
}
ListElement{
lable:"2022-08-01"
text:"额,被老板卖到甲方公司,走时老板还问我想不想去,我说:'哪里工资高就去哪里?',老板:'无语'"
}
ListElement{
lable:"2023-02-28"
text:"开发FluentUI组件库"
} }
} }
@ -60,18 +114,44 @@ FluScrollablePage{
} }
} }
FluArea{ RowLayout{
Layout.fillWidth: true
height: time_line.height + 20
paddings: 10
Layout.topMargin: 10 Layout.topMargin: 10
FluText{
text:"mode:"
}
FluDropDownButton{
id:btn_mode
Layout.preferredWidth: 100
text:"Alternate"
FluMenuItem{
text:"Left"
onClicked: {
btn_mode.text = text
time_line.mode = FluTimelineType.Left
}
}
FluMenuItem{
text:"Right"
onClicked: {
btn_mode.text = text
time_line.mode = FluTimelineType.Right
}
}
FluMenuItem{
text:"Alternate"
onClicked: {
btn_mode.text = text
time_line.mode = FluTimelineType.Alternate
}
}
}
}
FluTimeline{ FluTimeline{
id:time_line id:time_line
anchors.verticalCenter: parent.verticalCenter Layout.fillWidth: true
mode: FluTimelineType.Alternate
model:list_model model:list_model
} }
}
} }

View File

@ -15,6 +15,17 @@ Q_ENUM_NS(DarkMode)
QML_NAMED_ELEMENT(FluThemeType) 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 { namespace FluPageType {
Q_NAMESPACE Q_NAMESPACE
enum LaunchMode { enum LaunchMode {

View File

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

View File

@ -3,22 +3,77 @@ import QtQuick.Controls
import FluentUI import FluentUI
Item{ Item{
property int mode: FluTimelineType.Left
property alias model: repeater.model property alias model: repeater.model
property color lineColor: Qt.rgba(240/255,240/255,240/255,1)
id:control id:control
implicitWidth: 380
width: layout_column.width implicitHeight: layout_column.height
height: 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{ Rectangle{
color: Qt.rgba(240/255,240/255,240/255,1) id:rect_line
color: control.lineColor
height: parent.height height: parent.height
width: 2 width: 2
anchors{ state: d.stateName
left: parent.left states: [
leftMargin: 7 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{ Component{
id:com_dot id:com_dot
Rectangle{ Rectangle{
@ -26,20 +81,68 @@ Item{
height: 16 height: 16
radius: 8 radius: 8
border.width: 4 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{ Column{
id:layout_column id:layout_column
spacing: 30 spacing: 30
width: control.width
Repeater{ Repeater{
id:repeater id:repeater
Item{ Item{
width: item_text.width id:item_layout
height: item_text.height width: layout_column.width
height: loader_text.height
Loader{ 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: { sourceComponent: {
if(model.dot) if(model.dot)
return model.dot() return model.dot()
@ -47,18 +150,149 @@ Item{
} }
} }
FluText{ Loader{
id:item_text property var modelData: control.model.get(index)
anchors{ property int textAlignment: state === "Right" ? Qt.AlignRight : Qt.AlignLeft
left: parent.left id:loader_lable
leftMargin: 30 sourceComponent: {
if(!modelData){
return undefined
} }
text: model.text var lableDelegate = model.lableDelegate
if(lableDelegate instanceof Function && lableDelegate() instanceof Component){
return lableDelegate()
} }
return com_lable
}
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
}
}
]
} }
}
}
}
} }