FluentUI/example/qml/page/T_Rectangle.qml

149 lines
4.2 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.Controls 2.15
import QtQuick.Window 2.15
import FluentUI 1.0
2023-06-12 16:46:02 +08:00
import "qrc:///example/qml/component"
2023-08-26 17:20:30 +08:00
import "../component"
2023-03-01 11:58:30 +08:00
2023-03-10 18:08:32 +08:00
FluScrollablePage{
2023-03-28 17:53:46 +08:00
2023-03-10 18:08:32 +08:00
title:"Rectangle"
2023-04-06 17:32:21 +08:00
FluArea{
Layout.fillWidth: true
2023-03-10 18:08:32 +08:00
Layout.topMargin: 20
2023-07-03 11:50:26 +08:00
height: 460
2023-04-06 17:32:21 +08:00
paddings: 10
Column{
spacing: 15
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
2023-03-01 11:58:30 +08:00
}
2023-04-06 17:32:21 +08:00
RowLayout{
Layout.topMargin: 20
FluRectangle{
width: 50
height: 50
color:"#0078d4"
radius:[0,0,0,0]
}
FluRectangle{
width: 50
height: 50
color:"#744da9"
radius:[15,15,15,15]
}
FluRectangle{
width: 50
height: 50
color:"#ffeb3b"
radius:[15,0,0,0]
}
FluRectangle{
width: 50
height: 50
color:"#f7630c"
radius:[0,15,0,0]
}
FluRectangle{
width: 50
height: 50
color:"#e71123"
radius:[0,0,15,0]
}
FluRectangle{
width: 50
height: 50
color:"#b4009e"
radius:[0,0,0,15]
}
2023-03-01 11:58:30 +08:00
}
2023-04-06 17:32:21 +08:00
FluText{
text:"配合图片使用"
2023-05-10 20:09:32 +08:00
font: FluTextStyle.Subtitle
2023-04-06 17:32:21 +08:00
Layout.topMargin: 20
2023-03-01 11:58:30 +08:00
}
2023-04-06 17:32:21 +08:00
RowLayout{
spacing: 14
FluRectangle{
width: 50
height: 50
radius:[25,0,25,25]
Image {
asynchronous: true
anchors.fill: parent
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/svg/avatar_1.svg"
2023-04-06 17:32:21 +08:00
sourceSize: Qt.size(width,height)
}
}
FluRectangle{
width: 50
height: 50
radius:[10,10,10,10]
Image {
asynchronous: true
anchors.fill: parent
sourceSize: Qt.size(width,height)
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/svg/avatar_2.svg"
2023-04-06 17:32:21 +08:00
}
}
FluRectangle{
width: 50
height: 50
radius:[25,25,25,25]
Image {
asynchronous: true
anchors.fill: parent
sourceSize: Qt.size(width,height)
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/svg/avatar_3.svg"
2023-04-06 17:32:21 +08:00
}
}
FluRectangle{
width: 50
height: 50
radius:[0,25,25,25]
Image {
asynchronous: true
anchors.fill: parent
sourceSize: Qt.size(width,height)
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/svg/avatar_4.svg"
2023-04-06 17:32:21 +08:00
}
}
}
FluRectangle{
2023-05-12 22:22:55 +08:00
width: 1920/5
height: 1200/5
2023-09-08 22:33:23 +08:00
radius:[8,8,8,8]
2023-04-06 17:32:21 +08:00
Image {
asynchronous: true
2023-05-12 22:22:55 +08:00
source: "qrc:/example/res/image/banner_1.jpg"
2023-04-06 17:32:21 +08:00
anchors.fill: parent
2023-05-17 11:42:03 +08:00
sourceSize: Qt.size(2*width,2*height)
2023-04-06 17:32:21 +08:00
}
2023-05-12 22:22:55 +08:00
Layout.topMargin: 20
2023-03-01 11:58:30 +08:00
}
}
}
2023-04-06 17:32:21 +08:00
CodeExpander{
Layout.fillWidth: true
2023-04-19 17:25:46 +08:00
Layout.topMargin: -1
2023-04-06 17:32:21 +08:00
code:'FluRectangle{
radius: [25,25,25,25]
width: 50
height: 50
Image{
asynchronous: true
anchors.fill: parent
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/svg/avatar_4.svg"
2023-04-06 17:32:21 +08:00
sourceSize: Qt.size(width,height)
}
}'
2023-03-10 18:08:32 +08:00
}
2023-04-06 17:32:21 +08:00
2023-03-01 11:58:30 +08:00
}