mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-26 21:37:04 +08:00
update
This commit is contained in:
zhuzichu
parent
b1a2266c5e
commit
6fe3081d23
@ -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{
|
||||||
FluTimeline{
|
text:"mode:"
|
||||||
id:time_line
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
model:list_model
|
|
||||||
}
|
}
|
||||||
|
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)
|
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 {
|
||||||
|
|||||||
@ -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
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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
|
||||||
Rectangle{
|
property bool isLeft: control.mode === FluTimelineType.Left
|
||||||
color: Qt.rgba(240/255,240/255,240/255,1)
|
property bool isRight: control.mode === FluTimelineType.Right
|
||||||
height: parent.height
|
property bool isAlternate: control.mode === FluTimelineType.Alternate
|
||||||
width: 2
|
property bool hasLable: {
|
||||||
anchors{
|
for(var i=0;i<model.count;i++){
|
||||||
left: parent.left
|
var lable = model.get(i).lable
|
||||||
leftMargin: 7
|
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{
|
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
|
||||||
|
}
|
||||||
|
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