Qt Quick Controls 2 把所有 UI 元素划分为六大族：

Button · CheckBox · RadioButton · Switch · RoundButton
TextField · TextArea · Slider · Dial · SpinBox · ComboBox
Label · ProgressBar · BusyIndicator · DelayButton
Frame · GroupBox · ScrollView· Pane· Page· TabBar· ToolBar
Dialog· Drawer· Menu· Popup· ToolTip
StackView· SwipeView· PageIndicator

每个族里的成员dou有两块核心属性：background和 contentItem。只要动手 其中之一，就Neng让整个控件焕然一新。

Qt 为我们准备了四套官方风格——Material、Universal、Fusion 与 Imagine。下面这行代码足以让你的整个窗口瞬间换装：

import QtQuick.Controls 2.15
ApplicationWindow {
    visible: true
    width: 640; height: 480
    // 全局切换为 Material 风格
    // 若想改成 Universal，只需把 Material 换成 Universal 即可
    QtQuickControls2.style: "Material"
}

小技巧：在项目根目录放一个 qtquickcontrols2.conf，写入 Style=Fusion，连代码dou不用改。

下面这段示例展示了如何用纯 QML 实现一个「全圆」按钮，同时保留默认的 pressed / hovered / enabled 三种状态动画：

// MyRoundButton.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Button {
    id: btn
    text: qsTr
    width: 120; height: 48
    background: Rectangle {
        radius: btn.height / 2               // 完美圆角
        color:
            btn.pressed   ? "#2C72C7" :
            btn.hovered   ? "#5BA3E8" :
            btn.enabled   ? "#4A90E2" : "#AAAAAA"
        Behavior on color {
            ColorAnimation { duration: 180 }
        }
        border.width: 0
    }
    contentItem: Text {
        text: btn.text
        color: "white"
        font.pixelSize: 16
        font.bold: true
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }
}

把上面的文件保存后在任意页面直接引用 MyRoundButton {} 就Neng得到一个随手可拖拽的圆形按钮。

hen多时候我们需要的不只是单调的蓝条——比如下载时想让颜色从蓝到绿自然过渡。下面的代码将进度条包装成一个独立组件：

// FancyProgressBar.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
ProgressBar {
    id: bar
    width: parent.width; height: 24
    value: 0.35
    background: Rectangle {
        implicitWidth: bar.width; implicitHeight: bar.height
        color:"#e0e0e0"
        radius: bar.height / 2          // 圆润底部线条 
    }
    contentItem : Item {
        implicitWidth : bar.width ; implicitHeight : bar.height
        Rectangle {
            width : bar.visualPosition * parent.width   // 根据当前进度伸长 
            height : parent.height 
            radius : parent.height / 2
            gradient : Gradient {
                orientation : Gradient.Horizontal 
                GradientStop { position : 0.0 ; color:"#4A90E2" }
                GradientStop { position : 1.0 ; color:"#1D9E75" }
            }
            Behavior on width {
                NumberAnimation { duration :300 ; easing.type:Easing.OutCubic }
            }
        }
    }
}

只要在页面里写 FancyProgressBar { value:newValue }, 那么随着值的变化，你会kan到柔和的颜色流动，好像春天的小溪。

Ru果你Yi经写了好几个类似的圆角按钮或渐变进度条，把它们拆出来放进 /components/ 文件夹，然后在 QML 中统一引用：

project/
│─ main.qml               # 主入口  
│─ components/
│   ├─ MyRoundButton.qml   # 上文圆角按钮  
│   └─ FancyProgressBar.qml # 渐变进度条  
└─ qtquickcontrols2.conf   # 全局皮肤配置  

这种模块化思路不仅让团队协作geng顺畅，也方便以后一次性替换主题颜色。

"返回键是 Android 的灵魂". 用 StackView Neng轻松实现类似手机端那种「压栈」效果：

// MainPage.qml 中使用 StackView 
import QtQuick.Controls 2.15
ApplicationWindow{
    visible:true;width:"100%";height:"100%"
    StackView{
        id:view;anchors.fill.parent;
        initialItem:"HomePage.qml"
    }
}
// HomePage.qml 示例 
import QtQuick.Controls 2.15
Rectangle{
    color:"#f5f5f5"
    Column{
        anchors.centerIn;spacing=20;
        Label{text:"首页";font.pixelSize=24;font.bold:true}
        Button{
            text:"打开详情页"
            onClicked:{
                view.push,{title:"详细信息"})
            }
        }
}}
// DetailPage.qml 示例 
Rectangle{
    property string title:""
    color:"#E6F1FB"
    Column{
      anchors.centerIn;spacing=20;
      Label{text:title;font.pixelSize=22}
      Button{
          text:"← 返回"
          onClicked:view.pop
      }
   }
}

这里用了两段小技巧：

Smooth animation：{duration}/Easing.OutCubic

Cascading properties：`view` 在子页面中直接可见，因为它是根对象的子属性。

"引导页一定要有滑动特效"，于是我们把 SwipeView 当作容器，再配上 PageIndicator 把用户当前所在页点亮。

// IntroDemo.qml  
import QtQuick.Controls.Material 
ApplicationWindow{
   visible:true;width:auto;height:auto
   SwipeView{
       id:swi;anchors.fill.parent
       Rectangle{color:"#4A90E2";Label{anchors.centerIn,parent;text:"欢迎使用";font.pixelSize:=24;color:"white"}}
       Rectangle{color:"#1D9E75";Label{anchors.centerIn,parent;text:"功Neng速览";font.pixelSize:=24;color:"white"}}
       Rectangle{color:"#E2934A";Label{anchors.centerIn,parent;text:"马上开始";font.pixelSize:=24;color:"white"}}
   }
   PageIndicator{
       anchors.horizontalCenter:center;
       count:swi.count;currentIndex:swi.currentIndex;
       interactive:true     // 点也Neng跳转 
       anchors.bottom:swi.bottom; anchors.bottomMargin=10;
   }
}

C++ 程序员常说：「菜单是入口」。在移动端，Drawer geng像隐藏的宝箱。下面给出完整实现示例：

// MainWithDrawer.qml 
import QtQuick.Controls.Material 
ApplicationWindow{
   visible:true;width:auto;height:auto
   header:
     ToolBar{
         RowLayout{anchors.fill.parent;
             ToolButton{
                 icon.source:"images/menu.svg";
                 onClicked:{drawer.open}
             }
             Label{text:"Demo App";font.pixelSize:=20;font.bold:true;
                   Layout.alignment:center;}
         }
     }
   Drawer{id:leftDrawer;width:leftDrawer.parent.width*0.7;height;edge:leftEdge;
         ColumnLayout{
             spacing=10;padding=12;
             // 用户信息卡片 
             Rectangle{
                 Layout.fillWidth:true;height:=120;color:"#4A90E2";
                 Column{
                     anchors.centerIn,parent;
                     spacing=8;
                     Image{source:"images/avatar.png";width:=64;height:=64;border.radius:=32;}
                     Label{text:"用户名";color:white;font.pixelSize:=18;}
                 }
             }
             Repeater{
                 model:
                 delegate:
                    ItemDelegate{
                        Layout.fillWidth:true;text:modelData;
                        onClicked:{console.log;leftDrawer.close;}
                    }
             }
             Item{Layout.fillHeight:true} // 占位撑满剩余空间 
             ItemDelegate{text:"退出登录"}
         }}
   // 页面主体内容 
   Label{text:"主界面内容区";anchors.centerIn;font.pixelSize:=24;}
}

Dialog 标准弹窗：{title,text} + Dialog.Ok|Cancel 两个预设按钮；可通过 内容。

Menu 上下文菜单： 捕获右键弹出；支持多层子菜单。

ToolTip 悬停提示： 与 hovered 联动，实现毫秒级延迟显示。

C++ 动态设置主题：

// RenameDialog.qml  
Dialog{
     id:dlg;width:auto;height:auto;
     title:@"重命名";
     modal:true;
     contentItem:
         ColumnLayout{
           spacing=12;width:dll.contentWidth;
           Label{text:"请输入新名称："};
           TextField{id:nameInput;width:dll.contentWidth;height:=32;
                     placeholderText:@"名称";focus:true;}
         }
     footer:
         DialogButtonBox{
           Button{text:"取消";DialogButtonBox.buttonRole:DIALOG_REJECT};
           Button{text:"确认";
                  enabled:nameInput.text.length>0;
                  highlighted:true;
                  DialogButtonBox.buttonRole:DIALOG_ACCEPT;}
         }
     onAccepted:{console.log}
}

// ContextMenuDemo.qml  
Menu{id:rightClickMenu;
      MenuItem{text:"复制";shortcut:"Ctrl+C";}
      MenuItem{text:"粘贴";shortcut:"Ctrl+V";}
      MenuSeparator{}
      Menu{name:'Export';title:'导出为';
          MenuItem{text:'PDF'};MenuItem{text:'PNG'};MenuItem{text:'SVG'}
      };
      MenuSeparator{}
      MenuItem{text:'删除';enabled:false;}
}
MouseArea{id:bgArea;width:auto;height:auto;
          acceptedButtons:leftOrRight?Qt.RightButton:false;
          onClicked:rightClickMenu.popup}
Label{text:'右键点这里弹出上下文菜单'}

// FormDemo.qml  
ColumnLayout{spacing=16;width:auto;
   Frame{id:userInfoFrame;width:auto;backgroundColor:"#fff";
       ColumnLayout{id:fCol;padding=12;
           Label{text:'账号信息';font.bold=true;}
           TextField{placeholderText:'用户名';Layout.fillWidth=true;}
           TextField{placeholderText:'邮箱';Layout.fillWidth=true;}
       }}
   GroupBox{id:notifGroup;width:auto;marginTop=20;
       title:'通知设置';
       ColumnLayout{id:gCol;padding=12;
           CheckBox{text:'邮件通知'};
           CheckBox{text:'短信通知'};
           CheckBox{text:'推送通知';checked:true;}
       }}
   TabBar{id:naviTab;marginTop=30;width:auto;
          TabButton{text:'首页'}TabButton{text:'发现'}TabButton{text:'消息'}TabButton{'我的'}}
   StackLayout{id:naviPages;marginTop=10;height:=200;background:'#eee';
          currentIndex:naviTab.currentIndex;
      Rectangle{color:'#E6F1FB';Label{anchroes.centerIn:p;a.text='首页'}}
      Rectangle{color:'#E1F5EE';Label{'发现'}}
      Rectangle{color:'#FAEEDA';Label{'消息'}}
      Rectangle{color:'#FAECE7';Label{'我的'}}

}

    "好的 UI 是沉默而有力的". 当用户kan到一个细腻到每一次 hover dou有柔和过渡、一页页滑动时心里暗暗点赞，你就完成了不止一次交互上的成功。相反，Ru果所有控件dou千篇一律地走 Material 默认路径，那么即使功Neng强大，也会被同质化埋没。

    温馨提醒： #**请务必把主题颜色抽离成变量并统一放置在专门的 Config.js 中，这样后期改皮肤只需要改一行！**#**​​​​​​​​​​​​​​​​​​​​​​​​​​​​​‍‍‍‍‍‍‌‍‌‎‏‏‏‏‏‏‏‏‎‎‎‎‎‎ ‎   ‌ ‌‌ ‌‌ ‍️️️️️️️️🟢🟢🟢🌞🌞🌞🌙🌙🌙⚡⚡⚡💥💥💥✨✨✨🐱🐶🐰🐸🐼🐱🐶🐰 🐹 🐭 🐁 🐀 📦📦📦🔧🔧🔧🔍🔍🔍🚀🚀🚀⏳⏳⏳💡💡💡🙌🙌🙌👆👆👆👇👇👇👍👍👍👏👏👏🤝🤝🤝..