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

update

main
zhuzihcu 2023-06-08 13:55:25 +08:00
parent 11206c1d18
commit 154670f744
18 changed files with 350 additions and 432 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
example/qml/TestWindow.qml
View File

@ -1,73 +0,0 @@
import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts
import Qt.labs.platform
import FluentUI
import "qrc:///example/qml/global/"
FluWindow {
id:window
title: "FluentUI"
width: 1000
height: 640
closeDestory:false
minimumWidth: 520
minimumHeight: 460
launchMode: FluWindow.SingleTask
visible: true
Component.onCompleted: {
// FluApp.init(window)
}
FluNavigationView2{
id:nav_view
anchors.fill: parent
items: ItemsOriginal
footerItems:ItemsFooter
z:11
displayMode:MainEvent.displayMode
logo: "qrc:/example/res/image/favicon.ico"
title:"FluentUI"
autoSuggestBox:FluAutoSuggestBox{
width: 280
anchors.centerIn: parent
iconSource: FluentIcons.Search
items: ItemsOriginal.getSearchData()
placeholderText: lang.search
onItemClicked:
(data)=>{
ItemsOriginal.startPageByItem(data)
}
}
actionItem:Item{
height: 40
width: 148
RowLayout{
anchors.centerIn: parent
spacing: 5
FluText{
text:lang.dark_mode
}
FluToggleSwitch{
checked: FluTheme.dark
onClicked: {
if(FluTheme.dark){
FluTheme.darkMode = FluDarkMode.Light
}else{
FluTheme.darkMode = FluDarkMode.Dark
}
}
}
}
}
Component.onCompleted: {
ItemsOriginal.navigationView = nav_view
ItemsFooter.navigationView = nav_view
// nav_view.setCurrentIndex(0)
}
}
}

10
example/qml/component/CodeExpander.qml
View File

@ -6,19 +6,20 @@ import FluentUI
FluExpander{
id:control
property string code: ""
headerText: "Source"
contentHeight:content.height
focus: false
FluMultilineTextBox{
id:content
width:parent.width
readOnly:true
text:highlightQmlCode(code)
focus:false
textFormat: FluMultilineTextBox.RichText
KeyNavigation.priority: KeyNavigation.BeforeItem
enabled: false
background:Rectangle{
radius: 4
color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
@ -40,6 +41,11 @@ FluExpander{
rightMargin: 5
topMargin: 5
}
onActiveFocusChanged: {
if(activeFocus){
control.expand = true
}
}
onClicked:{
FluTools.clipText(content.text)
showSuccess("复制成功")

1
example/src/main.cpp
View File

@ -39,7 +39,6 @@ int main(int argc, char *argv[])
FramelessHelper::Quick::registerTypes(&engine);
appInfo->init(&engine);
const QUrl url(QStringLiteral("qrc:/example/qml/App.qml"));
// const QUrl url(QStringLiteral("qrc:/example/qml/TestWindow.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)

17
src/imports/FluentUI/Controls/FluButton.qml
View File

@ -5,6 +5,7 @@ import FluentUI
Button {
property bool disabled: false
property string contentDescription: ""
property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
@ -27,11 +28,13 @@ Button {
return Qt.rgba(0,0,0,1)
}
}
Accessible.role: Accessible.Button
Accessible.name: control.text
Accessible.description: contentDescription
Accessible.onPressAction: control.clicked()
id: control
enabled: !disabled
focusPolicy:Qt.TabFocus
horizontalPadding:12
Keys.onSpacePressed: control.visualFocus&&clicked()
font:FluTextStyle.Body
background: Rectangle{
implicitWidth: 28
@ -40,14 +43,8 @@ Button {
border.width: 1
radius: 4
FluFocusRectangle{
visible: control.visualFocus
radius:8
}
color:{
if(disabled){
return disableColor
}
return hovered ? hoverColor :normalColor
visible: control.activeFocus
radius:4
}
}
contentItem: FluText {

4
src/imports/FluentUI/Controls/FluCheckBox.qml
View File

@ -23,13 +23,11 @@ Button {
}
id:control
enabled: !disabled
focusPolicy:Qt.TabFocus
Keys.onSpacePressed: control.visualFocus&&clicked()
padding:0
onClicked: clickListener()
background: Item{
FluFocusRectangle{
visible: control.visualFocus
visible: control.activeFocus
}
}
contentItem: RowLayout{

2
src/imports/FluentUI/Controls/FluComboBox.qml
View File

@ -74,7 +74,7 @@ ComboBox {
visible: !control.flat || control.down
radius: 4
FluFocusRectangle{
visible: control.visualFocus
visible: control.activeFocus
radius:8
}
color:{

4
src/imports/FluentUI/Controls/FluContentDialog.qml
View File

@ -1,4 +1,4 @@
import QtQuick
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Window
@ -25,7 +25,7 @@ FluPopup {
return 400
return Math.min(Window.window.width,400)
}
focus: true
Rectangle {
id:layout_content
anchors.fill: parent

22
src/imports/FluentUI/Controls/FluControl.qml Normal file
View File

@ -0,0 +1,22 @@
import QtQuick
import QtQuick.Controls.impl
import FluentUI
import QtQuick.Templates as T
T.Button {
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
padding: 0
horizontalPadding: 0
spacing: 0
contentItem: Item{}
background: Item{
FluFocusRectangle{
visible: control.activeFocus
radius:8
}
}
}

9
src/imports/FluentUI/Controls/FluDropDownButton.qml
View File

@ -6,6 +6,7 @@ import FluentUI
Button {
property bool disabled: false
property string contentDescription: ""
property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
@ -30,12 +31,14 @@ Button {
}
property var window : Window.window
property alias items: menu.content
Accessible.role: Accessible.Button
Accessible.name: control.text
Accessible.description: contentDescription
Accessible.onPressAction: control.clicked()
id: control
rightPadding:35
enabled: !disabled
focusPolicy:Qt.TabFocus
horizontalPadding:12
Keys.onSpacePressed: control.visualFocus&&clicked()
background: Rectangle{
implicitWidth: 28
implicitHeight: 28
@ -43,7 +46,7 @@ Button {
border.width: 1
radius: 4
FluFocusRectangle{
visible: control.visualFocus
visible: control.activeFocus
radius:8
}
color:{

8
src/imports/FluentUI/Controls/FluFilledButton.qml
View File

@ -5,6 +5,7 @@ import FluentUI
Button {
property bool disabled: false
property string contentDescription: ""
property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
property color disableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
@ -19,10 +20,13 @@ Button {
return Qt.rgba(1,1,1,1)
}
}
Accessible.role: Accessible.Button
Accessible.name: control.text
Accessible.description: contentDescription
Accessible.onPressAction: control.clicked()
id: control
enabled: !disabled
Keys.onSpacePressed: control.visualFocus&&clicked()
focusPolicy:Qt.TabFocus
font:FluTextStyle.Body
horizontalPadding:12
background: Rectangle{
@ -31,7 +35,7 @@ Button {
radius: 4
FluFocusRectangle{
visible: control.visualFocus
radius:8
radius:4
}
color:{
if(disabled){

11
src/imports/FluentUI/Controls/FluFocusRectangle.qml
View File

@ -4,16 +4,15 @@ import FluentUI
Item {
property int radius: 4
id:root
id:control
anchors.fill: parent
anchors.margins: -3
Rectangle{
width: root.width
height: root.height
width: control.width
height: control.height
anchors.centerIn: parent
color: "#00000000"
border.width: 3
radius: root.radius
border.width: 2
radius: control.radius
border.color: FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
z: 65535
}

9
src/imports/FluentUI/Controls/FluIconButton.qml
View File

@ -8,6 +8,7 @@ Button {
property int iconSource
property bool disabled: false
property int radius:4
property string contentDescription: ""
property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
property color pressedColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.06)
property color normalColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
@ -34,6 +35,10 @@ Button {
return Qt.rgba(0,0,0,1)
}
}
Accessible.role: Accessible.Button
Accessible.name: control.text
Accessible.description: contentDescription
Accessible.onPressAction: control.clicked()
id:control
width: 30
height: 30
@ -41,13 +46,11 @@ Button {
implicitHeight: height
padding: 0
enabled: !disabled
focusPolicy:Qt.TabFocus
Keys.onSpacePressed: control.visualFocus&&clicked()
background: Rectangle{
radius: control.radius
color:control.color
FluFocusRectangle{
visible: control.visualFocus
visible: control.activeFocus
}
}
contentItem: Item{

94
src/imports/FluentUI/Controls/FluNavigationView.qml
View File

@ -155,8 +155,8 @@ Item {
Item{
height: 38
width: layout_list.width
Rectangle{
radius: 4
FluControl{
id:item_control
anchors{
top: parent.top
bottom: parent.bottom
@ -167,6 +167,16 @@ Item {
leftMargin: 6
rightMargin: 6
}
onClicked: {
if(d.isCompactAndNotPanel){
control_popup.showPopup(Qt.point(50,mapToItem(control,0,0).y),model.children)
return
}
model.isExpand = !model.isExpand
}
Rectangle{
radius: 4
anchors.fill: parent
Rectangle{
width: 3
height: 18
@ -212,24 +222,12 @@ Item {
}
}
}
MouseArea{
id:item_mouse
hoverEnabled: true
anchors.fill: parent
onClicked: {
if(d.isCompactAndNotPanel){
control_popup.showPopup(Qt.point(50,mapToItem(control,0,0).y),model.children)
return
}
model.isExpand = !model.isExpand
}
}
color: {
if(FluTheme.dark){
if((nav_list.currentIndex === idx)&&type===0){
return Qt.rgba(1,1,1,0.06)
}
if(item_mouse.containsMouse){
if(item_control.hovered){
return Qt.rgba(1,1,1,0.03)
}
return Qt.rgba(0,0,0,0)
@ -237,7 +235,7 @@ Item {
if(nav_list.currentIndex === idx&&type===0){
return Qt.rgba(0,0,0,0.06)
}
if(item_mouse.containsMouse){
if(item_control.hovered){
return Qt.rgba(0,0,0,0.03)
}
return Qt.rgba(0,0,0,0)
@ -294,7 +292,7 @@ Item {
left:item_icon.right
}
color:{
if(item_mouse.pressed){
if(item_control.pressed){
return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
}
return FluTheme.dark ? FluColors.White : FluColors.Grey220
@ -303,6 +301,8 @@ Item {
}
}
}
}
Component{
id:com_panel_item
Item{
@ -314,15 +314,16 @@ Item {
}
}
clip: true
height: {
height: visible ? 38 : 0
visible: {
if(model.parent){
return model.parent.isExpand ? 38 : 0
return model.parent.isExpand ? true : false
}
return 38
return true
}
width: layout_list.width
Rectangle{
radius: 4
FluControl{
id:item_control
anchors{
top: parent.top
bottom: parent.bottom
@ -333,10 +334,6 @@ Item {
leftMargin: 6
rightMargin: 6
}
MouseArea{
id:item_mouse
hoverEnabled: true
anchors.fill: parent
onClicked: {
if(type === 0){
if(model.tapFunc){
@ -360,7 +357,9 @@ Item {
}
}
}
}
Rectangle{
radius: 4
anchors.fill: parent
color: {
if(FluTheme.dark){
if(type===0){
@ -372,7 +371,7 @@ Item {
return Qt.rgba(1,1,1,0.06)
}
}
if(item_mouse.containsMouse){
if(item_control.hovered){
return Qt.rgba(1,1,1,0.03)
}
return Qt.rgba(0,0,0,0)
@ -386,7 +385,7 @@ Item {
return Qt.rgba(0,0,0,0.06)
}
}
if(item_mouse.containsMouse){
if(item_control.hovered){
return Qt.rgba(0,0,0,0.03)
}
return Qt.rgba(0,0,0,0)
@ -439,7 +438,7 @@ Item {
}
}
color:{
if(item_mouse.pressed){
if(item_control.pressed){
return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
}
return FluTheme.dark ? FluColors.White : FluColors.Grey220
@ -452,6 +451,7 @@ Item {
}
}
}
}
Item {
id:nav_app_bar
width: parent.width
@ -624,11 +624,11 @@ Item {
}
return "transparent"
}
x: {
x: visible ? 0 : -width
visible: {
if(d.displayMode !== FluNavigationView.Minimal)
return 0
return d.isMinimalAndPanel ? 0 : -width
return true
return d.isMinimalAndPanel ? true : false
}
FluAcrylic {
sourceItem:nav_swipe
@ -820,14 +820,9 @@ Item {
duration: 83
}
}
background: FluRectangle{
width: 160
radius: [4,4,4,4]
FluShadow{
radius: 4
}
color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
height: 38*Math.min(Math.max(list_view.count,1),8)
padding: 0
focus: true
contentItem: Item{
ListView{
id:list_view
anchors.fill: parent
@ -836,6 +831,7 @@ Item {
model: control_popup.childModel
ScrollBar.vertical: FluScrollBar {}
delegate:Button{
id:item_button
width: 160
padding:10
background: Rectangle{
@ -845,6 +841,10 @@ Item {
}
return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
}
FluFocusRectangle{
visible: item_button.activeFocus
radius:4
}
}
contentItem: FluText{
text:modelData.title
@ -867,6 +867,16 @@ Item {
}
}
}
background: FluRectangle{
implicitWidth: 160
implicitHeight: 38*Math.min(Math.max(list_view.count,1),8)
radius: [4,4,4,4]
FluShadow{
radius: 4
}
color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
}
function showPopup(pos,model){
control_popup.x = pos.x
control_popup.y = pos.y

57
src/imports/FluentUI/Controls/FluNavigationView2.qml
View File

@ -1,57 +0,0 @@
import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Controls.Basic
import QtQuick.Layouts
import FluentUI
Item {
property url logo
property string title: ""
property FluObject items
property FluObject footerItems
property int displayMode: FluNavigationView.Auto
property Component autoSuggestBox
property Component actionItem
id:control
Item {
id:nav_app_bar
width: parent.width
height: 40
RowLayout{
height:parent.height
spacing: 0
FluIconButton{
iconSource: FluentIcons.ChromeBack
Layout.leftMargin: 5
Layout.preferredWidth: 30
Layout.preferredHeight: 30
Layout.alignment: Qt.AlignVCenter
iconSize: 15
}
FluIconButton{
id:btn_nav
iconSource: FluentIcons.GlobalNavButton
iconSize: 15
Layout.preferredWidth: 30
Layout.preferredHeight: 30
Layout.alignment: Qt.AlignVCenter
}
Image{
Layout.preferredHeight: 20
Layout.preferredWidth: 20
source: control.logo
Layout.leftMargin: 12
sourceSize: Qt.size(40,40)
Layout.alignment: Qt.AlignVCenter
}
FluText{
Layout.alignment: Qt.AlignVCenter
text:control.title
Layout.leftMargin: 12
font: FluTextStyle.Body
}
}
}
}

9
src/imports/FluentUI/Controls/FluRadioButton.qml
View File

@ -5,6 +5,7 @@ import QtQuick.Layouts
import FluentUI
Button {
property string contentDescription: ""
property bool disabled: false
property color borderNormalColor: checked ? FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark : FluTheme.dark ? Qt.rgba(161/255,161/255,161/255,1) : Qt.rgba(141/255,141/255,141/255,1)
property color borderDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(198/255,198/255,198/255,1)
@ -15,17 +16,19 @@ Button {
property var clickListener : function(){
checked = !checked
}
Accessible.role: Accessible.Button
Accessible.name: control.text
Accessible.description: contentDescription
Accessible.onPressAction: control.clicked()
id:control
enabled: !disabled
focusPolicy:Qt.TabFocus
padding:0
background: Item{
FluFocusRectangle{
visible: control.visualFocus
visible: control.activeFocus
}
}
font:FluTextStyle.Body
Keys.onSpacePressed: control.visualFocus&&clicked()
onClicked: clickListener()
contentItem: RowLayout{
Rectangle{

13
src/imports/FluentUI/Controls/FluTextButton.qml
View File

@ -5,6 +5,7 @@ import FluentUI
Button {
property bool disabled: false
property string contentDescription: ""
property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.15) : Qt.lighter(normalColor,1.15)
property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.3) : Qt.lighter(normalColor,1.3)
@ -20,19 +21,21 @@ Button {
return hovered ? hoverColor :normalColor
}
id: control
topPadding:0
bottomPadding:0
leftPadding:0
rightPadding:0
horizontalPadding:12
enabled: !disabled
focusPolicy:Qt.TabFocus
Keys.onSpacePressed: control.visualFocus&&clicked()
background: Item{
implicitWidth: 28
implicitHeight: 28
FluFocusRectangle{
visible: control.visualFocus
radius:8
}
}
Accessible.role: Accessible.Button
Accessible.name: control.text
Accessible.description: contentDescription
Accessible.onPressAction: control.clicked()
contentItem: FluText {
id:btn_text
text: control.text

9
src/imports/FluentUI/Controls/FluToggleButton.qml
View File

@ -6,6 +6,7 @@ import FluentUI
Button {
property bool disabled: false
property string contentDescription: ""
property color normalColor: {
if(checked){
return FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
@ -31,10 +32,12 @@ Button {
checked = !checked
}
property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
Accessible.role: Accessible.Button
Accessible.name: control.text
Accessible.description: contentDescription
Accessible.onPressAction: control.clicked()
id: control
enabled: !disabled
Keys.onSpacePressed: control.visualFocus&&clicked()
focusPolicy:Qt.TabFocus
horizontalPadding:12
onClicked: clickListener()
background: Rectangle{
@ -44,7 +47,7 @@ Button {
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: checked ? 0 : 1
FluFocusRectangle{
visible: control.visualFocus
visible: control.activeFocus
radius:8
}
color:{

4
src/imports/FluentUI/Controls/FluToggleSwitch.qml
View File

@ -22,8 +22,6 @@ Button {
height: 20
enabled: !disabled
implicitHeight: height
focusPolicy:Qt.TabFocus
Keys.onSpacePressed: control.visualFocus&&clicked()
onClicked: clickListener()
contentItem: Item{}
background : RowLayout{
@ -34,7 +32,7 @@ Button {
height: control.height
radius: height / 2
FluFocusRectangle{
visible: control.visualFocus
visible: control.activeFocus
radius: 20
}
color: {