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-03-20 21:28:12 +08:00
parent e29cb7433e
commit b83e70ba24
7 changed files with 186 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
example/T_Badge.qml Normal file
View File

@ -0,0 +1,101 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
FluScrollablePage{
title:"Badge"
FluArea{
width: parent.width
Layout.topMargin: 20
height: 106
paddings: 10
Column{
spacing: 15
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
FluText{
text:"一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数"
}
Row{
spacing: 20
Rectangle{
width: 40
height: 40
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
count:0
}
}
Rectangle{
width: 40
height: 40
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
count:5
}
}
Rectangle{
width: 40
height: 40
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
count:50
}
}
Rectangle{
width: 40
height: 40
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
count:100
}
}
Rectangle{
width: 40
height: 40
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
isDot:true
}
}
Rectangle{
width: 40
height: 40
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
count:99
color: Qt.rgba(250/255,173/255,20/255,1)
}
}
Rectangle{
width: 40
height: 40
radius: 8
color: Qt.rgba(191/255,191/255,191/255,1)
FluBadge{
count:99
color: Qt.rgba(82/255,196/255,26/255,1)
}
}
}
}
}
}

2
example/T_Rectangle.qml
View File

@ -21,8 +21,6 @@ FluScrollablePage{
height: 50 height: 50
color:"#744da9" color:"#744da9"
radius:[15,15,15,15] radius:[15,15,15,15]
FluBadge{
}
} }
FluRectangle{ FluRectangle{
width: 50 width: 50

2
example/T_Tooltip.qml
View File

@ -7,7 +7,7 @@ import FluentUI 1.0
FluScrollablePage{ FluScrollablePage{
title:"TextBox" title:"Tooltip"
FluText{ FluText{
Layout.topMargin: 20 Layout.topMargin: 20

8
example/page/ChatPage.qml
View File

@ -14,6 +14,11 @@ FluWindow {
title:"ChatGPT" title:"ChatGPT"
onInitArgument:
(argument)=>{
scrollview.focus = true
}
ChatController{ ChatController{
id:controller id:controller
@ -167,6 +172,7 @@ FluWindow {
ScrollView{ ScrollView{
id:scrollview
anchors{ anchors{
bottom: parent.bottom bottom: parent.bottom
left: parent.left left: parent.left
@ -178,6 +184,8 @@ FluWindow {
height: Math.min(textbox.implicitHeight,64) height: Math.min(textbox.implicitHeight,64)
FluMultiLineTextBox{ FluMultiLineTextBox{
id:textbox id:textbox
focus:true
placeholderText: "请输入消息"
} }
} }

8
example/page/MainPage.qml
View File

@ -90,6 +90,13 @@ FluWindow {
} }
} }
FluPaneItem{
title:"Badge"
onTap:{
nav_view.push("qrc:/T_Badge.qml")
}
}
FluPaneItem{ FluPaneItem{
title:"Rectangle" title:"Rectangle"
onTap:{ onTap:{
@ -97,7 +104,6 @@ FluWindow {
} }
} }
FluPaneItem{ FluPaneItem{
title:"Carousel" title:"Carousel"
onTap:{ onTap:{

1
example/qml.qrc
View File

@ -41,5 +41,6 @@
<file>res/image/logo_openai.png</file> <file>res/image/logo_openai.png</file>
<file>page/ChatPage.qml</file> <file>page/ChatPage.qml</file>
<file>T_Tooltip.qml</file> <file>T_Tooltip.qml</file>
<file>T_Badge.qml</file>
</qresource> </qresource>
</RCC> </RCC>

70
src/controls/FluBadge.qml
View File

@ -1,11 +1,77 @@
import QtQuick 2.15 import QtQuick 2.15
Item { Rectangle{
property bool isDot: false property bool isDot: false
property bool showZero: true
property int count: 0
Rectangle{
id:control
color:Qt.rgba(255/255,77/255,79/255,1)
width: {
if(isDot)
return 10
if(count<10){
return 20
}else if(count<100){
return 30
}
return 40
}
height: {
if(isDot)
return 10
return 20
}
radius: {
if(isDot)
return 5
return 10
}
border.width: 1
border.color: Qt.rgba(1,1,1,1)
visible: {
if(showZero)
return true
return count!==0
}
anchors{
right: {
if(parent)
return parent.right
return undefined
}
top: {
if(parent)
return parent.top
return undefined
}
rightMargin: {
if(isDot){
return -2.5
}
return -(control.width/2)
}
topMargin: {
if(isDot){
return -2.5
}
return -10
}
} }
Text{
anchors.centerIn: parent
color: Qt.rgba(1,1,1,1)
visible: !isDot
text:{
if(count<100)
return count
return count+"+"
}
}
} }