amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-23 11:17:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
朱子楚\zhuzi 2023-09-08 22:33:23 +08:00
parent 4b01fcf2b4
commit 24f3cb1027
24 changed files with 207 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/qml-Qt6/page/T_Acrylic.qml
View File

@ -50,7 +50,7 @@ FluScrollablePage{
FluRectangle{ FluRectangle{
width: 1920/4 width: 1920/4
height: 1200/4 height: 1200/4
radius:[15,15,15,15] radius:[8,8,8,8]
Image { Image {
id:image id:image
asynchronous: true asynchronous: true

109
example/qml-Qt6/page/T_Carousel.qml
View File

@ -36,20 +36,28 @@ FluScrollablePage{
FluText{ FluText{
text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件" text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
} }
FluCarousel{ Item{
radius:[5,5,5,5] width: 400
delegate: Component{ height: 300
Image { FluShadow{
anchors.fill: parent radius: 8
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
} }
Layout.topMargin: 20 FluCarousel{
Layout.leftMargin: 5 anchors.fill: parent
Component.onCompleted: { radius:[8,8,8,8]
model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}] delegate: Component{
Image {
anchors.fill: parent
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
}
Layout.topMargin: 20
Layout.leftMargin: 5
Component.onCompleted: {
model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
}
} }
} }
} }
@ -66,46 +74,55 @@ FluScrollablePage{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
left:parent.left left:parent.left
} }
FluCarousel{ Item{
radius:[15,15,15,15] width: 400
loopTime:1500 height: 300
indicatorGravity: Qt.AlignHCenter | Qt.AlignTop FluShadow{
indicatorMarginTop:15 radius: 8
delegate: Component{ }
Item{ FluCarousel{
anchors.fill: parent anchors.fill: parent
Image { radius:[8,8,8,8]
loopTime:1500
indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
indicatorMarginTop:15
delegate: Component{
Item{
anchors.fill: parent anchors.fill: parent
source: model.url Image {
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Rectangle{
height: 40
width: parent.width
anchors.bottom: parent.bottom
color: "#33000000"
FluText{
anchors.fill: parent anchors.fill: parent
verticalAlignment: Qt.AlignVCenter source: model.url
horizontalAlignment: Qt.AlignHCenter asynchronous: true
text:model.title fillMode:Image.PreserveAspectCrop
color: FluColors.Grey10 }
font.pixelSize: 15 Rectangle{
height: 40
width: parent.width
anchors.bottom: parent.bottom
color: "#33000000"
FluText{
anchors.fill: parent
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
text:model.title
color: FluColors.Grey10
font.pixelSize: 15
}
} }
} }
} }
} Layout.topMargin: 20
Layout.topMargin: 20 Layout.leftMargin: 5
Layout.leftMargin: 5 Component.onCompleted: {
Component.onCompleted: { var arr = []
var arr = [] arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"}) arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"}) arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"}) model = arr
model = arr }
} }
} }
} }
} }

6
example/qml-Qt6/page/T_Home.qml
View File

@ -70,12 +70,12 @@ FluScrollablePage{
width: 220 width: 220
height: 240 height: 240
FluShadow{ FluShadow{
radius:8 radius:5
anchors.fill: item_content anchors.fill: item_content
} }
FluItem{ FluItem{
id:item_content id:item_content
radius: [8,8,8,8] radius: [5,5,5,5]
width: 200 width: 200
height: 220 height: 220
anchors.centerIn: parent anchors.centerIn: parent
@ -89,7 +89,7 @@ FluScrollablePage{
} }
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
radius: 8 radius: 5
color:{ color:{
if(FluTheme.dark){ if(FluTheme.dark){
if(item_mouse.containsMouse){ if(item_mouse.containsMouse){

2
example/qml-Qt6/page/T_Rectangle.qml
View File

@ -116,7 +116,7 @@ FluScrollablePage{
FluRectangle{ FluRectangle{
width: 1920/5 width: 1920/5
height: 1200/5 height: 1200/5
radius:[15,15,15,15] radius:[8,8,8,8]
Image { Image {
asynchronous: true asynchronous: true
source: "qrc:/example/res/image/banner_1.jpg" source: "qrc:/example/res/image/banner_1.jpg"

3
example/qml-Qt6/page/T_Screenshot.qml
View File

@ -30,9 +30,10 @@ FluScrollablePage{
Layout.topMargin: 10 Layout.topMargin: 10
Layout.leftMargin: 4 Layout.leftMargin: 4
Layout.bottomMargin: 4 Layout.bottomMargin: 4
radius: 4
color: FluTheme.dark ? FluColors.Black : FluColors.White color: FluTheme.dark ? FluColors.Black : FluColors.White
FluShadow{ FluShadow{
radius: 0 radius: 4
color: FluTheme.primaryColor.dark color: FluTheme.primaryColor.dark
} }
Image{ Image{

4
example/qml-Qt6/window/MainWindow.qml
View File

@ -164,9 +164,9 @@ CustomWindow {
height: parent.height height: parent.height
z:999 z:999
//Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式 //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
pageMode: FluNavigationViewType.Stack // pageMode: FluNavigationViewType.Stack
//NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐） //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
// pageMode: FluNavigationViewType.NoStack pageMode: FluNavigationViewType.NoStack
items: ItemsOriginal items: ItemsOriginal
footerItems:ItemsFooter footerItems:ItemsFooter
topPadding:FluTools.isMacos() ? 20 : 0 topPadding:FluTools.isMacos() ? 20 : 0

2
example/qml/page/T_Acrylic.qml
View File

@ -51,7 +51,7 @@ FluScrollablePage{
FluRectangle{ FluRectangle{
width: 1920/4 width: 1920/4
height: 1200/4 height: 1200/4
radius:[15,15,15,15] radius:[8,8,8,8]
Image { Image {
id:image id:image
asynchronous: true asynchronous: true

109
example/qml/page/T_Carousel.qml
View File

@ -37,20 +37,28 @@ FluScrollablePage{
FluText{ FluText{
text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件" text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
} }
FluCarousel{ Item{
radius:[5,5,5,5] width: 400
delegate: Component{ height: 300
Image { FluShadow{
anchors.fill: parent radius: 8
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
} }
Layout.topMargin: 20 FluCarousel{
Layout.leftMargin: 5 anchors.fill: parent
Component.onCompleted: { radius:[8,8,8,8]
model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}] delegate: Component{
Image {
anchors.fill: parent
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
}
Layout.topMargin: 20
Layout.leftMargin: 5
Component.onCompleted: {
model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
}
} }
} }
} }
@ -67,46 +75,55 @@ FluScrollablePage{
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
left:parent.left left:parent.left
} }
FluCarousel{ Item{
radius:[15,15,15,15] width: 400
loopTime:1500 height: 300
indicatorGravity: Qt.AlignHCenter | Qt.AlignTop FluShadow{
indicatorMarginTop:15 radius: 8
delegate: Component{ }
Item{ FluCarousel{
anchors.fill: parent anchors.fill: parent
Image { radius:[8,8,8,8]
loopTime:1500
indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
indicatorMarginTop:15
delegate: Component{
Item{
anchors.fill: parent anchors.fill: parent
source: model.url Image {
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Rectangle{
height: 40
width: parent.width
anchors.bottom: parent.bottom
color: "#33000000"
FluText{
anchors.fill: parent anchors.fill: parent
verticalAlignment: Qt.AlignVCenter source: model.url
horizontalAlignment: Qt.AlignHCenter asynchronous: true
text:model.title fillMode:Image.PreserveAspectCrop
color: FluColors.Grey10 }
font.pixelSize: 15 Rectangle{
height: 40
width: parent.width
anchors.bottom: parent.bottom
color: "#33000000"
FluText{
anchors.fill: parent
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
text:model.title
color: FluColors.Grey10
font.pixelSize: 15
}
} }
} }
} }
} Layout.topMargin: 20
Layout.topMargin: 20 Layout.leftMargin: 5
Layout.leftMargin: 5 Component.onCompleted: {
Component.onCompleted: { var arr = []
var arr = [] arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"}) arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"}) arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"}) model = arr
model = arr }
} }
} }
} }
} }

6
example/qml/page/T_Home.qml
View File

@ -71,12 +71,12 @@ FluScrollablePage{
width: 220 width: 220
height: 240 height: 240
FluShadow{ FluShadow{
radius:8 radius:5
anchors.fill: item_content anchors.fill: item_content
} }
FluItem{ FluItem{
id:item_content id:item_content
radius: [8,8,8,8] radius: [5,5,5,5]
width: 200 width: 200
height: 220 height: 220
anchors.centerIn: parent anchors.centerIn: parent
@ -90,7 +90,7 @@ FluScrollablePage{
} }
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
radius: 8 radius: 5
color:{ color:{
if(FluTheme.dark){ if(FluTheme.dark){
if(item_mouse.containsMouse){ if(item_mouse.containsMouse){

2
example/qml/page/T_Rectangle.qml
View File

@ -117,7 +117,7 @@ FluScrollablePage{
FluRectangle{ FluRectangle{
width: 1920/5 width: 1920/5
height: 1200/5 height: 1200/5
radius:[15,15,15,15] radius:[8,8,8,8]
Image { Image {
asynchronous: true asynchronous: true
source: "qrc:/example/res/image/banner_1.jpg" source: "qrc:/example/res/image/banner_1.jpg"

3
example/qml/page/T_Screenshot.qml
View File

@ -31,9 +31,10 @@ FluScrollablePage{
Layout.topMargin: 10 Layout.topMargin: 10
Layout.leftMargin: 4 Layout.leftMargin: 4
Layout.bottomMargin: 4 Layout.bottomMargin: 4
radius: 4
color: FluTheme.dark ? FluColors.Black : FluColors.White color: FluTheme.dark ? FluColors.Black : FluColors.White
FluShadow{ FluShadow{
radius: 0 radius: 4
color: FluTheme.primaryColor.dark color: FluTheme.primaryColor.dark
} }
Image{ Image{

6
example/qml/window/MainWindow.qml
View File

@ -139,7 +139,7 @@ CustomWindow {
id:loader id:loader
lazy: true lazy: true
anchors.fill: parent anchors.fill: parent
source: "https://zhu-zichu.gitee.io/Qt6_156_LieflatPage.qml" source: "https://zhu-zichu.gitee.io/Qt5_156_LieflatPage.qml"
} }
} }
front: Item{ front: Item{
@ -165,9 +165,9 @@ CustomWindow {
height: parent.height height: parent.height
z:999 z:999
//Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式 //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
pageMode: FluNavigationViewType.Stack // pageMode: FluNavigationViewType.Stack
//NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐） //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
// pageMode: FluNavigationViewType.NoStack pageMode: FluNavigationViewType.NoStack
items: ItemsOriginal items: ItemsOriginal
footerItems:ItemsFooter footerItems:ItemsFooter
topPadding:FluTools.isMacos() ? 20 : 0 topPadding:FluTools.isMacos() ? 20 : 0

2
src/Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml
View File

@ -23,7 +23,6 @@ Rectangle {
radius: 4 radius: 4
border.width: 1 border.width: 1
border.color: dividerColor border.color: dividerColor
Component.onCompleted: { Component.onCompleted: {
if(current){ if(current){
const date = current const date = current
@ -33,7 +32,6 @@ Rectangle {
text_date.text = year+"-"+(month+1)+"-"+day text_date.text = year+"-"+(month+1)+"-"+day
} }
} }
MouseArea{ MouseArea{
id:mouse_area id:mouse_area
hoverEnabled: true hoverEnabled: true

6
src/Qt5/imports/FluentUI/Controls/FluCalendarView.qml
View File

@ -7,6 +7,7 @@ Item {
property var date: new Date() property var date: new Date()
property var currentDate : new Date() property var currentDate : new Date()
property var toDay: new Date() property var toDay: new Date()
property int radius: 5
signal dateClicked(var date) signal dateClicked(var date)
id:control id:control
width: 280 width: 280
@ -214,10 +215,7 @@ Item {
} }
FluArea{ FluArea{
anchors.fill: parent anchors.fill: parent
radius: 5 radius: control.radius
FluShadow{
radius: 5
}
Rectangle{ Rectangle{
id:layout_divider id:layout_divider
height: 1 height: 1

3
src/Qt5/imports/FluentUI/Controls/FluChart.qml
View File

@ -22,7 +22,6 @@ Canvas {
jsChart.update(); jsChart.update();
chartAnimator.restart(); chartAnimator.restart();
} }
opacity:
MouseArea { MouseArea {
id: event id: event
anchors.fill: control anchors.fill: control
@ -90,7 +89,7 @@ Canvas {
control.requestPaint(); control.requestPaint();
} }
onPaint: { onPaint: {
if(control.getContext('2d') !== null && memorizedContext !== control.getContext('2d') || memorizedData !== control.chartData || memorizedOptions !== control.chartOptions) { if(control.getContext('2d') !== null && memorizedContext !== control.getContext('2d') || memorizedData !== control.chartData || memorizedOptions !== control.chartOptions) {
var ctx = control.getContext('2d'); var ctx = control.getContext('2d');
jsChart = Chart.build(ctx, { jsChart = Chart.build(ctx, {

7
src/Qt5/imports/FluentUI/Controls/FluColorView.qml
View File

@ -4,15 +4,14 @@ import FluentUI 1.0
import "ColorPicker" import "ColorPicker"
Item { Item {
id:control
property alias colorValue: color_picker.colorValue property alias colorValue: color_picker.colorValue
property int radius: 5
width: color_picker.width+10 width: color_picker.width+10
height: color_picker.height height: color_picker.height
FluArea{ FluArea{
anchors.fill: parent anchors.fill: parent
radius: 5 radius: control.radius
FluShadow{
radius: 5
}
ColorPicker{ ColorPicker{
id:color_picker id:color_picker
} }

40
src/Qt5/imports/FluentUI/Controls/FluScrollBar.qml
View File

@ -20,12 +20,12 @@ T.ScrollBar {
property int minLine : 2 property int minLine : 2
property int maxLine : 6 property int maxLine : 6
} }
verticalPadding : vertical ? 15 : 2 verticalPadding : vertical ? 15 : 3
horizontalPadding : horizontal ? 15 : 2 horizontalPadding : horizontal ? 15 : 3
background: Rectangle{ background: Rectangle{
id:back_rect id:back_rect
radius: 5 radius: 5
color:FluTheme.dark ? Qt.rgba(44/255,44/255,44/255,1) : Qt.rgba(255/255,255/255,255/255,1) color:FluTheme.dark ? Qt.rgba(44/255,44/255,44/255,1) : Qt.rgba(255/255,255/255,255/255,1)
opacity:{ opacity:{
if(vertical){ if(vertical){
return d.maxLine === Number(rect_bar.width) return d.maxLine === Number(rect_bar.width)
@ -34,21 +34,21 @@ T.ScrollBar {
} }
Behavior on opacity { Behavior on opacity {
NumberAnimation{ NumberAnimation{
duration: 167 duration: 50
} }
} }
} }
FluIconButton{ FluIconButton{
width: 10 width: 12
height: 10 height: 12
iconSize: 6 iconSize: 8
verticalPadding: 0 verticalPadding: 0
horizontalPadding: 0 horizontalPadding: 0
visible: control.horizontal visible: control.horizontal
opacity: back_rect.opacity opacity: back_rect.opacity
anchors{ anchors{
left: parent.left left: parent.left
leftMargin: 4 leftMargin: 2
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
iconColor: control.color iconColor: control.color
@ -58,16 +58,16 @@ T.ScrollBar {
} }
} }
FluIconButton{ FluIconButton{
width: 10 width: 12
height: 10 height: 12
iconSize: 6 iconSize: 8
verticalPadding: 0 verticalPadding: 0
horizontalPadding: 0 horizontalPadding: 0
iconColor: control.color iconColor: control.color
opacity: back_rect.opacity opacity: back_rect.opacity
anchors{ anchors{
right: parent.right right: parent.right
rightMargin: 4 rightMargin: 2
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
visible: control.horizontal visible: control.horizontal
@ -77,16 +77,16 @@ T.ScrollBar {
} }
} }
FluIconButton{ FluIconButton{
width: 10 width: 12
height: 10 height: 12
iconSize: 6 iconSize: 8
verticalPadding: 0 verticalPadding: 0
horizontalPadding: 0 horizontalPadding: 0
iconColor: control.color iconColor: control.color
opacity: back_rect.opacity opacity: back_rect.opacity
anchors{ anchors{
top: parent.top top: parent.top
topMargin: 4 topMargin: 2
horizontalCenter: parent.horizontalCenter horizontalCenter: parent.horizontalCenter
} }
visible: control.vertical visible: control.vertical
@ -96,16 +96,16 @@ T.ScrollBar {
} }
} }
FluIconButton{ FluIconButton{
width: 10 width: 12
height: 10 height: 12
iconSize: 6 iconSize: 8
verticalPadding: 0 verticalPadding: 0
horizontalPadding: 0 horizontalPadding: 0
iconColor: control.color iconColor: control.color
opacity: back_rect.opacity opacity: back_rect.opacity
anchors{ anchors{
bottom: parent.bottom bottom: parent.bottom
bottomMargin: 4 bottomMargin: 2
horizontalCenter: parent.horizontalCenter horizontalCenter: parent.horizontalCenter
} }
visible: control.vertical visible: control.vertical

10
src/Qt5/imports/FluentUI/Controls/FluShadow.qml
View File

@ -4,8 +4,8 @@ import FluentUI 1.0
Item { Item {
//高性能阴影！！！比DropShadow阴影性能高出数倍！！！ //高性能阴影！！！比DropShadow阴影性能高出数倍！！！
property color color: FluTheme.dark ? "#999999" : "#999999" property color color: FluTheme.dark ? "#FFFFFF" : "#999999"
property int elevation: 5 property int elevation: 6
property int radius: 4 property int radius: 4
id:control id:control
anchors.fill: parent anchors.fill: parent
@ -14,9 +14,9 @@ Item {
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
color: "#00000000" color: "#00000000"
opacity: 0.02 * (elevation-index+1) opacity: 0.01 * (elevation-index+1)
anchors.margins: -index+1 anchors.margins: -index
radius: control.radius radius: control.radius+index
border.width: index border.width: index
border.color: control.color border.color: control.color
} }

2
src/Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml
View File

@ -23,7 +23,6 @@ Rectangle {
radius: 4 radius: 4
border.width: 1 border.width: 1
border.color: dividerColor border.color: dividerColor
Component.onCompleted: { Component.onCompleted: {
if(current){ if(current){
const date = current const date = current
@ -33,7 +32,6 @@ Rectangle {
text_date.text = year+"-"+(month+1)+"-"+day text_date.text = year+"-"+(month+1)+"-"+day
} }
} }
MouseArea{ MouseArea{
id:mouse_area id:mouse_area
hoverEnabled: true hoverEnabled: true

6
src/Qt6/imports/FluentUI/Controls/FluCalendarView.qml
View File

@ -7,6 +7,7 @@ Item {
property var date: new Date() property var date: new Date()
property var currentDate : new Date() property var currentDate : new Date()
property var toDay: new Date() property var toDay: new Date()
property int radius: 5
signal dateClicked(var date) signal dateClicked(var date)
id:control id:control
width: 280 width: 280
@ -214,10 +215,7 @@ Item {
} }
FluArea{ FluArea{
anchors.fill: parent anchors.fill: parent
radius: 5 radius: control.radius
FluShadow{
radius: 5
}
Rectangle{ Rectangle{
id:layout_divider id:layout_divider
height: 1 height: 1

2
src/Qt6/imports/FluentUI/Controls/FluChart.qml
View File

@ -1,4 +1,4 @@
import QtQuick 2.13 import QtQuick
import "./../JS/Chart.js" as Chart import "./../JS/Chart.js" as Chart
Canvas { Canvas {

7
src/Qt6/imports/FluentUI/Controls/FluColorView.qml
View File

@ -4,15 +4,14 @@ import FluentUI
import "ColorPicker" import "ColorPicker"
Item { Item {
id:control
property alias colorValue: color_picker.colorValue property alias colorValue: color_picker.colorValue
property int radius: 5
width: color_picker.width+10 width: color_picker.width+10
height: color_picker.height height: color_picker.height
FluArea{ FluArea{
anchors.fill: parent anchors.fill: parent
radius: 5 radius: control.radius
FluShadow{
radius: 5
}
ColorPicker{ ColorPicker{
id:color_picker id:color_picker
} }

40
src/Qt6/imports/FluentUI/Controls/FluScrollBar.qml
View File

@ -21,12 +21,12 @@ T.ScrollBar {
property int minLine : 2 property int minLine : 2
property int maxLine : 6 property int maxLine : 6
} }
verticalPadding : vertical ? 15 : 2 verticalPadding : vertical ? 15 : 3
horizontalPadding : horizontal ? 15 : 2 horizontalPadding : horizontal ? 15 : 3
background: Rectangle{ background: Rectangle{
id:back_rect id:back_rect
radius: 5 radius: 5
color:FluTheme.dark ? Qt.rgba(44/255,44/255,44/255,1) : Qt.rgba(255/255,255/255,255/255,1) color:FluTheme.dark ? Qt.rgba(44/255,44/255,44/255,1) : Qt.rgba(255/255,255/255,255/255,1)
opacity:{ opacity:{
if(vertical){ if(vertical){
return d.maxLine === Number(rect_bar.width) return d.maxLine === Number(rect_bar.width)
@ -35,21 +35,21 @@ T.ScrollBar {
} }
Behavior on opacity { Behavior on opacity {
NumberAnimation{ NumberAnimation{
duration: 167 duration: 50
} }
} }
} }
FluIconButton{ FluIconButton{
width: 10 width: 12
height: 10 height: 12
iconSize: 6 iconSize: 8
verticalPadding: 0 verticalPadding: 0
horizontalPadding: 0 horizontalPadding: 0
visible: control.horizontal visible: control.horizontal
opacity: back_rect.opacity opacity: back_rect.opacity
anchors{ anchors{
left: parent.left left: parent.left
leftMargin: 4 leftMargin: 2
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
iconColor: control.color iconColor: control.color
@ -59,16 +59,16 @@ T.ScrollBar {
} }
} }
FluIconButton{ FluIconButton{
width: 10 width: 12
height: 10 height: 12
iconSize: 6 iconSize: 8
verticalPadding: 0 verticalPadding: 0
horizontalPadding: 0 horizontalPadding: 0
iconColor: control.color iconColor: control.color
opacity: back_rect.opacity opacity: back_rect.opacity
anchors{ anchors{
right: parent.right right: parent.right
rightMargin: 4 rightMargin: 2
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
visible: control.horizontal visible: control.horizontal
@ -78,16 +78,16 @@ T.ScrollBar {
} }
} }
FluIconButton{ FluIconButton{
width: 10 width: 12
height: 10 height: 12
iconSize: 6 iconSize: 8
verticalPadding: 0 verticalPadding: 0
horizontalPadding: 0 horizontalPadding: 0
iconColor: control.color iconColor: control.color
opacity: back_rect.opacity opacity: back_rect.opacity
anchors{ anchors{
top: parent.top top: parent.top
topMargin: 4 topMargin: 2
horizontalCenter: parent.horizontalCenter horizontalCenter: parent.horizontalCenter
} }
visible: control.vertical visible: control.vertical
@ -97,16 +97,16 @@ T.ScrollBar {
} }
} }
FluIconButton{ FluIconButton{
width: 10 width: 12
height: 10 height: 12
iconSize: 6 iconSize: 8
verticalPadding: 0 verticalPadding: 0
horizontalPadding: 0 horizontalPadding: 0
iconColor: control.color iconColor: control.color
opacity: back_rect.opacity opacity: back_rect.opacity
anchors{ anchors{
bottom: parent.bottom bottom: parent.bottom
bottomMargin: 4 bottomMargin: 2
horizontalCenter: parent.horizontalCenter horizontalCenter: parent.horizontalCenter
} }
visible: control.vertical visible: control.vertical

10
src/Qt6/imports/FluentUI/Controls/FluShadow.qml
View File

@ -4,8 +4,8 @@ import FluentUI
Item { Item {
//高性能阴影！！！比DropShadow阴影性能高出数倍！！！ //高性能阴影！！！比DropShadow阴影性能高出数倍！！！
property color color: FluTheme.dark ? "#999999" : "#999999" property color color: FluTheme.dark ? "#FFFFFF" : "#999999"
property int elevation: 5 property int elevation: 6
property int radius: 4 property int radius: 4
id:control id:control
anchors.fill: parent anchors.fill: parent
@ -14,9 +14,9 @@ Item {
Rectangle{ Rectangle{
anchors.fill: parent anchors.fill: parent
color: "#00000000" color: "#00000000"
opacity: 0.02 * (elevation-index+1) opacity: 0.01 * (elevation-index+1)
anchors.margins: -index+1 anchors.margins: -index
radius: control.radius radius: control.radius+index
border.width: index border.width: index
border.color: control.color border.color: control.color
} }