FluentUI/example/qml/page/T_Home.qml

279 lines
8.8 KiB
QML
Raw Normal View History

2023-03-30 21:52:55 +08:00
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
2023-04-27 09:38:57 +08:00
import "qrc:///example/qml/global/"
2023-03-30 21:52:55 +08:00
import FluentUI
2023-03-29 15:44:36 +08:00
FluScrollablePage{
ListModel{
id:model_header
ListElement{
2023-04-27 09:38:57 +08:00
icon:"qrc:/example/res/image/ic_home_github.png"
2023-03-29 15:44:36 +08:00
title:"FluentUI GitHub"
2023-03-29 18:10:34 +08:00
desc:"The latest FluentUI controls and styles for your applications."
url:"https://github.com/zhuzichu520/FluentUI"
2023-03-29 15:44:36 +08:00
}
}
Item{
Layout.fillWidth: true
height: 320
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-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
}
}
ListView{
2023-05-17 20:34:04 +08:00
id: list
2023-03-29 15:44:36 +08:00
anchors{
left: parent.left
right: parent.right
bottom: parent.bottom
}
orientation: ListView.Horizontal
2023-03-29 18:10:34 +08:00
height: 240
2023-03-29 15:44:36 +08:00
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{
2023-05-17 19:29:09 +08:00
id: control
2023-03-29 18:10:34 +08:00
width: 220
height: 240
2023-03-29 15:44:36 +08:00
FluArea{
radius: 8
2023-03-29 18:10:34 +08:00
width: 200
height: 220
2023-03-29 15:44:36 +08:00
anchors.centerIn: parent
2023-05-17 19:29:09 +08:00
color: 'transparent'
FluAcrylic {
sourceItem:bg
anchors.fill: parent
color: FluTheme.dark ? 'black' : 'white'
2023-05-17 20:34:04 +08:00
rectX: list.x-list.contentX+10+(control.width)*index
rectY: list.y+10
2023-05-17 19:29:09 +08:00
acrylicOpacity:0.5
}
2023-03-29 18:10:34 +08:00
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
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
wrapMode: Text.WrapAnywhere
}
}
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-04-01 21:01:46 +08:00
onWheel: (wheel)=>{
2023-03-29 15:44:36 +08:00
if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
else scrollbar_header.increase()
}
2023-03-29 18:10:34 +08:00
onClicked: {
Qt.openUrlExternally(model.url)
}
2023-03-29 15:44:36 +08:00
}
}
}
}
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{
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
2023-03-31 22:05:25 +08:00
source: modelData.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-03-31 22:05:25 +08:00
text:modelData.desc
2023-03-29 21:43:01 +08:00
color:FluColors.Grey120
2023-03-29 18:10:34 +08:00
wrapMode: Text.WrapAnywhere
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
color: FluTheme.primaryColor.dark
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
implicitHeight: contentHeight
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
implicitHeight: contentHeight
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
}