fix #256

example/qml/page/T_Menu.qml

@@ -16,12 +16,20 @@ FluScrollablePage{
         Action { text: qsTr("Open...") }
         Action { text: qsTr("Save") }
         FluMenuSeparator { }
-        Action {
+        FluMenuItem{
             text: qsTr("Quit")
             onTriggered: {
                 showError("Quit")
             }
         }
+        FluMenuItem{
+            text: qsTr("Search")
+            iconSource: FluentIcons.Zoom
+            iconSpacing: 3
+            onTriggered: {
+                showError("Search")
+            }
+        }
         Action {
             text: qsTr("Disable")
             enabled:false

src/imports/FluentUI/Controls/FluAppBar.qml

@@ -105,8 +105,8 @@ Rectangle{
         }
         FluIconButton{
             id:btn_minimize
-            width: 40
+            Layout.preferredWidth: 40
-            height: 30
+            Layout.preferredHeight: 30
             iconSource : FluentIcons.ChromeMinimize
             Layout.alignment: Qt.AlignVCenter
             iconSize: 11
@@ -119,8 +119,8 @@ Rectangle{
         }
         FluIconButton{
             id:btn_maximize
-            width: 40
+            Layout.preferredWidth: 40
-            height: 30
+            Layout.preferredHeight: 30
             iconSource : d.isRestore  ? FluentIcons.ChromeRestore : FluentIcons.ChromeMaximize
             color: hovered ? maximizeHoverColor : maximizeNormalColor
             Layout.alignment: Qt.AlignVCenter
@@ -136,8 +136,8 @@ Rectangle{
             iconSource : FluentIcons.ChromeClose
             Layout.alignment: Qt.AlignVCenter
             text:closeText
-            width: 40
+            Layout.preferredWidth: 40
-            height: 30
+            Layout.preferredHeight: 30
             visible: !isMac && showClose
             radius: 0
             iconSize: 10

src/imports/FluentUI/Controls/FluIcon.qml

@@ -6,16 +6,14 @@ Text {
     property int iconSource
     property int iconSize: 20
     property color iconColor: FluTheme.dark ? "#FFFFFF" : "#000000"
-    id:text_icon
+    id:control
     font.family: "Segoe Fluent Icons"
     font.pixelSize: iconSize
     horizontalAlignment: Text.AlignHCenter
     verticalAlignment: Text.AlignVCenter
     color: iconColor
     text: (String.fromCharCode(iconSource).toString(16))
-
     FontLoader{
         source: "../Font/Segoe_Fluent_Icons.ttf"
     }
-
 }

src/imports/FluentUI/Controls/FluMenuItem.qml

@@ -1,10 +1,15 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 import QtQuick.Controls.impl
 import QtQuick.Templates as T
 import FluentUI
 
 T.MenuItem {
+    property Component iconDelegate : com_icon
+    property int iconSpacing: 5
+    property int iconSource
+    property int iconSize: 16
     property color textColor: {
         if(FluTheme.dark){
             if(!enabled){
@@ -36,15 +41,39 @@ T.MenuItem {
     icon.height: 24
     icon.color: control.palette.windowText
     height: visible ? implicitHeight : 0
-    contentItem: FluText {
+    Component{
-        readonly property real arrowPadding: control.subMenu && control.arrow ? control.arrow.width + control.spacing : 0
+        id:com_icon
-        readonly property real indicatorPadding: control.checkable && control.indicator ? control.indicator.width + control.spacing : 0
+        FluIcon{
-        leftPadding: (!control.mirrored ? indicatorPadding : arrowPadding)+5
+            id:content_icon
-        rightPadding: (control.mirrored ? indicatorPadding : arrowPadding)+5
+            iconSize: control.iconSize
-        verticalAlignment: Text.AlignVCenter
+            iconSource:control.iconSource
-        text: control.text
+        }
-        color: control.textColor
+    }
-
+    contentItem: Item{
+        Row{
+            spacing: control.iconSpacing
+            readonly property real arrowPadding: control.subMenu && control.arrow ? control.arrow.width + control.spacing : 0
+            readonly property real indicatorPadding: control.checkable && control.indicator ? control.indicator.width + control.spacing : 0
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+                leftMargin: (!control.mirrored ? indicatorPadding : arrowPadding)+5
+                right: parent.right
+                rightMargin: (control.mirrored ? indicatorPadding : arrowPadding)+5
+            }
+            Loader{
+                id:loader_icon
+                sourceComponent: iconDelegate
+                anchors.verticalCenter: parent.verticalCenter
+                visible: status === Loader.Ready
+            }
+            FluText {
+                id:content_text
+                text: control.text
+                color: control.textColor
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
     }
     indicator: FluIcon {
         x: control.mirrored ? control.width - width - control.rightPadding : control.leftPadding

src/imports/FluentUI/Controls/FluPasswordBox.qml

@@ -68,6 +68,8 @@ TextField{
         iconSize: 10
         width: 20
         height: 20
+        verticalPadding: 0
+        horizontalPadding: 0
         opacity: 0.5
         visible: control.text !== ""
         anchors{

src/imports/FluentUI/Controls/FluTextBox.qml

@@ -74,6 +74,8 @@ TextField{
         iconSize: 10
         width: 20
         height: 20
+        verticalPadding: 0
+        horizontalPadding: 0
         visible: {
             if(control.cleanEnabled === false){
                 return false

src/imports/FluentUI/Controls/FluTour.qml

@@ -171,6 +171,8 @@ Popup{
             }
             width: 26
             height: 26
+            verticalPadding: 0
+            horizontalPadding: 0
             iconSize: 12
             iconSource : FluentIcons.ChromeClose
             onClicked: {