update

example/qml/TestWindow.qml

@@ -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)
-        }
-    }
-
-}

example/qml/component/CodeExpander.qml

@@ -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("复制成功")

example/src/main.cpp

@@ -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)

src/imports/FluentUI/Controls/FluButton.qml

@@ -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
+            visible: control.activeFocus
-            radius:8
+            radius:4
-        }
-        color:{
-            if(disabled){
-                return disableColor
-            }
-            return hovered ? hoverColor :normalColor
         }
     }
     contentItem: FluText {

src/imports/FluentUI/Controls/FluCheckBox.qml

@@ -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{

src/imports/FluentUI/Controls/FluComboBox.qml

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

src/imports/FluentUI/Controls/FluContentDialog.qml

@@ -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

src/imports/FluentUI/Controls/FluControl.qml

@@ -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
+        }
+    }
+}

src/imports/FluentUI/Controls/FluDropDownButton.qml

@@ -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:{

src/imports/FluentUI/Controls/FluFilledButton.qml

@@ -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){

src/imports/FluentUI/Controls/FluFocusRectangle.qml

@@ -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
+        width: control.width
-        height: root.height
+        height: control.height
         anchors.centerIn: parent
         color: "#00000000"
-        border.width: 3
+        border.width: 2
-        radius: root.radius
+        radius: control.radius
         border.color: FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
         z: 65535
     }

src/imports/FluentUI/Controls/FluIconButton.qml

@@ -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{

src/imports/FluentUI/Controls/FluNavigationView.qml

@@ -155,8 +155,8 @@ Item {
         Item{
             height: 38
             width: layout_list.width
-            Rectangle{
+            FluControl{
-                radius: 4
+                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{
+            FluControl{
-                radius: 4
+                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: visible ? 0 : -width
-        x: {
+        visible: {
             if(d.displayMode !== FluNavigationView.Minimal)
-                return 0
+                return true
-            return d.isMinimalAndPanel  ? 0 : -width
+            return d.isMinimalAndPanel  ? true : false
         }
         FluAcrylic {
             sourceItem:nav_swipe
@@ -820,14 +820,9 @@ Item {
                 duration: 83
             }
         }
-        background: FluRectangle{
+        padding: 0
-            width: 160
+        focus: true
-            radius: [4,4,4,4]
+        contentItem: Item{
-            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)
             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

src/imports/FluentUI/Controls/FluNavigationView2.qml

@@ -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
-            }
-        }
-    }
-}

src/imports/FluentUI/Controls/FluRadioButton.qml

@@ -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{

src/imports/FluentUI/Controls/FluTextButton.qml

@@ -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
+    horizontalPadding:12
-    bottomPadding:0
-    leftPadding:0
-    rightPadding:0
     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

src/imports/FluentUI/Controls/FluToggleButton.qml

@@ -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:{

src/imports/FluentUI/Controls/FluToggleSwitch.qml

@@ -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: {