FluentUI/example/qml/page/T_Home.qml

291 lines
9.3 KiB
QML
Raw Normal View History

2023-08-24 15:50:37 +08:00
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
2024-01-25 17:26:50 +08:00
import "../global"
2023-03-29 15:44:36 +08:00
FluScrollablePage{
2023-07-18 18:24:06 +08:00
launchMode: FluPageType.SingleTask
2023-07-03 18:08:25 +08:00
animDisabled: true
2023-06-08 17:05:52 +08:00
2023-03-29 15:44:36 +08:00
ListModel{
2024-03-09 15:35:48 +08:00
id: model_header
2023-03-29 15:44:36 +08:00
ListElement{
2024-03-09 15:35:48 +08:00
icon: "qrc:/example/res/image/ic_home_github.png"
title: qsTr("FluentUI GitHub")
desc: qsTr("The latest FluentUI controls and styles for your applications.")
url: "https://github.com/zhuzichu520/FluentUI"
clicked: function(model){
Qt.openUrlExternally(model.url)
}
}
ListElement{
icon: "qrc:/example/res/image/favicon.ico"
title: qsTr("FluentUI Initalizr")
2024-03-09 18:40:32 +08:00
desc: qsTr("FluentUI Initializr is a Tool that helps you create and customize Fluent UI projects with various options.")
2024-03-09 15:35:48 +08:00
url: "https://github.com/zhuzichu520/FluentUI"
clicked: function(model){
FluApp.navigate("/fluentInitalizr")
}
2023-03-29 15:44:36 +08:00
}
}
Item{
Layout.fillWidth: true
2023-08-12 11:01:40 +08:00
Layout.preferredHeight: 320
2023-03-29 15:44:36 +08:00
Image {
2023-05-17 19:29:09 +08:00
id: bg
2023-03-29 15:44:36 +08:00
fillMode:Image.PreserveAspectCrop
anchors.fill: parent
verticalAlignment: Qt.AlignTop
2023-09-06 22:52:48 +08:00
sourceSize: Qt.size(960,640)
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/image/bg_home_header.png"
2023-03-29 15:44:36 +08:00
}
Rectangle{
anchors.fill: parent
gradient: Gradient{
2023-03-29 18:10:34 +08:00
GradientStop { position: 0.8; color: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(1,1,1,0) }
GradientStop { position: 1.0; color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) }
2023-03-29 15:44:36 +08:00
}
}
FluText{
text:"FluentUI Gallery"
2023-05-10 00:27:53 +08:00
font: FluTextStyle.TitleLarge
2023-03-29 15:44:36 +08:00
anchors{
top: parent.top
left: parent.left
2023-03-29 18:10:34 +08:00
topMargin: 20
2023-03-29 15:44:36 +08:00
leftMargin: 20
}
}
2023-09-17 20:36:33 +08:00
Component{
id:com_grallery
Item{
2023-05-17 19:29:09 +08:00
id: control
2023-03-29 18:10:34 +08:00
width: 220
height: 240
2023-08-16 22:56:22 +08:00
FluShadow{
2023-09-08 22:33:23 +08:00
radius:5
2023-08-16 22:56:22 +08:00
anchors.fill: item_content
}
2023-09-17 20:36:33 +08:00
FluClip{
2023-08-16 22:56:22 +08:00
id:item_content
2023-09-08 22:33:23 +08:00
radius: [5,5,5,5]
2023-03-29 18:10:34 +08:00
width: 200
height: 220
2023-03-29 15:44:36 +08:00
anchors.centerIn: parent
2023-07-27 17:46:18 +08:00
FluAcrylic{
2023-05-17 19:29:09 +08:00
anchors.fill: parent
2023-07-27 17:46:18 +08:00
tintColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
2023-07-28 16:08:58 +08:00
target: bg
2023-08-12 11:01:40 +08:00
tintOpacity: FluTheme.dark ? 0.8 : 0.9
2023-08-11 22:47:36 +08:00
blurRadius : 40
2023-07-28 16:08:58 +08:00
targetRect: Qt.rect(list.x-list.contentX+10+(control.width)*index,list.y+10,width,height)
2023-05-17 19:29:09 +08:00
}
2023-03-29 18:10:34 +08:00
Rectangle{
anchors.fill: parent
2023-09-08 22:33:23 +08:00
radius: 5
2023-11-02 15:33:59 +08:00
color:FluTheme.itemHoverColor
2023-09-17 20:36:33 +08:00
visible: item_mouse.containsMouse
}
Rectangle{
anchors.fill: parent
radius: 5
color:Qt.rgba(0,0,0,0.0)
visible: !item_mouse.containsMouse
2023-03-29 18:10:34 +08:00
}
ColumnLayout{
Image {
Layout.topMargin: 20
Layout.leftMargin: 20
Layout.preferredWidth: 50
Layout.preferredHeight: 50
source: model.icon
}
FluText{
text: model.title
2023-05-10 00:27:53 +08:00
font: FluTextStyle.Body
2023-03-29 18:10:34 +08:00
Layout.topMargin: 20
Layout.leftMargin: 20
}
FluText{
text: model.desc
Layout.topMargin: 5
Layout.preferredWidth: 160
Layout.leftMargin: 20
2023-03-29 21:43:01 +08:00
color: FluColors.Grey120
2023-03-29 18:10:34 +08:00
font.pixelSize: 12
2024-03-09 15:35:48 +08:00
wrapMode: Text.WordWrap
2023-03-29 18:10:34 +08:00
}
}
FluIcon{
iconSource: FluentIcons.OpenInNewWindow
iconSize: 15
anchors{
bottom: parent.bottom
right: parent.right
rightMargin: 10
bottomMargin: 10
2023-03-29 15:44:36 +08:00
}
}
MouseArea{
id:item_mouse
anchors.fill: parent
hoverEnabled: true
2023-08-12 11:01:40 +08:00
onWheel:
(wheel)=>{
if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
else scrollbar_header.increase()
}
2023-03-29 18:10:34 +08:00
onClicked: {
2024-03-09 15:35:48 +08:00
model.clicked(model)
2023-03-29 18:10:34 +08:00
}
2023-03-29 15:44:36 +08:00
}
}
}
}
2023-09-17 20:36:33 +08:00
ListView{
id: list
anchors{
left: parent.left
right: parent.right
bottom: parent.bottom
}
orientation: ListView.Horizontal
height: 240
model: model_header
header: Item{height: 10;width: 10}
footer: Item{height: 10;width: 10}
ScrollBar.horizontal: FluScrollBar{
id: scrollbar_header
}
clip: false
delegate: com_grallery
}
2023-03-29 18:10:34 +08:00
}
2023-03-29 15:44:36 +08:00
2023-03-29 18:10:34 +08:00
Component{
id:com_item
Item{
2023-12-20 17:17:41 +08:00
property string desc: modelData.extra.desc
2023-03-29 18:10:34 +08:00
width: 320
height: 120
FluArea{
radius: 8
width: 300
height: 100
anchors.centerIn: parent
Rectangle{
anchors.fill: parent
radius: 8
color:{
2023-11-02 15:33:59 +08:00
if(item_mouse.containsMouse){
return FluTheme.itemHoverColor
2023-03-29 18:10:34 +08:00
}
2023-11-02 15:33:59 +08:00
return FluTheme.itemNormalColor
2023-03-29 18:10:34 +08:00
}
}
Image{
id:item_icon
height: 40
width: 40
2023-12-20 17:17:41 +08:00
source: modelData.extra.image
2023-03-29 18:10:34 +08:00
anchors{
left: parent.left
leftMargin: 20
verticalCenter: parent.verticalCenter
}
}
FluText{
id:item_title
2023-03-31 22:05:25 +08:00
text:modelData.title
2023-05-10 00:27:53 +08:00
font: FluTextStyle.BodyStrong
2023-03-29 18:10:34 +08:00
anchors{
left: item_icon.right
leftMargin: 20
top: item_icon.top
}
}
FluText{
id:item_desc
2023-09-17 20:36:33 +08:00
text:desc
2023-03-29 21:43:01 +08:00
color:FluColors.Grey120
2024-03-09 15:35:48 +08:00
wrapMode: Text.WordWrap
2023-03-29 18:10:34 +08:00
elide: Text.ElideRight
2023-05-10 00:27:53 +08:00
font: FluTextStyle.Caption
2023-03-29 18:10:34 +08:00
maximumLineCount: 2
anchors{
left: item_title.left
right: parent.right
rightMargin: 20
top: item_title.bottom
topMargin: 5
}
}
2023-03-30 22:59:25 +08:00
Rectangle{
height: 12
width: 12
radius: 6
2023-11-02 15:33:59 +08:00
color: FluTheme.primaryColor
2023-03-30 22:59:25 +08:00
anchors{
right: parent.right
top: parent.top
rightMargin: 14
topMargin: 14
}
}
2023-03-29 18:10:34 +08:00
MouseArea{
id:item_mouse
anchors.fill: parent
hoverEnabled: true
onClicked: {
2023-03-31 22:05:25 +08:00
ItemsOriginal.startPageByItem(modelData)
2023-03-29 18:10:34 +08:00
}
}
}
}
}
FluText{
text: "Recently added samples"
2023-05-10 00:27:53 +08:00
font: FluTextStyle.Title
2023-03-29 18:10:34 +08:00
Layout.topMargin: 20
Layout.leftMargin: 20
}
GridView{
Layout.fillWidth: true
2023-08-12 11:01:40 +08:00
Layout.preferredHeight: contentHeight
2023-03-29 18:10:34 +08:00
cellHeight: 120
cellWidth: 320
2023-03-31 22:05:25 +08:00
model:ItemsOriginal.getRecentlyAddedData()
2023-03-29 21:43:01 +08:00
interactive: false
2023-03-29 18:10:34 +08:00
delegate: com_item
}
FluText{
text: "Recently updated samples"
2023-05-10 00:27:53 +08:00
font: FluTextStyle.Title
2023-03-29 18:10:34 +08:00
Layout.topMargin: 20
Layout.leftMargin: 20
}
GridView{
Layout.fillWidth: true
2023-08-12 11:01:40 +08:00
Layout.preferredHeight: contentHeight
2023-03-29 18:10:34 +08:00
cellHeight: 120
cellWidth: 320
2023-03-29 21:43:01 +08:00
interactive: false
2023-03-31 22:05:25 +08:00
model: ItemsOriginal.getRecentlyUpdatedData()
2023-03-29 18:10:34 +08:00
delegate: com_item
}
2023-03-29 15:44:36 +08:00
}
2024-03-09 15:35:48 +08:00