FluentUI/example/qml/page/T_Home.qml
2023-05-22 16:17:51 +08:00

279 lines
8.9 KiB
QML

import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import "qrc:///example/qml/global/"
import FluentUI
FluScrollablePage{
ListModel{
id:model_header
ListElement{
icon:"qrc:/example/res/image/ic_home_github.png"
title:"FluentUI GitHub"
desc:"The latest FluentUI controls and styles for your applications."
url:"https://github.com/zhuzichu520/FluentUI"
}
}
Item{
Layout.fillWidth: true
height: 320
Image {
id: bg
fillMode:Image.PreserveAspectCrop
anchors.fill: parent
verticalAlignment: Qt.AlignTop
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
}
}
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:Item{
id: control
width: 220
height: 240
FluArea{
radius: 8
width: 200
height: 220
anchors.centerIn: parent
color: 'transparent'
FluAcrylic {
sourceItem:bg
anchors.fill: parent
color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
rectX: list.x-list.contentX+10+(control.width)*index
rectY: list.y+10
acrylicOpacity:0.8
}
Rectangle{
anchors.fill: parent
radius: 8
color:{
if(FluTheme.dark){
if(item_mouse.containsMouse){
return Qt.rgba(1,1,1,0.03)
}
return Qt.rgba(0,0,0,0)
}else{
if(item_mouse.containsMouse){
return Qt.rgba(0,0,0,0.03)
}
return Qt.rgba(0,0,0,0)
}
}
}
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
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: {
Qt.openUrlExternally(model.url)
}
}
}
}
}
}
Component{
id:com_item
Item{
width: 320
height: 120
FluArea{
radius: 8
width: 300
height: 100
anchors.centerIn: parent
Rectangle{
anchors.fill: parent
radius: 8
color:{
if(FluTheme.dark){
if(item_mouse.containsMouse){
return Qt.rgba(1,1,1,0.03)
}
return Qt.rgba(0,0,0,0)
}else{
if(item_mouse.containsMouse){
return Qt.rgba(0,0,0,0.03)
}
return Qt.rgba(0,0,0,0)
}
}
}
Image{
id:item_icon
height: 40
width: 40
source: modelData.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:modelData.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.dark
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
implicitHeight: 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
implicitHeight: contentHeight
cellHeight: 120
cellWidth: 320
interactive: false
model: ItemsOriginal.getRecentlyUpdatedData()
delegate: com_item
}
}