FluentUI/example/T_Home.qml
朱子楚\zhuzi 5a1b10fef8 update
2023-03-29 21:43:01 +08:00

296 lines
9.2 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
FluScrollablePage{
leftPadding:10
rightPadding:0
bottomPadding:20
ListModel{
id:model_header
ListElement{
icon:"qrc:/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 {
fillMode:Image.PreserveAspectCrop
anchors.fill: parent
verticalAlignment: Qt.AlignTop
source: "qrc:/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"
fontStyle: FluText.TitleLarge
anchors{
top: parent.top
left: parent.left
topMargin: 20
leftMargin: 20
}
}
ListView{
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{
width: 220
height: 240
FluArea{
radius: 8
width: 200
height: 220
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)
}
}
}
ColumnLayout{
Image {
Layout.topMargin: 20
Layout.leftMargin: 20
Layout.preferredWidth: 50
Layout.preferredHeight: 50
source: model.icon
}
FluText{
text: model.title
fontStyle: FluText.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: {
if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
else scrollbar_header.increase()
}
onClicked: {
Qt.openUrlExternally(model.url)
}
}
}
}
}
}
ListModel{
id:model_added
ListElement{
title:"TabView"
icon:"qrc:/res/image/control/TabView.png"
desc:"A control that displays a collection of tabs thatcan be used to display several documents."
}
ListElement{
title:"MediaPlayer"
icon:"qrc:/res/image/control/MediaPlayerElement.png"
desc:"A control to display video and image content"
}
}
ListModel{
id:model_update
ListElement{
title:"Buttons"
icon:"qrc:/res/image/control/Button.png"
desc:"A control that responds to user input and raisesa Click event."
}
ListElement{
title:"InfoBar"
icon:"qrc:/res/image/control/InfoBar.png"
desc:"An inline message to display app-wide statuschange information."
}
ListElement{
title:"Slider"
icon:"qrc:/res/image/control/Slider.png"
desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
}
ListElement{
title:"CheckBox"
icon:"qrc:/res/image/control/Checkbox.png"
desc:"A control that a user can select or clear."
}
}
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: model.icon
anchors{
left: parent.left
leftMargin: 20
verticalCenter: parent.verticalCenter
}
}
FluText{
id:item_title
text:model.title
fontStyle: FluText.BodyStrong
anchors{
left: item_icon.right
leftMargin: 20
top: item_icon.top
}
}
FluText{
id:item_desc
text:model.desc
color:FluColors.Grey120
wrapMode: Text.WrapAnywhere
elide: Text.ElideRight
fontStyle: FluText.Caption
maximumLineCount: 2
anchors{
left: item_title.left
right: parent.right
rightMargin: 20
top: item_title.bottom
topMargin: 5
}
}
MouseArea{
id:item_mouse
anchors.fill: parent
hoverEnabled: true
onClicked: {
rootwindow.startPageByTitle(model.title)
}
}
}
}
}
FluText{
text: "Recently added samples"
fontStyle: FluText.Title
Layout.topMargin: 20
Layout.leftMargin: 20
}
GridView{
Layout.fillWidth: true
implicitHeight: contentHeight
cellHeight: 120
cellWidth: 320
model:model_added
interactive: false
delegate: com_item
}
FluText{
text: "Recently updated samples"
fontStyle: FluText.Title
Layout.topMargin: 20
Layout.leftMargin: 20
}
GridView{
Layout.fillWidth: true
implicitHeight: contentHeight
cellHeight: 120
cellWidth: 320
interactive: false
model: model_update
delegate: com_item
}
}