mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-24 11:40:43 +08:00
292 lines
9.4 KiB
QML
292 lines
9.4 KiB
QML
import QtQuick 2.15
|
|
import QtQuick.Layouts 1.15
|
|
import QtQuick.Window 2.15
|
|
import QtQuick.Controls 2.15
|
|
import FluentUI 1.0
|
|
import "../window"
|
|
import "../global"
|
|
|
|
FluScrollablePage{
|
|
|
|
launchMode: FluPageType.SingleTask
|
|
animationEnabled: false
|
|
header: Item{}
|
|
|
|
ListModel{
|
|
id: model_header
|
|
ListElement{
|
|
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 Initializr")
|
|
desc: qsTr("FluentUI Initializr is a Tool that helps you create and customize Fluent UI projects with various options.")
|
|
url: "https://github.com/zhuzichu520/FluentUI"
|
|
clicked: function(model){
|
|
fluent_Initializr.showDialog()
|
|
}
|
|
}
|
|
}
|
|
Item{
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 320
|
|
Image {
|
|
id: bg
|
|
fillMode:Image.PreserveAspectCrop
|
|
anchors.fill: parent
|
|
verticalAlignment: Qt.AlignTop
|
|
sourceSize: Qt.size(960,640)
|
|
source: "qrc:/example/res/image/bg_home_header.png"
|
|
}
|
|
Rectangle{
|
|
anchors.fill: parent
|
|
gradient: Gradient{
|
|
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) }
|
|
}
|
|
}
|
|
FluText{
|
|
text:"FluentUI Gallery"
|
|
font: FluTextStyle.TitleLarge
|
|
anchors{
|
|
top: parent.top
|
|
left: parent.left
|
|
topMargin: 20
|
|
leftMargin: 20
|
|
}
|
|
}
|
|
Component{
|
|
id:com_grallery
|
|
Item{
|
|
id: control
|
|
width: 220
|
|
height: 240
|
|
FluShadow{
|
|
radius:5
|
|
anchors.fill: item_content
|
|
}
|
|
FluClip{
|
|
id:item_content
|
|
radius: [5,5,5,5]
|
|
width: 200
|
|
height: 220
|
|
anchors.centerIn: parent
|
|
FluAcrylic{
|
|
anchors.fill: parent
|
|
tintColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
|
target: bg
|
|
tintOpacity: FluTheme.dark ? 0.8 : 0.9
|
|
blurRadius : 40
|
|
targetRect: Qt.rect(list.x-list.contentX+10+(control.width)*index,list.y+10,width,height)
|
|
}
|
|
Rectangle{
|
|
anchors.fill: parent
|
|
radius: 5
|
|
color:FluTheme.itemHoverColor
|
|
visible: item_mouse.containsMouse
|
|
}
|
|
Rectangle{
|
|
anchors.fill: parent
|
|
radius: 5
|
|
color:Qt.rgba(0,0,0,0.0)
|
|
visible: !item_mouse.containsMouse
|
|
}
|
|
ColumnLayout{
|
|
Image {
|
|
Layout.topMargin: 20
|
|
Layout.leftMargin: 20
|
|
Layout.preferredWidth: 50
|
|
Layout.preferredHeight: 50
|
|
source: model.icon
|
|
}
|
|
FluText{
|
|
text: model.title
|
|
font: FluTextStyle.Body
|
|
Layout.topMargin: 20
|
|
Layout.leftMargin: 20
|
|
}
|
|
FluText{
|
|
text: model.desc
|
|
Layout.topMargin: 5
|
|
Layout.preferredWidth: 160
|
|
Layout.leftMargin: 20
|
|
color: FluColors.Grey120
|
|
font.pixelSize: 12
|
|
font.family: FluTextStyle.family
|
|
wrapMode: Text.WrapAnywhere
|
|
}
|
|
}
|
|
FluIcon{
|
|
iconSource: FluentIcons.OpenInNewWindow
|
|
iconSize: 15
|
|
anchors{
|
|
bottom: parent.bottom
|
|
right: parent.right
|
|
rightMargin: 10
|
|
bottomMargin: 10
|
|
}
|
|
}
|
|
MouseArea{
|
|
id:item_mouse
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onWheel:
|
|
(wheel)=>{
|
|
if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
|
|
else scrollbar_header.increase()
|
|
}
|
|
onClicked: {
|
|
model.clicked(model)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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
|
|
}
|
|
}
|
|
|
|
Component{
|
|
id:com_item
|
|
Item{
|
|
property string desc: modelData.extra.desc
|
|
width: 320
|
|
height: 120
|
|
FluFrame{
|
|
radius: 8
|
|
width: 300
|
|
height: 100
|
|
anchors.centerIn: parent
|
|
Rectangle{
|
|
anchors.fill: parent
|
|
radius: 8
|
|
color:{
|
|
if(item_mouse.containsMouse){
|
|
return FluTheme.itemHoverColor
|
|
}
|
|
return FluTheme.itemNormalColor
|
|
}
|
|
}
|
|
Image{
|
|
id:item_icon
|
|
height: 40
|
|
width: 40
|
|
source: modelData.extra.image
|
|
anchors{
|
|
left: parent.left
|
|
leftMargin: 20
|
|
verticalCenter: parent.verticalCenter
|
|
}
|
|
}
|
|
FluText{
|
|
id:item_title
|
|
text:modelData.title
|
|
font: FluTextStyle.BodyStrong
|
|
anchors{
|
|
left: item_icon.right
|
|
leftMargin: 20
|
|
top: item_icon.top
|
|
}
|
|
}
|
|
FluText{
|
|
id:item_desc
|
|
text:desc
|
|
color:FluColors.Grey120
|
|
wrapMode: Text.WrapAnywhere
|
|
elide: Text.ElideRight
|
|
font: FluTextStyle.Caption
|
|
maximumLineCount: 2
|
|
anchors{
|
|
left: item_title.left
|
|
right: parent.right
|
|
rightMargin: 20
|
|
top: item_title.bottom
|
|
topMargin: 5
|
|
}
|
|
}
|
|
|
|
Rectangle{
|
|
height: 12
|
|
width: 12
|
|
radius: 6
|
|
color: FluTheme.primaryColor
|
|
anchors{
|
|
right: parent.right
|
|
top: parent.top
|
|
rightMargin: 14
|
|
topMargin: 14
|
|
}
|
|
}
|
|
|
|
MouseArea{
|
|
id:item_mouse
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onClicked: {
|
|
ItemsOriginal.startPageByItem(modelData)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
FluText{
|
|
text: "Recently added samples"
|
|
font: FluTextStyle.Title
|
|
Layout.topMargin: 20
|
|
Layout.leftMargin: 20
|
|
}
|
|
|
|
GridView{
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: contentHeight
|
|
cellHeight: 120
|
|
cellWidth: 320
|
|
model:ItemsOriginal.getRecentlyAddedData()
|
|
interactive: false
|
|
delegate: com_item
|
|
}
|
|
|
|
FluText{
|
|
text: "Recently updated samples"
|
|
font: FluTextStyle.Title
|
|
Layout.topMargin: 20
|
|
Layout.leftMargin: 20
|
|
}
|
|
|
|
GridView{
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: contentHeight
|
|
cellHeight: 120
|
|
cellWidth: 320
|
|
interactive: false
|
|
model: ItemsOriginal.getRecentlyUpdatedData()
|
|
delegate: com_item
|
|
}
|
|
|
|
}
|
|
|