update

example/T_Buttons.qml

@@ -2,6 +2,7 @@
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
+import QtQuick.Controls.Basic
 import FluentUI
 import "./component"
 

example/component/CodeExpander.qml

@@ -68,7 +68,6 @@ FluExpander{
           "FluComboBox",
           "FluContentDialog",
           "FluContentPage",
-          "FluControl",
           "FluDatePicker",
           "FluDivider",
           "FluDropDownButton",

example/example.pro

@@ -1,4 +1,4 @@
-QT += quick quickcontrols2 concurrent network multimedia
+QT += quick concurrent network multimedia
 CONFIG += c++17
 DEFINES += QT_DEPRECATED_WARNINGS QT_NO_WARNING_OUTPUT
 

example/main.cpp

@@ -3,7 +3,6 @@
 #include <QQmlContext>
 #include <QDir>
 #include <QQuickWindow>
-#include <QQuickStyle>
 #include <QProcess>
 #include "lang/Lang.h"
 #include "AppInfo.h"
@@ -11,10 +10,12 @@
 
 int main(int argc, char *argv[])
 {
+    //将样式设置为Basic，不然会导致组件显示异常
+    qputenv("QT_QUICK_CONTROLS_STYLE","Basic");
     QCoreApplication::setOrganizationName("ZhuZiChu");
     QCoreApplication::setOrganizationDomain("https://zhuzichu520.github.io");
     QCoreApplication::setApplicationName("FluentUI");
-    QQuickStyle::setStyle("Basic");
+//    QQuickWindow::setGraphicsApi(QSGRendererInterface::Software);
     QGuiApplication app(argc, argv);
     app.setQuitOnLastWindowClosed(false);
     QQmlApplicationEngine engine;

src/controls/FluArea.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Controls
 import FluentUI
 
 Rectangle {

src/controls/FluButton.qml

@@ -1,8 +1,9 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Controls.Basic
 import FluentUI
 
-FluControl {
+Button {
 
     property bool disabled: false
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)

src/controls/FluCheckBox.qml

@@ -1,9 +1,10 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Controls.Basic
 import QtQuick.Layouts
 import FluentUI
 
-FluControl {
+Button {
 
     property bool selected: false
     property var clickFunc

src/controls/FluColorPicker.qml

@@ -1,10 +1,11 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Controls.Basic
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
 
-FluControl{
+Button{
     id:control
     width: 36
     height: 36

src/controls/FluControl.qml

@@ -1,13 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Controls.impl
-import QtQuick.Templates as T
-import FluentUI
-
-T.Button {
-    id: control
-    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
-                            implicitContentWidth + leftPadding + rightPadding)
-    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
-                             implicitContentHeight + topPadding + bottomPadding)
-}

src/controls/FluDropDownButton.qml

@@ -1,9 +1,10 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Controls.Basic
 import QtQuick.Window
 import FluentUI
 
-FluControl {
+Button {
 
     property bool disabled: false
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)

src/controls/FluFilledButton.qml

@@ -1,8 +1,9 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Controls.Basic
 import FluentUI
 
-FluControl {
+Button {
 
     property bool disabled: false
     property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark

src/controls/FluFlipView.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Controls.Basic
 import FluentUI
 
 Item{
@@ -52,7 +53,7 @@ Item{
         anchors.fill: parent
     }
 
-    FluControl{
+    Button{
         id:btn_start
         height: vertical ? 20 : 40
         width: vertical ? 40 : 20
@@ -82,7 +83,7 @@ Item{
         }
     }
 
-    FluControl{
+    Button{
         id:btn_end
         height: vertical ? 20 : 40
         width: vertical ? 40 : 20

src/controls/FluIconButton.qml

@@ -1,8 +1,9 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Controls.Basic
 import FluentUI
 
-FluControl {
+Button {
 
     property int iconSize: 20
     property int iconSource

src/controls/FluMultilineTextBox.qml

@@ -1,8 +1,9 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Controls.Basic
 import FluentUI
 
-FluTextArea{
+TextArea{
 
     property int fontStyle: FluText.Body
     property int pixelSize : FluTheme.textSize

src/controls/FluNavigationView.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Window
 import QtQuick.Controls
+import QtQuick.Controls.Basic
 import QtQuick.Layouts
 import FluentUI
 
@@ -818,7 +819,7 @@ Item {
                 currentIndex: -1
                 model: control_popup.childModel
                 ScrollBar.vertical: FluScrollBar {}
-                delegate:FluControl{
+                delegate:Button{
                     width: 160
                     padding:10
                     background: Rectangle{

src/controls/FluPagination.qml

@@ -1,12 +1,10 @@
 import QtQuick
 import QtQuick.Controls
-import FluentUI
 import QtQuick.Layouts
+import FluentUI
 
 Item {
     id: control
-
-
     signal requestPage(int page,int count)
     property string previousText: "<上一页"
     property string nextText: "下一页>"

src/controls/FluRadioButton.qml

@@ -1,9 +1,10 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Controls.Basic
 import QtQuick.Layouts
 import FluentUI
 
-FluControl {
+Button {
 
     property bool selected: false
     property bool disabled: false

src/controls/FluTextArea.qml

@@ -1,39 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Controls.impl
-import QtQuick.Templates as T
-
-T.TextArea {
-    id: control
-
-    implicitWidth: Math.max(contentWidth + leftPadding + rightPadding,
-                            implicitBackgroundWidth + leftInset + rightInset,
-                            placeholder.implicitWidth + leftPadding + rightPadding)
-    implicitHeight: Math.max(contentHeight + topPadding + bottomPadding,
-                             implicitBackgroundHeight + topInset + bottomInset,
-                             placeholder.implicitHeight + topPadding + bottomPadding)
-
-    padding: 6
-    leftPadding: padding + 4
-
-    color: control.palette.text
-    placeholderTextColor: control.palette.placeholderText
-    selectionColor: control.palette.highlight
-    selectedTextColor: control.palette.highlightedText
-
-    PlaceholderText {
-        id: placeholder
-        x: control.leftPadding
-        y: control.topPadding
-        width: control.width - (control.leftPadding + control.rightPadding)
-        height: control.height - (control.topPadding + control.bottomPadding)
-
-        text: control.placeholderText
-        font: control.font
-        color: control.placeholderTextColor
-        verticalAlignment: control.verticalAlignment
-        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
-        elide: Text.ElideRight
-        renderType: control.renderType
-    }
-}

src/controls/FluTextBox.qml

@@ -1,8 +1,9 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Controls.Basic
 import FluentUI
 
-FluTextFiled{
+TextField{
 
     property int fontStyle: FluText.Body
     property int pixelSize : FluTheme.textSize

src/controls/FluTextButton.qml

@@ -1,8 +1,9 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Controls.Basic
 import FluentUI
 
-FluControl {
+Button {
 
     property bool disabled: false
     property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark

src/controls/FluTextFiled.qml

@@ -1,46 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Controls.impl
-import QtQuick.Templates as T
-
-T.TextField {
-    id: control
-
-    implicitWidth: implicitBackgroundWidth + leftInset + rightInset
-                   || Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding
-    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
-                             contentHeight + topPadding + bottomPadding,
-                             placeholder.implicitHeight + topPadding + bottomPadding)
-
-    padding: 6
-    leftPadding: padding + 4
-
-    color: control.palette.text
-    selectionColor: control.palette.highlight
-    selectedTextColor: control.palette.highlightedText
-    placeholderTextColor: control.palette.placeholderText
-    verticalAlignment: TextInput.AlignVCenter
-
-    PlaceholderText {
-        id: placeholder
-        x: control.leftPadding
-        y: control.topPadding
-        width: control.width - (control.leftPadding + control.rightPadding)
-        height: control.height - (control.topPadding + control.bottomPadding)
-        text: control.placeholderText
-        font: control.font
-        color: control.placeholderTextColor
-        verticalAlignment: control.verticalAlignment
-        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
-        elide: Text.ElideRight
-        renderType: control.renderType
-    }
-
-    background: Rectangle {
-        implicitWidth: 200
-        implicitHeight: 40
-        border.width: control.activeFocus ? 2 : 1
-        color: control.palette.base
-        border.color: control.activeFocus ? control.palette.highlight : control.palette.mid
-    }
-}

src/controls/FluToggleButton.qml

@@ -1,8 +1,9 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Controls.Basic
 import FluentUI
 
-FluControl {
+Button {
 
     property bool disabled: false
     property bool selected: false

src/controls/FluToggleSwitch.qml

@@ -1,9 +1,10 @@
 import QtQuick
 import QtQuick.Controls
-import FluentUI
+import QtQuick.Controls.Basic
 import QtQuick.Layouts
+import FluentUI
 
-FluControl {
+Button {
 
     property bool selected: false
     property var clickFunc

src/res.qrc

@@ -64,9 +64,6 @@
         <file>controls/FluFlipView.qml</file>
         <file>controls/FluPivot.qml</file>
         <file>controls/FluPivotItem.qml</file>
-        <file>controls/FluControl.qml</file>
-        <file>controls/FluTextFiled.qml</file>
-        <file>controls/FluTextArea.qml</file>
         <file>controls/FluTableView.qml</file>
         <file>controls/FluPagination.qml</file>
         <file>controls/FluToggleButton.qml</file>