mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-10-06 12:13:15 +08:00
update
This commit is contained in:
zhuzichu
parent
b1a2266c5e
commit
6fe3081d23
|
|
@ -16,26 +16,80 @@ FluScrollablePage{
|
|||
height: 16
|
||||
radius: 8
|
||||
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{
|
||||
id:list_model
|
||||
|
||||
ListElement{
|
||||
text:"Create a services site 2015-09-01"
|
||||
lable:"2013-09-01"
|
||||
lableDelegate:()=>com_lable
|
||||
textDelegate:()=>com_text
|
||||
text:"考上家里蹲大学"
|
||||
}
|
||||
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
|
||||
}
|
||||
ListElement{
|
||||
text:"Technical testing 2015-09-01"
|
||||
lable:"2018-02-01"
|
||||
text:"玩了一年没钱，惨，出去找工作上班"
|
||||
}
|
||||
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{
|
||||
Layout.fillWidth: true
|
||||
height: time_line.height + 20
|
||||
paddings: 10
|
||||
RowLayout{
|
||||
Layout.topMargin: 10
|
||||
|
||||
FluTimeline{
|
||||
id:time_line
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
model:list_model
|
||||
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{
|
||||
id:time_line
|
||||
Layout.fillWidth: true
|
||||
mode: FluTimelineType.Alternate
|
||||
model:list_model
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
11
src/Def.h
11
src/Def.h
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -70,7 +70,6 @@ Button {
|
|||
contentItem: FluText {
|
||||
id:title
|
||||
text: control.text
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
color: control.textColor
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user