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{
width: 1920/4
height: 1200/4
radius:[15,15,15,15]
radius:[8,8,8,8]
Image {
id:image
asynchronous: true

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

@ -36,20 +36,28 @@ FluScrollablePage{
FluText{
text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
}
FluCarousel{
radius:[5,5,5,5]
delegate: Component{
Image {
anchors.fill: parent
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Item{
width: 400
height: 300
FluShadow{
radius: 8
}
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"}]
FluCarousel{
anchors.fill: parent
radius:[8,8,8,8]
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
left:parent.left
}
FluCarousel{
radius:[15,15,15,15]
loopTime:1500
indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
indicatorMarginTop:15
delegate: Component{
Item{
anchors.fill: parent
Image {
Item{
width: 400
height: 300
FluShadow{
radius: 8
}
FluCarousel{
anchors.fill: parent
radius:[8,8,8,8]
loopTime:1500
indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
indicatorMarginTop:15
delegate: Component{
Item{
anchors.fill: parent
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Rectangle{
height: 40
width: parent.width
anchors.bottom: parent.bottom
color: "#33000000"
FluText{
Image {
anchors.fill: parent
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
text:model.title
color: FluColors.Grey10
font.pixelSize: 15
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
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.leftMargin: 5
Component.onCompleted: {
var arr = []
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_3.jpg",title:"有效投资扩大 激发增长动能"})
model = arr
Layout.topMargin: 20
Layout.leftMargin: 5
Component.onCompleted: {
var arr = []
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_3.jpg",title:"有效投资扩大 激发增长动能"})
model = arr
}
}
}
}
}

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

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

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

@ -116,7 +116,7 @@ FluScrollablePage{
FluRectangle{
width: 1920/5
height: 1200/5
radius:[15,15,15,15]
radius:[8,8,8,8]
Image {
asynchronous: true
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.leftMargin: 4
Layout.bottomMargin: 4
radius: 4
color: FluTheme.dark ? FluColors.Black : FluColors.White
FluShadow{
radius: 0
radius: 4
color: FluTheme.primaryColor.dark
}
Image{

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

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

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

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

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

@ -37,20 +37,28 @@ FluScrollablePage{
FluText{
text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
}
FluCarousel{
radius:[5,5,5,5]
delegate: Component{
Image {
anchors.fill: parent
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Item{
width: 400
height: 300
FluShadow{
radius: 8
}
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"}]
FluCarousel{
anchors.fill: parent
radius:[8,8,8,8]
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
left:parent.left
}
FluCarousel{
radius:[15,15,15,15]
loopTime:1500
indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
indicatorMarginTop:15
delegate: Component{
Item{
anchors.fill: parent
Image {
Item{
width: 400
height: 300
FluShadow{
radius: 8
}
FluCarousel{
anchors.fill: parent
radius:[8,8,8,8]
loopTime:1500
indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
indicatorMarginTop:15
delegate: Component{
Item{
anchors.fill: parent
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Rectangle{
height: 40
width: parent.width
anchors.bottom: parent.bottom
color: "#33000000"
FluText{
Image {
anchors.fill: parent
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
text:model.title
color: FluColors.Grey10
font.pixelSize: 15
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
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.leftMargin: 5
Component.onCompleted: {
var arr = []
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_3.jpg",title:"有效投资扩大 激发增长动能"})
model = arr
Layout.topMargin: 20
Layout.leftMargin: 5
Component.onCompleted: {
var arr = []
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_3.jpg",title:"有效投资扩大 激发增长动能"})
model = arr
}
}
}
}
}

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

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

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

@ -117,7 +117,7 @@ FluScrollablePage{
FluRectangle{
width: 1920/5
height: 1200/5
radius:[15,15,15,15]
radius:[8,8,8,8]
Image {
asynchronous: true
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.leftMargin: 4
Layout.bottomMargin: 4
radius: 4
color: FluTheme.dark ? FluColors.Black : FluColors.White
FluShadow{
radius: 0
radius: 4
color: FluTheme.primaryColor.dark
}
Image{

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

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

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

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

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

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

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

@ -22,7 +22,6 @@ Canvas {
jsChart.update();
chartAnimator.restart();
}
opacity:
MouseArea {
id: event
anchors.fill: control
@ -90,7 +89,7 @@ Canvas {
control.requestPaint();
}
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');
jsChart = Chart.build(ctx, {

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

@ -4,15 +4,14 @@ import FluentUI 1.0
import "ColorPicker"
Item {
id:control
property alias colorValue: color_picker.colorValue
property int radius: 5
width: color_picker.width+10
height: color_picker.height
FluArea{
anchors.fill: parent
radius: 5
FluShadow{
radius: 5
}
radius: control.radius
ColorPicker{
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 maxLine : 6
}
verticalPadding : vertical ? 15 : 2
horizontalPadding : horizontal ? 15 : 2
verticalPadding : vertical ? 15 : 3
horizontalPadding : horizontal ? 15 : 3
background: Rectangle{
id:back_rect
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:{
if(vertical){
return d.maxLine === Number(rect_bar.width)
@ -34,21 +34,21 @@ T.ScrollBar {
}
Behavior on opacity {
NumberAnimation{
duration: 167
duration: 50
}
}
}
FluIconButton{
width: 10
height: 10
iconSize: 6
width: 12
height: 12
iconSize: 8
verticalPadding: 0
horizontalPadding: 0
visible: control.horizontal
opacity: back_rect.opacity
anchors{
left: parent.left
leftMargin: 4
leftMargin: 2
verticalCenter: parent.verticalCenter
}
iconColor: control.color
@ -58,16 +58,16 @@ T.ScrollBar {
}
}
FluIconButton{
width: 10
height: 10
iconSize: 6
width: 12
height: 12
iconSize: 8
verticalPadding: 0
horizontalPadding: 0
iconColor: control.color
opacity: back_rect.opacity
anchors{
right: parent.right
rightMargin: 4
rightMargin: 2
verticalCenter: parent.verticalCenter
}
visible: control.horizontal
@ -77,16 +77,16 @@ T.ScrollBar {
}
}
FluIconButton{
width: 10
height: 10
iconSize: 6
width: 12
height: 12
iconSize: 8
verticalPadding: 0
horizontalPadding: 0
iconColor: control.color
opacity: back_rect.opacity
anchors{
top: parent.top
topMargin: 4
topMargin: 2
horizontalCenter: parent.horizontalCenter
}
visible: control.vertical
@ -96,16 +96,16 @@ T.ScrollBar {
}
}
FluIconButton{
width: 10
height: 10
iconSize: 6
width: 12
height: 12
iconSize: 8
verticalPadding: 0
horizontalPadding: 0
iconColor: control.color
opacity: back_rect.opacity
anchors{
bottom: parent.bottom
bottomMargin: 4
bottomMargin: 2
horizontalCenter: parent.horizontalCenter
}
visible: control.vertical

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

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

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

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

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

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

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

@ -4,15 +4,14 @@ import FluentUI
import "ColorPicker"
Item {
id:control
property alias colorValue: color_picker.colorValue
property int radius: 5
width: color_picker.width+10
height: color_picker.height
FluArea{
anchors.fill: parent
radius: 5
FluShadow{
radius: 5
}
radius: control.radius
ColorPicker{
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 maxLine : 6
}
verticalPadding : vertical ? 15 : 2
horizontalPadding : horizontal ? 15 : 2
verticalPadding : vertical ? 15 : 3
horizontalPadding : horizontal ? 15 : 3
background: Rectangle{
id:back_rect
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:{
if(vertical){
return d.maxLine === Number(rect_bar.width)
@ -35,21 +35,21 @@ T.ScrollBar {
}
Behavior on opacity {
NumberAnimation{
duration: 167
duration: 50
}
}
}
FluIconButton{
width: 10
height: 10
iconSize: 6
width: 12
height: 12
iconSize: 8
verticalPadding: 0
horizontalPadding: 0
visible: control.horizontal
opacity: back_rect.opacity
anchors{
left: parent.left
leftMargin: 4
leftMargin: 2
verticalCenter: parent.verticalCenter
}
iconColor: control.color
@ -59,16 +59,16 @@ T.ScrollBar {
}
}
FluIconButton{
width: 10
height: 10
iconSize: 6
width: 12
height: 12
iconSize: 8
verticalPadding: 0
horizontalPadding: 0
iconColor: control.color
opacity: back_rect.opacity
anchors{
right: parent.right
rightMargin: 4
rightMargin: 2
verticalCenter: parent.verticalCenter
}
visible: control.horizontal
@ -78,16 +78,16 @@ T.ScrollBar {
}
}
FluIconButton{
width: 10
height: 10
iconSize: 6
width: 12
height: 12
iconSize: 8
verticalPadding: 0
horizontalPadding: 0
iconColor: control.color
opacity: back_rect.opacity
anchors{
top: parent.top
topMargin: 4
topMargin: 2
horizontalCenter: parent.horizontalCenter
}
visible: control.vertical
@ -97,16 +97,16 @@ T.ScrollBar {
}
}
FluIconButton{
width: 10
height: 10
iconSize: 6
width: 12
height: 12
iconSize: 8
verticalPadding: 0
horizontalPadding: 0
iconColor: control.color
opacity: back_rect.opacity
anchors{
bottom: parent.bottom
bottomMargin: 4
bottomMargin: 2
horizontalCenter: parent.horizontalCenter
}
visible: control.vertical

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

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