wuyize
/
FluentUI
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

main
朱子楚\zhuzi 2023-04-02 14:05:54 +08:00
parent 6391fc8dc6
commit 5279a2c7b2
10 changed files with 247 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
example/T_FlipView.qml Normal file
View File

@ -0,0 +1,78 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
FluScrollablePage{
title:"FlipView"
leftPadding:10
rightPadding:10
bottomPadding:20
FluArea{
width: parent.width
height: 340
paddings: 10
Layout.topMargin: 20
ColumnLayout{
anchors.verticalCenter: parent.verticalCenter
FluText{
text:"水平方向的FlipView"
}
FluFlipView{
Image{
source: "qrc:/res/image/banner_1.jpg"
asynchronous: true
sourceSize: Qt.size(400,300)
fillMode:Image.PreserveAspectCrop
}
Image{
source: "qrc:/res/image/banner_2.jpg"
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
source: "qrc:/res/image/banner_3.jpg"
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
}
}
}
FluArea{
width: parent.width
height: 340
paddings: 10
Layout.topMargin: 20
ColumnLayout{
anchors.verticalCenter: parent.verticalCenter
FluText{
text:"垂直方向的FlipView"
}
FluFlipView{
vertical:true
Image{
source: "qrc:/res/image/banner_1.jpg"
asynchronous: true
sourceSize: Qt.size(400,300)
fillMode:Image.PreserveAspectCrop
}
Image{
source: "qrc:/res/image/banner_2.jpg"
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
source: "qrc:/res/image/banner_3.jpg"
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
}
}
}
}

15
example/global/ItemsOriginal.qml
View File

@ -176,6 +176,7 @@ FluObject{
title:"TabView"
image:"qrc:/res/image/control/TabView.png"
recentlyAdded:true
order:1
desc:"A control that displays a collection of tabs thatcan be used to display several documents."
onTap:{
navigationView.push("qrc:/T_TabView.qml")
@ -187,15 +188,23 @@ FluObject{
navigationView.push("qrc:/T_TreeView.qml")
}
}
FluPaneItem{
title:"MultiWindow"
onTap:{
navigationView.push("qrc:/T_MultiWindow.qml")
}
}
FluPaneItem{
title:"FlipView"
image:"qrc:/res/image/control/FlipView.png"
recentlyAdded:true
order:2
desc:"Presents a collection of items that the user canflip through, one item at a time."
onTap:{
navigationView.push("qrc:/T_FlipView.qml")
}
}
}
FluPaneItemExpander{
title:"Theming"
@ -228,6 +237,7 @@ FluObject{
title:"MediaPlayer"
image:"qrc:/res/image/control/MediaPlayerElement.png"
recentlyAdded:true
order:0
desc:"A control to display video and image content."
onTap:{
navigationView.push("qrc:/T_MediaPlayer.qml")
@ -251,6 +261,7 @@ FluObject{
}
}
}
arr.sort(function(o1,o2){ return o2.order-o1.order })
return arr
}

2
example/page/AboutPage.qml
View File

@ -36,7 +36,7 @@ FluWindow {
fontStyle: FluText.Title
}
FluText{
text:"v1.1.8"
text:"v1.1.9"
fontStyle: FluText.Body
Layout.alignment: Qt.AlignBottom
}

1
example/qml.qrc
View File

@ -153,5 +153,6 @@
<file>global/qmldir</file>
<file>global/ItemsFooter.qml</file>
<file>page/MediaPage.qml</file>
<file>T_FlipView.qml</file>
</qresource>
</RCC>

1
src/Fluent.cpp
View File

@ -33,6 +33,7 @@ void Fluent::registerTypes(const char *uri){
qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluFlipView.qml"),uri,major,minor,"FluFlipView");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemExpander.qml"),uri,major,minor,"FluPaneItemExpander");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTabView.qml"),uri,major,minor,"FluTabView");
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluArea.qml"),uri,major,minor,"FluArea");

116
src/controls/FluAutoSuggestBox.qml
View File

@ -2,133 +2,20 @@
import QtQuick.Controls
import FluentUI
TextField{
FluTextBox{
property var items:[]
property int fontStyle: FluText.Body
property string emptyText: "没有找到结果"
property int pixelSize : FluTheme.textSize
property int iconSource: 0
property bool disabled: false
signal itemClicked(var data)
signal handleClicked
property color normalColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
QtObject{
id:d
property bool flagVisible: true
}
id:control
width: 300
enabled: !disabled
color: {
if(disabled){
return disableColor
}
return normalColor
}
selectionColor: FluTheme.primaryColor.lightest
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
placeholderTextColor: {
if(disabled){
return placeholderDisableColor
}
if(focus){
return placeholderFocusColor
}
return placeholderNormalColor
}
rightPadding: icon_right.visible ? 50 : 30
selectByMouse: true
Keys.onUpPressed: {
list_view.currentIndex = Math.max(list_view.currentIndex-1,0)
}
Keys.onDownPressed: {
list_view.currentIndex = Math.min(list_view.currentIndex+1,list_view.count-1)
}
Keys.onEnterPressed:handleClicked()
Keys.onReturnPressed:handleClicked()
font.bold: {
switch (fontStyle) {
case FluText.Display:
return true
case FluText.TitleLarge:
return true
case FluText.Title:
return true
case FluText.SubTitle:
return true
case FluText.BodyStrong:
return true
case FluText.Body:
return false
case FluText.Caption:
return false
default:
return false
}
}
font.pixelSize: {
switch (fontStyle) {
case FluText.Display:
return text.pixelSize * 4.857
case FluText.TitleLarge:
return text.pixelSize * 2.857
case FluText.Title:
return text.pixelSize * 2
case FluText.SubTitle:
return text.pixelSize * 1.428
case FluText.Body:
return text.pixelSize * 1.0
case FluText.BodyStrong:
return text.pixelSize * 1.0
case FluText.Caption:
return text.pixelSize * 0.857
default:
return text.pixelSize * 1.0
}
}
FluIconButton{
iconSource:FluentIcons.ChromeClose
iconSize: 10
width: 20
height: 20
opacity: 0.5
visible: control.text !== ""
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: icon_right.visible ? 25 : 5
}
onClicked:{
control.text = ""
}
}
background: FluTextBoxBackground{
inputItem: control
FluIcon{
id:icon_right
iconSource: control.iconSource
iconSize: 15
opacity: 0.5
visible: control.iconSource != 0
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: 5
}
}
}
Component.onCompleted: {
loadData()
}
Popup{
id:control_popup
y:control.height
@ -269,4 +156,3 @@ TextField{
}
}

116
src/controls/FluFlipView.qml Normal file
View File

@ -0,0 +1,116 @@
import QtQuick
import QtQuick.Controls
import FluentUI
Item{
property bool vertical: false
default property alias content : swipe.contentData
property alias currentIndex: swipe.currentIndex
id:control
width: 400
height: 300
implicitWidth: width
implicitHeight: height
QtObject{
id:d
property bool flag: true
}
MouseArea{
anchors.fill: parent
preventStealing: true
onWheel:
(wheel)=>{
if(!d.flag)
return
if (wheel.angleDelta.y > 0){
btn_start.clicked()
}else{
btn_end.clicked()
}
d.flag = false
timer.restart()
}
}
Timer{
id:timer
interval: 250
onTriggered: {
d.flag = true
}
}
SwipeView {
id:swipe
clip: true
interactive: false
orientation:control.vertical ? Qt.Vertical : Qt.Horizontal
anchors.fill: parent
}
Button{
id:btn_start
height: vertical ? 20 : 40
width: vertical ? 40 : 20
anchors{
left: vertical ? undefined : parent.left
leftMargin: vertical ? undefined : 2
verticalCenter: vertical ? undefined : parent.verticalCenter
horizontalCenter: !vertical ? undefined : parent.horizontalCenter
top: !vertical ? undefined :parent.top
topMargin: !vertical ? undefined :2
}
background: Rectangle{
radius: 4
color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
}
contentItem:FluIcon{
iconSource: vertical ? FluentIcons.CaretUpSolid8 : FluentIcons.CaretLeftSolid8
width: 10
height: 10
iconSize: 10
iconColor: btn_start.hovered ? FluColors.Grey220 : FluColors.Grey120
anchors.centerIn: parent
}
visible: swipe.currentIndex !==0
onClicked: {
swipe.currentIndex = Math.max(swipe.currentIndex - 1, 0)
}
}
Button{
id:btn_end
height: vertical ? 20 : 40
width: vertical ? 40 : 20
anchors{
right: vertical ? undefined : parent.right
rightMargin: vertical ? undefined : 2
verticalCenter: vertical ? undefined : parent.verticalCenter
horizontalCenter: !vertical ? undefined : parent.horizontalCenter
bottom: !vertical ? undefined :parent.bottom
bottomMargin: !vertical ? undefined :2
}
background: Rectangle{
radius: 4
color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
}
visible: swipe.currentIndex !== swipe.count - 1
contentItem:FluIcon{
iconSource: vertical ? FluentIcons.CaretDownSolid8 : FluentIcons.CaretRightSolid8
width: 10
height: 10
iconSize: 10
iconColor: btn_end.hovered ? FluColors.Grey220 : FluColors.Grey120
anchors.centerIn: parent
}
onClicked: {
swipe.currentIndex = Math.min(swipe.currentIndex + 1,swipe.count-1)
}
}
}

1
src/controls/FluPaneItem.qml
View File

@ -5,6 +5,7 @@ QtObject {
readonly property string key : FluApp.uuid()
readonly property int flag : 0
property string title
property int order : 0
property int icon
property bool recentlyAdded: false
property bool recentlyUpdated: false

34
src/controls/FluTextBox.qml
View File

@ -7,6 +7,7 @@ TextField{
property int fontStyle: FluText.Body
property int pixelSize : FluTheme.textSize
property bool disabled: false
property int iconSource: 0
property color normalColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
@ -74,7 +75,38 @@ TextField{
}
}
selectByMouse: true
background: FluTextBoxBackground{ inputItem: control }
rightPadding: icon_end.visible ? 50 : 30
background: FluTextBoxBackground{
inputItem: control
FluIcon{
id:icon_end
iconSource: control.iconSource
iconSize: 15
opacity: 0.5
visible: control.iconSource != 0
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: 5
}
}
}
FluIconButton{
iconSource:FluentIcons.ChromeClose
iconSize: 10
width: 20
height: 20
opacity: 0.5
visible: control.text !== ""
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: icon_end.visible ? 25 : 5
}
onClicked:{
control.text = ""
}
}
TapHandler {
acceptedButtons: Qt.RightButton
onTapped: control.echoMode !== TextInput.Password && menu.popup()

1
src/res.qrc
View File

@ -61,5 +61,6 @@
<file>controls/FluPaneItemExpander.qml</file>
<file>controls/FluTextBoxMenu.qml</file>
<file>controls/FluMultilineTextBox.qml</file>
<file>controls/FluFlipView.qml</file>
</qresource>
</RCC>