├── Base ├── TextStandard.qml ├── Config.qml ├── SimpleLauncherDelegate.qml └── LauncherList.qml ├── DragBar ├── MenuDragBar.qml ├── DragBarStyle.qml └── DragBar.qml ├── LockscreenShortcut ├── MenuLockscreenShortcut.qml ├── LockscreenShortcutStyle.qml └── LockscreenShortcut.qml ├── ColorPalette ├── simple │ ├── skin1 │ │ ├── ColorTable.qml │ │ └── TextInputStyle.qml │ ├── TextInput.qml │ └── skin2 │ │ ├── ColorTable.qml │ │ └── TextInputStyle.qml ├── ColorPalette.qml ├── ColorTable.qml └── MenuColorPalette.qml ├── .gitignore ├── main.cpp ├── deployment.pri ├── WPTile ├── MenuWPTile.qml ├── WPTileStyle.qml └── WPTile.qml ├── Vertical-ScrollBar ├── VerticalScrollBarStyle.qml ├── VerticalScrollBar.qml └── MenuVerticalScrollBar.qml ├── README.md ├── LICENSE ├── main.qml ├── qmlStyle.pro └── IOS-RadioButton ├── RadioButtonStyle.qml ├── MenuRadioButton.qml └── RadioButton.qml /Base/TextStandard.qml: -------------------------------------------------------------------------------- 1 | pragma Singleton 2 | import QtQuick 2.3 3 | 4 | Text { 5 | } 6 | -------------------------------------------------------------------------------- /DragBar/MenuDragBar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import "./" 3 | 4 | Item { 5 | id: menu 6 | width: 320 7 | height: 480 8 | 9 | ListView { 10 | anchors.fill: parent 11 | model: 7 12 | delegate: DragBar { 13 | } 14 | onFlickStarted: menu.forceActiveFocus() 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /LockscreenShortcut/MenuLockscreenShortcut.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import "./" 3 | 4 | Rectangle { 5 | width: 320 6 | height: 480 7 | color: "#000" 8 | 9 | LockscreenShortcut { 10 | height: parent.height-50 11 | width: parent.width-50 12 | anchors.centerIn: parent 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /ColorPalette/simple/skin1/ColorTable.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | 3 | // in skin1 4 | 5 | QtObject { 6 | 7 | readonly property var purple: { 8 | 1:"#996699", 9 | 2:"#FFCCCC", 10 | 3:"#FFF", 11 | } 12 | 13 | readonly property var blue: { 14 | 1:"#0099CC", 15 | 2:"#CCCCFF", 16 | 3:"#FFF", 17 | } 18 | } 19 | 20 | -------------------------------------------------------------------------------- /ColorPalette/simple/TextInput.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import QtQuick.Controls 1.3 3 | import Ths 1.0 4 | 5 | TextField { 6 | id: root 7 | 8 | property string skinUrl: ColorPalette.skinUrl 9 | 10 | property string title 11 | 12 | style: Qt.createComponent(skinUrl+"/TextInputStyle.qml", root) 13 | 14 | width: parent.width 15 | height: 40 16 | } 17 | 18 | -------------------------------------------------------------------------------- /ColorPalette/simple/skin2/ColorTable.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | 3 | // in skin2 4 | 5 | QtObject { 6 | 7 | readonly property var green: { 8 | 1:"#003300", 9 | 2:"#669933", 10 | 3:"#CCFF99", 11 | } 12 | 13 | readonly property var yellow: { 14 | 1:"#663300", 15 | 2:"#FF9933", 16 | 3:"#FFFF66", 17 | } 18 | } 19 | 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # C++ objects and libs 2 | 3 | *.slo 4 | *.lo 5 | *.o 6 | *.a 7 | *.la 8 | *.lai 9 | *.so 10 | *.dll 11 | *.dylib 12 | 13 | # Qt-es 14 | 15 | /.qmake.cache 16 | /.qmake.stash 17 | *.pro.user 18 | *.pro.user.* 19 | *.moc 20 | moc_*.cpp 21 | qrc_*.cpp 22 | ui_*.h 23 | Makefile* 24 | *-build-* 25 | 26 | # QtCreator 27 | *.autosave 28 | 29 | # QtCtreator Qml 30 | *.qmlproject.user 31 | *.qmlproject.user.* 32 | *qml.qrc 33 | 34 | # mac files 35 | *.DS_Store 36 | -------------------------------------------------------------------------------- /Base/Config.qml: -------------------------------------------------------------------------------- 1 | pragma Singleton 2 | import QtQuick 2.4 3 | import Ths 1.0 4 | 5 | QtObject { 6 | //平台 7 | property bool isMoblie: Qt.platform.os==="android" || Qt.platform.os==="ios" //是否是安卓或者ios true为是 false为不是 8 | //基础单位 9 | property int baseLength: Math.round(TextStandard.font.pixelSize * 72 / TextStandard.font.pointSize / 25.4 * 2) 10 | 11 | function length(pureLength){ 12 | return isMoblie && pureLength ? Math.round( pureLength*baseLength) : baseLength 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | QApplication app(argc, argv); 8 | 9 | QQmlApplicationEngine engine; 10 | 11 | qmlRegisterSingletonType(QUrl("qrc:/Base/Config.qml"), "Ths", 1, 0, "Config"); 12 | qmlRegisterSingletonType(QUrl("qrc:/Base/TextStandard.qml"), "Ths", 1, 0, "TextStandard"); 13 | qmlRegisterSingletonType(QUrl("qrc:/ColorPalette/ColorPalette.qml"), "Ths", 1, 0, "ColorPalette"); 14 | 15 | engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); 16 | 17 | return app.exec(); 18 | } 19 | -------------------------------------------------------------------------------- /deployment.pri: -------------------------------------------------------------------------------- 1 | android-no-sdk { 2 | target.path = /data/user/qt 3 | export(target.path) 4 | INSTALLS += target 5 | } else:android { 6 | x86 { 7 | target.path = /libs/x86 8 | } else: armeabi-v7a { 9 | target.path = /libs/armeabi-v7a 10 | } else { 11 | target.path = /libs/armeabi 12 | } 13 | export(target.path) 14 | INSTALLS += target 15 | } else:unix { 16 | isEmpty(target.path) { 17 | qnx { 18 | target.path = /tmp/$${TARGET}/bin 19 | } else { 20 | target.path = /opt/$${TARGET}/bin 21 | } 22 | export(target.path) 23 | } 24 | INSTALLS += target 25 | } 26 | 27 | export(INSTALLS) 28 | -------------------------------------------------------------------------------- /WPTile/MenuWPTile.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import QtQuick.Controls 1.3 3 | import "./" 4 | 5 | Rectangle { 6 | width: 320 7 | height: 480 8 | color: "#000" 9 | 10 | MouseArea { 11 | anchors.fill: parent 12 | onClicked: { 13 | if (!wptile.flipped) { 14 | console.log("beging flipping") 15 | wptile.beginFlip() 16 | } 17 | } 18 | } 19 | 20 | WPTile { 21 | id: wptile 22 | anchors.centerIn: parent 23 | } 24 | 25 | Button { 26 | anchors.bottom: parent.bottom 27 | anchors.right: parent.right 28 | text: "复原磁贴" 29 | onClicked: { 30 | wptile.reset() 31 | } 32 | } 33 | } 34 | 35 | -------------------------------------------------------------------------------- /WPTile/WPTileStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import QtQuick.Controls 1.3 3 | import QtQuick.Controls.Private 1.0 4 | 5 | Style { 6 | id:style 7 | 8 | property Item back: Rectangle { 9 | anchors.fill: parent 10 | color: "red" 11 | } 12 | 13 | property Item front: Rectangle { 14 | anchors.fill: parent 15 | color: "blue" 16 | } 17 | 18 | property Component deletebutton: Rectangle { 19 | width: 50 20 | height: 50 21 | color: "green" 22 | } 23 | 24 | property Component panel: Item { 25 | // property bool focusOn: control.activeFocus 26 | 27 | // Connections { 28 | // target: control 29 | // onSetting: { 30 | // console.log("123234234") 31 | // } 32 | // } 33 | } 34 | } 35 | 36 | -------------------------------------------------------------------------------- /Vertical-ScrollBar/VerticalScrollBarStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.5 2 | import QtQuick.Controls 1.3 3 | import QtQuick.Controls.Private 1.0 4 | 5 | Style { 6 | id:style 7 | 8 | //背景样式 9 | property Component background: Rectangle { 10 | color: "#fcfcfc" 11 | Rectangle { 12 | width: 1 13 | height: control.height 14 | color: "#cccccc" 15 | } 16 | } 17 | 18 | //滚动条滚轮 19 | property Component scroll: Item { 20 | Rectangle { 21 | width: parent.width-4 22 | height: parent.height-4 23 | anchors.horizontalCenter: parent.horizontalCenter 24 | anchors.horizontalCenterOffset: 0.5 25 | anchors.verticalCenter: parent.verticalCenter 26 | color: control.__dragScroll? "#777777" : "#bbbbbb" 27 | radius: width 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## qt qml样式 2 | 3 | 工作关系会经常使用 qt ，有事没事的时候，就会做一些 qt 的组件/效果，将其保存于此。(＞﹏＜) 4 | 5 | 由于懒惰&偶尔忙，更新不定期，请原谅。 6 | 7 | #### 版权说明 8 | 9 | - BSD license： 10 | 11 | 作用范围：Base/LauncherList.qml, Base/SimpleLauncherDelegate.qml 12 | 13 | Base 文件夹下的两个控件 LauncherList.qml, SimpleLauncherDelegate.qml, 由于懒惰&出于不是本项目主要目的，抄于 qt 示例文件**views**，并在其基础上做了小量修改。 14 | 15 | - MIT License： 16 | 17 | 作用范围：其余所有控件。 18 | 19 | #### Qt 版本说明 20 | 21 | 目前工作环境为 Qt Creator 3.6.1 Based on Qt 5.6.0. 22 | 23 | 如果出现打开此项目各种不能编译、爆红等错误，请考虑是否是 Qt 版本过低导致。 24 | 25 | #### 使用方法 26 | 27 | clone 下来后，用 qt creator 打开 qmlStyle.pro 文件。然后 run 一下，就会看到所有可显示控件的使用示例，对哪个有兴趣，可以详细查看其代码。 28 | 29 | #### 控件目录 30 | 31 | - **DragBar** 实现QQ列表界面侧划效果 32 | - **ColorPalette** 对于又可以换肤，每种皮肤下又可换多种颜色的一种实现策略 33 | - **IOS-RadioButton** 仿照ios开关按钮效果 34 | - **LockscreenShortcut** 仿小米锁屏4界面方向快捷键 35 | - **WPTile** WP风格磁贴实现 (未完成) 36 | - **Vertical-ScrollBar** 实现一个竖向滚轮吧 37 | 38 | [The MIT License (MIT)](LICENSE "MIT") 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import QtQuick.Controls 1.3 3 | import QtQuick.Window 2.0 4 | import Ths 1.0 5 | 6 | //eg. 7 | import "Base" 8 | import "ColorPalette" 9 | import "DragBar" 10 | import "IOS-RadioButton" 11 | import "LockscreenShortcut" 12 | import "./WPTile" 13 | 14 | ApplicationWindow { 15 | title: qsTr("qmlStyle") 16 | width: Config.isMoblie ? Screen.width : 320 17 | height: Config.isMoblie ? Screen.height : 480 18 | visible: true 19 | 20 | LauncherList { 21 | anchors.fill: parent 22 | Component.onCompleted: { 23 | addExample("DragBar", "实现QQ列表界面侧划效果", Qt.resolvedUrl("DragBar/MenuDragBar.qml")) 24 | addExample("ColorPalette", "一种调色板类似的实现策略", Qt.resolvedUrl("ColorPalette/MenuColorPalette.qml")) 25 | addExample("IOS-RadioButton", "仿照ios开关按钮效果", Qt.resolvedUrl("IOS-RadioButton/MenuRadioButton.qml")) 26 | addExample("LockscreenShortcut", "仿小米锁屏4界面方向快捷键", Qt.resolvedUrl("LockscreenShortcut/MenuLockscreenShortcut.qml")) 27 | addExample("WPTile", "WP风格磁贴实现", Qt.resolvedUrl("WPTile/MenuWPTile.qml")) 28 | addExample("Vertical-ScrollBar", "实现一个竖向滚轮吧", Qt.resolvedUrl("Vertical-ScrollBar/MenuVerticalScrollBar.qml")) 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /ColorPalette/ColorPalette.qml: -------------------------------------------------------------------------------- 1 | pragma Singleton 2 | import QtQuick 2.4 3 | 4 | 5 | Item { 6 | id:colorRoot 7 | 8 | property string skinUrl: "skin1" //皮肤url 9 | property string colorType: "purple" //主题颜色 10 | 11 | property string __colorComponentUrl: "qrc:/ColorPalette/simple/"+skinUrl+"/ColorTable.qml" //主题URL 12 | 13 | property Component __colorComponent: null 14 | 15 | property var __colorTable 16 | 17 | onColorTypeChanged: { 18 | colorRoot.initComponent() 19 | } 20 | 21 | function initComponent() { 22 | colorRoot.__colorComponent = Qt.createComponent(colorRoot.__colorComponentUrl) 23 | if (colorRoot.__colorComponent.status === Component.Ready) { 24 | colorRoot.__colorTable = colorRoot.__colorComponent.createObject(colorRoot); 25 | } 26 | } 27 | 28 | function color(type) { 29 | if (__colorComponent === null) { 30 | colorRoot.initComponent() 31 | } 32 | try { 33 | if (colorRoot.__colorTable[colorRoot.colorType].hasOwnProperty(type)){ 34 | return colorRoot.__colorTable[colorRoot.colorType][type] 35 | }else{ 36 | return "#000000" 37 | } 38 | }catch (err) { 39 | return "#000000" 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /DragBar/DragBarStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import QtQuick.Controls 1.3 3 | import QtQuick.Controls.Private 1.0 4 | 5 | Style { 6 | id:style 7 | 8 | //背景上的按钮们 9 | property Component buttons: Row { 10 | height: parent.height 11 | 12 | Rectangle { 13 | height: parent.height 14 | width: 80 15 | color: "#f9cdac" 16 | 17 | Text{ 18 | anchors.centerIn: parent 19 | text:"修改" 20 | color: "#ffffff" 21 | } 22 | 23 | MouseArea { 24 | anchors.fill: parent 25 | onClicked: { 26 | control.modifyfun() 27 | } 28 | } 29 | } 30 | 31 | Rectangle { 32 | id:aaaa 33 | height: parent.height 34 | width: 80 35 | color: "#fc9d9a" 36 | 37 | Text{ 38 | anchors.centerIn: parent 39 | text:"删除" 40 | color: "#ffffff" 41 | } 42 | 43 | MouseArea { 44 | anchors.fill: parent 45 | onClicked: { 46 | control.deletefun() 47 | } 48 | } 49 | } 50 | } 51 | 52 | //上层面板样式 53 | property Component upper: Rectangle { 54 | anchors.fill: parent 55 | color: "#ffffff" 56 | Text { 57 | anchors.centerIn: parent 58 | text:"点一下或者拖拽就会打开" 59 | color: "#666666" 60 | } 61 | 62 | } 63 | 64 | //布局面板 可以设置底板背景颜色 不过一般看不见吧 65 | property Component panel: Item { 66 | anchors.fill: parent 67 | } 68 | } 69 | 70 | -------------------------------------------------------------------------------- /qmlStyle.pro: -------------------------------------------------------------------------------- 1 | TEMPLATE = app 2 | 3 | QT += qml quick widgets 4 | 5 | SOURCES += main.cpp 6 | 7 | RESOURCES += \ 8 | qml.qrc 9 | 10 | # Additional import path used to resolve QML modules in Qt Creator's code model 11 | QML_IMPORT_PATH = 12 | 13 | # Default rules for deployment. 14 | include(deployment.pri) 15 | 16 | #---------------------------------------------------------------- 17 | # generate QML folder 18 | 19 | searchlist += \ 20 | *.qml \ 21 | *.js \ 22 | *qmldir \ 23 | 24 | for (searchvar, searchlist) { 25 | qrclist += $$files($$searchvar, true) 26 | } 27 | 28 | OTHER_FILES += $$qrclist # QML folder 29 | 30 | #---------------------generate QML folder end------------------------------------------- 31 | # generate qml.qrc 32 | 33 | RESOURCE_CONTENT = \ 34 | "" \ 35 | " " 36 | for (qrcvar, qrclist) { 37 | resourcefileabsolutepath = $$absolute_path($$qrcvar) 38 | relativepath_in = $$relative_path($$resourcefileabsolutepath, $$PWD) 39 | # relativepath_out = $$relative_path($$resourcefileabsolutepath, $$OUT_PWD) 40 | RESOURCE_CONTENT += "$$relativepath_in" 41 | } 42 | RESOURCE_CONTENT += \ 43 | ' ' \ 44 | 45 | GENERATED_RESOURCE_FILE = $$PWD/qml.qrc 46 | write_file($$GENERATED_RESOURCE_FILE, RESOURCE_CONTENT) 47 | RESOURCES += $$GENERATED_RESOURCE_FILE 48 | #QMAKE_PRE_LINK += $(DEL_FILE) $$GENERATED_RESOURCE_FILE 49 | #QMAKE_CLEAN += $$GENERATED_RESOURCE_FILE 50 | 51 | #--------------------generate qml.qrc end-------------------------------------------- 52 | 53 | #DISTFILES += \ 54 | # WPTile/WPTile.qml \ 55 | # WPTile/MenuWPTile.qml 56 | 57 | DISTFILES += \ 58 | WPTile/WPTileStyle.qml \ 59 | Vertical-ScrollBar/MenuVerticalScrollBar.qml \ 60 | Vertical-ScrollBar/VerticalScrollBar.qml \ 61 | Vertical-ScrollBar/VerticalScrollBarStyle.qml 62 | -------------------------------------------------------------------------------- /IOS-RadioButton/RadioButtonStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import QtQuick.Controls 1.3 3 | import QtQuick.Controls.Private 1.0 4 | 5 | 6 | Style { 7 | id:style 8 | property real bkBorderWidth: 1 //背景边框宽度 9 | property real btnBorderWidth: 0.75 //按钮边框宽度 10 | 11 | property color borderColor: "#B4B4B4" //边框颜色 12 | property color checkedColor: "#4BD962" //选中颜色 13 | property color defaultColor: "#FFFFFF" //未选中颜色 14 | 15 | property Component upper: Rectangle { 16 | height: control.height-style.bkBorderWidth*2 17 | width: control.pressed ? 4/3*height : height 18 | radius: height/2 19 | color: style.defaultColor 20 | border.width: style.btnBorderWidth 21 | border.color: style.borderColor 22 | 23 | Behavior on width { 24 | PropertyAnimation { 25 | } 26 | } 27 | 28 | } 29 | 30 | property Component mask: Rectangle { 31 | height: control.height-style.bkBorderWidth*2 32 | width: parent.width 33 | radius: height/2 34 | color: control.checked ? style.checkedColor : style.borderColor 35 | } 36 | 37 | property Component background: Rectangle { 38 | height: control.height 39 | width: control.width 40 | radius: height/2 41 | color: style.defaultColor 42 | border.width: control.checked || (control.pressed && !control.checked) ? height : style.bkBorderWidth 43 | border.color: control.checked ? style.checkedColor : style.borderColor 44 | 45 | Behavior on border.width { 46 | PropertyAnimation { 47 | duration: 350 48 | } 49 | } 50 | } 51 | 52 | //布局面板 53 | property Component panel: Item { 54 | anchors.fill: parent 55 | 56 | Loader { 57 | anchors.centerIn: parent 58 | sourceComponent: background 59 | } 60 | 61 | } 62 | } 63 | 64 | -------------------------------------------------------------------------------- /ColorPalette/simple/skin1/TextInputStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import QtQuick.Controls.Styles 1.3 3 | import Ths 1.0 4 | 5 | // in skin1 6 | 7 | TextFieldStyle { 8 | id: style 9 | 10 | textColor: ColorPalette.color(1) 11 | 12 | background: Rectangle { 13 | color: ColorPalette.color(2) 14 | } 15 | 16 | /*!设置标题显示内容*/ 17 | property Component title: Rectangle { 18 | width: 80 19 | color: ColorPalette.color(1) 20 | 21 | Text{ 22 | id: titletext 23 | anchors.centerIn: parent 24 | text: control.title 25 | color: ColorPalette.color(3) 26 | } 27 | } 28 | 29 | panel :Item { 30 | anchors.fill: parent 31 | 32 | property int topMargin: 4 33 | property int leftMargin: titleLoader.width+5 34 | property int rightMargin: control.__contentHeight/3 35 | property int bottomMargin: 4 36 | 37 | property color textColor: style.textColor 38 | property color selectionColor: style.selectionColor 39 | property color selectedTextColor: style.selectedTextColor 40 | 41 | implicitWidth: backgroundLoader.implicitWidth || Math.round(control.__contentHeight * 8) 42 | implicitHeight: backgroundLoader.implicitHeight || Math.max(25, Math.round(control.__contentHeight * 1.2)) 43 | baselineOffset: 4 + control.__baselineOffset 44 | 45 | property color placeholderTextColor: style.placeholderTextColor 46 | property font font: style.font 47 | 48 | Loader{ 49 | id:backgroundLoader 50 | anchors.fill: parent 51 | sourceComponent: background 52 | } 53 | 54 | Loader{ 55 | id:titleLoader 56 | anchors.left: backgroundLoader.Left 57 | anchors.top: backgroundLoader.top 58 | anchors.bottom: backgroundLoader.bottom 59 | sourceComponent: title 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /ColorPalette/simple/skin2/TextInputStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import QtQuick.Controls.Styles 1.3 3 | import Ths 1.0 4 | 5 | // in skin2 6 | 7 | TextFieldStyle { 8 | id: style 9 | 10 | textColor: ColorPalette.color(2) 11 | 12 | background: Rectangle { 13 | color: ColorPalette.color(3) 14 | border.width: 1 15 | border.color: ColorPalette.color(1) 16 | radius: 8 17 | } 18 | 19 | /*!设置标题显示内容*/ 20 | property Component title: Text{ 21 | id: titletext 22 | width: 80 23 | verticalAlignment: Text.AlignVCenter 24 | horizontalAlignment: Text.AlignHCenter 25 | text: control.title 26 | color: ColorPalette.color(1) 27 | } 28 | 29 | panel :Item { 30 | anchors.fill: parent 31 | 32 | property int topMargin: 4 33 | property int leftMargin: titleLoader.width+5 34 | property int rightMargin: control.__contentHeight/3 35 | property int bottomMargin: 4 36 | 37 | property color textColor: style.textColor 38 | property color selectionColor: style.selectionColor 39 | property color selectedTextColor: style.selectedTextColor 40 | 41 | implicitWidth: backgroundLoader.implicitWidth || Math.round(control.__contentHeight * 8) 42 | implicitHeight: backgroundLoader.implicitHeight || Math.max(25, Math.round(control.__contentHeight * 1.2)) 43 | baselineOffset: 4 + control.__baselineOffset 44 | 45 | property color placeholderTextColor: style.placeholderTextColor 46 | property font font: style.font 47 | 48 | Loader{ 49 | id:backgroundLoader 50 | anchors.fill: parent 51 | sourceComponent: background 52 | } 53 | 54 | Loader{ 55 | id:titleLoader 56 | anchors.left: backgroundLoader.Left 57 | anchors.top: backgroundLoader.top 58 | anchors.bottom: backgroundLoader.bottom 59 | sourceComponent: title 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /ColorPalette/ColorTable.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | 3 | QtObject { 4 | 5 | readonly property var blue: { 6 | 1:"#cee9f9", 7 | 2:"#90bcd6", 8 | 3:"#c0d0df", 9 | 4:"#ffffff", 10 | 5:"#57a2d8", 11 | 6:"#007aff", 12 | 7:"#aae0ff", 13 | 8:"#227bdd", 14 | 9:"#3a6ca9", 15 | 10:"#7099bf", 16 | 11:"#88a8c7", 17 | 12:"#32659b", 18 | 13:"#6d96ba", 19 | 14:"#4cd964", 20 | 15:"#dcdcdc", 21 | 16:"#2d6092", 22 | 17:"#4883a1", 23 | 18:"#3a6ca9", 24 | 19:"#437e9e", 25 | 20:"#2c5f7a", 26 | 21:"#8a8856", 27 | 22:"#dfdfdf", 28 | 23:"#4dd865", 29 | 24:"#c7c7cc", 30 | 25:"#b2b2b2", 31 | 26:"#3399fe", 32 | 27:"#606060", 33 | 28:"#ebebec", 34 | 29:"#aaaaaa", 35 | 30:"#efeff4", 36 | 31:"#ff7e00", 37 | 32:"#d7d7d7", 38 | 33:"#e4e4e4", 39 | 34:"#f9f7f7", 40 | 35:"#e6e6e6", 41 | 36:"#f2f2f7", 42 | } 43 | 44 | readonly property var red: { 45 | 1:"#ffe3e3", 46 | 2:"#ffa3a3", 47 | 3:"#f5d0d1", 48 | 4:"#ffffff", 49 | 5:"#57a2d8", 50 | 6:"#007aff", 51 | 7:"#aae0ff", 52 | 8:"#227bdd", 53 | 9:"#ffbcc0", 54 | 10:"#eb7777", 55 | 11:"#ffbcc0", 56 | 12:"#dd4a44", 57 | 13:"#ea7d7d", 58 | 14:"#4cd964", 59 | 15:"#dcdcdc", 60 | 16:"#e04b44", 61 | 17:"#de3c38", 62 | 18:"#e14e45", 63 | 19:"#d60011", 64 | 20:"#af000e", 65 | 21:"#8a8856", 66 | 22:"#dfdfdf", 67 | 23:"#4dd865", 68 | 24:"#c7c7cc", 69 | 25:"#b2b2b2", 70 | 26:"#d80f1b", 71 | 27:"#606060", 72 | 28:"#ebebec", 73 | 29:"#aaaaaa", 74 | 30:"#efeff4", 75 | 31:"#ff7e00", 76 | 32:"#d7d7d7", 77 | 33:"#e4e4e4", 78 | 34:"#f9f7f7", 79 | 35:"#e6e6e6", 80 | 36:"#f2f2f7", 81 | } 82 | } 83 | 84 | -------------------------------------------------------------------------------- /IOS-RadioButton/MenuRadioButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import "./" 3 | 4 | Item { 5 | id: menu 6 | width: 320 7 | height: 480 8 | 9 | property var titleList: ["飞行模式","WLAN","蓝牙","段落文字优化","自动旋转触摸", 10 | "防误触模式","静音模式","显示流量信息","显示密码"] 11 | 12 | 13 | Text { 14 | id: title 15 | anchors.left: parent.left 16 | anchors.leftMargin: 20 17 | anchors.top: parent.top 18 | anchors.topMargin: 10 19 | text: "系统设置" 20 | color: "#666" 21 | } 22 | 23 | Rectangle { 24 | anchors.top: title.bottom 25 | anchors.bottom: parent.bottom 26 | anchors.left: parent.left 27 | anchors.right: parent.right 28 | anchors.topMargin: 10 29 | anchors.bottomMargin: 10 30 | anchors.rightMargin: 10 31 | anchors.leftMargin: 10 32 | border.width: 1 33 | border.color: "#ccc" 34 | color: "#eee" 35 | radius: 10 36 | clip: true 37 | 38 | ListView { 39 | id: listview 40 | anchors.fill: parent 41 | model: titleList 42 | delegate: Item { 43 | width: parent.width 44 | height: 50 45 | Text { 46 | text: modelData 47 | anchors.verticalCenter: parent.verticalCenter 48 | anchors.left: parent.left 49 | anchors.leftMargin: 10 50 | color: "#333" 51 | } 52 | RadioButton { 53 | width: 40 54 | height: 25 55 | anchors.verticalCenter: parent.verticalCenter 56 | anchors.right: parent.right 57 | anchors.rightMargin: 10 58 | } 59 | Rectangle { 60 | width: parent.width 61 | height: 1 62 | color: "#ccc" 63 | anchors.bottom: parent.bottom 64 | visible: index!==listview.count-1 65 | } 66 | } 67 | onFlickStarted: menu.forceActiveFocus() 68 | } 69 | } 70 | } 71 | 72 | -------------------------------------------------------------------------------- /IOS-RadioButton/RadioButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import QtQuick.Controls 1.3 3 | import QtQuick.Controls.Private 1.0 4 | 5 | Control { 6 | id:root 7 | 8 | implicitWidth: 140 9 | implicitHeight: 80 10 | 11 | style: Qt.createComponent("RadioButtonStyle.qml", root) 12 | 13 | /*! 是否被选中 */ 14 | property bool checked: false 15 | /*! 是否被按下，按下并不一定选中 */ 16 | readonly property bool pressed: mousearea.pressed || upperma.pressed 17 | 18 | MouseArea { 19 | id: mousearea 20 | anchors.fill: parent 21 | onClicked: { 22 | root.forceActiveFocus() 23 | root.checked = !root.checked 24 | } 25 | } 26 | 27 | Loader { 28 | id: maskloader 29 | property Component __mask //上层按钮 30 | anchors.left: parent.left 31 | anchors.right: parent.right 32 | anchors.leftMargin: __style && __style.bkBorderWidth ? __style.bkBorderWidth : 0 33 | anchors.rightMargin: parent.width-upperloader.x-upperloader.width 34 | anchors.verticalCenter: parent.verticalCenter 35 | sourceComponent: __style && __style.mask ? __style.mask : __mask 36 | } 37 | 38 | Loader { 39 | id: upperloader 40 | property Component __up //上层按钮 41 | property real bkBorderWidth: __style && __style.bkBorderWidth ? __style.bkBorderWidth : 0 42 | anchors.verticalCenter: parent.verticalCenter 43 | sourceComponent: __style && __style.upper ? __style.upper : __up 44 | x: root.checked ? root.width-width-bkBorderWidth : bkBorderWidth 45 | 46 | onXChanged: { 47 | if (x===root.width-width-bkBorderWidth) { 48 | root.checked = true 49 | }else if (x===bkBorderWidth) { 50 | root.checked = false 51 | } 52 | } 53 | 54 | MouseArea { 55 | id:upperma 56 | anchors.fill: parent 57 | drag.target: parent 58 | drag.axis: Drag.XAxis 59 | drag.maximumX: root.width-upperloader.width-upperloader.bkBorderWidth 60 | drag.minimumX: upperloader.bkBorderWidth 61 | onClicked: { 62 | root.forceActiveFocus() 63 | root.checked = !root.checked 64 | } 65 | } 66 | } 67 | } 68 | 69 | -------------------------------------------------------------------------------- /ColorPalette/MenuColorPalette.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import QtQuick.Controls 1.3 3 | import Ths 1.0 4 | import "simple" 5 | 6 | Item { 7 | width: 320 8 | height: 480 9 | 10 | property var skinSet: ["skin1", "skin2"] //皮肤集 11 | property var colorSet: { //颜色集 方便随机颜色 12 | "skin1":["purple","blue"], 13 | "skin2":["green","yellow"], 14 | } 15 | 16 | Text { 17 | id: title 18 | anchors.left: parent.left 19 | anchors.leftMargin: 20 20 | anchors.top: parent.top 21 | anchors.topMargin: 10 22 | text: "简单的换肤换色示例" 23 | color: "#666" 24 | } 25 | 26 | Column { 27 | anchors.top: title.bottom 28 | anchors.left: parent.left 29 | anchors.right: parent.right 30 | anchors.topMargin: 10 31 | anchors.leftMargin: 20 32 | anchors.rightMargin: 20 33 | spacing: 10 34 | 35 | TextInput { 36 | title: "姓名" 37 | text: "狗蛋" 38 | } 39 | TextInput { 40 | title: "年龄" 41 | text: "18" 42 | } 43 | 44 | Text { 45 | text: "当前主题名字: "+ColorPalette.skinUrl 46 | color: "#666" 47 | } 48 | 49 | Text { 50 | text: "当前主题颜色: "+ColorPalette.colorType 51 | color: "#666" 52 | } 53 | } 54 | 55 | Row { 56 | height: 50 57 | anchors.bottom: parent.bottom 58 | anchors.horizontalCenter: parent.horizontalCenter 59 | spacing: 10 60 | Button { 61 | id: changeskin 62 | height: parent.height 63 | text: "点一下改变皮肤" 64 | property int index: 0 65 | onClicked: { 66 | changeskin.forceActiveFocus() 67 | index = index+1 68 | ColorPalette.skinUrl = skinSet[index%2] 69 | changecolor.index = 0 70 | ColorPalette.colorType = colorSet[ColorPalette.skinUrl][changecolor.index%2] 71 | } 72 | } 73 | Button { 74 | id: changecolor 75 | height: parent.height 76 | text: "点一下改变颜色" 77 | property int index: 0 78 | onClicked: { 79 | changecolor.forceActiveFocus() 80 | index = index+1 81 | ColorPalette.colorType = colorSet[ColorPalette.skinUrl][index%2] 82 | } 83 | } 84 | } 85 | } 86 | 87 | -------------------------------------------------------------------------------- /DragBar/DragBar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import QtQuick.Controls 1.3 3 | import QtQuick.Controls.Private 1.0 4 | 5 | Control { 6 | id:root 7 | 8 | implicitWidth: parent.width 9 | implicitHeight: 80 10 | 11 | style: Qt.createComponent("DragBarStyle.qml", root) 12 | 13 | property real boundary: 40 //滑动开关的边界值 14 | property alias isOpen: dragRec.isOpen //是否打开标志 true打开 false关闭 15 | 16 | onActiveFocusChanged: { 17 | if (!activeFocus) { 18 | isOpen = false 19 | } 20 | } 21 | 22 | Loader { 23 | id:backboard 24 | property Component __bkButtons //背景图标 25 | height: parent.height 26 | anchors.right: parent.right 27 | sourceComponent: __style && __style.buttons ? __style.buttons : __bkButtons 28 | } 29 | 30 | Loader { 31 | id: dragRec 32 | property Component __upPanel //上层面板 33 | property bool isOpen: false //是否打开标志 true打开 false关闭 34 | height: parent.height 35 | width: parent.width 36 | Drag.active: dragArea.drag.active 37 | sourceComponent: __style && __style.upper ? __style.upper : __upPanel 38 | 39 | onIsOpenChanged: { 40 | if (isOpen) { 41 | dropOpen.start() 42 | }else { 43 | dropClose.start() 44 | } 45 | } 46 | 47 | PropertyAnimation on x { 48 | id:dropOpen 49 | running:false 50 | to:dragArea.drag.minimumX 51 | easing.type: Easing.InOutQuad 52 | } 53 | 54 | PropertyAnimation on x { 55 | id:dropClose 56 | running:false 57 | to:dragArea.drag.maximumX 58 | easing.type: Easing.InOutQuad 59 | } 60 | 61 | MouseArea { 62 | id: dragArea 63 | anchors.fill: parent 64 | drag.target: parent 65 | drag.axis: Drag.XAxis 66 | drag.maximumX: 0 67 | drag.minimumX: -backboard.width 68 | property point oldPosition 69 | 70 | onPressed: { 71 | oldPosition = Qt.point(mouse.x, mouse.y) 72 | } 73 | 74 | onReleased: { 75 | var nowPosition = Qt.point(mouse.x, mouse.y) 76 | root.forceActiveFocus() 77 | if (!dragRec.isOpen) { 78 | if ((dragRec.x !== 0 && dragRec.x<=-root.boundary && nowPosition.x-oldPosition.x=0 28 | && handleItem.contentY<=handleItem.contentHeight-handleItem.height 29 | repeat: true 30 | onTriggered: { 31 | if (!!handleItem) { 32 | handleItem.contentY += __scrollStep*__scrollState 33 | } 34 | } 35 | } 36 | 37 | Loader { 38 | id: backboard 39 | property Component __bkract //背景图案 40 | anchors.fill: parent 41 | sourceComponent: __style && __style.background ? __style.background : __bkract 42 | } 43 | 44 | Loader { 45 | id: scrollbtn 46 | property Component __scrollbtn //滑轮图案 47 | width: parent.width 48 | sourceComponent: __style && __style.scroll ? __style.scroll : __scrollbtn 49 | 50 | onYChanged: { 51 | if (ymousearea.mouseY-height) { 52 | __scrollState = 0 53 | } 54 | } 55 | } 56 | 57 | MouseArea { 58 | id: mousearea 59 | anchors.fill: backboard 60 | 61 | property double oldY: -1 62 | onPressed: { 63 | if(mouseY<=scrollbtn.y) {//按住滚轮空白区域滚轮往上 64 | __scrollState = -1 65 | 66 | }else if(mouseY>=scrollbtn.y+scrollbtn.height) {//按住滚轮空白区域滚轮往下 67 | __scrollState = 1 68 | 69 | }else { 70 | __scrollState = 0 71 | __dragScroll = true 72 | oldY = mouseY 73 | 74 | __offset = !!handleItem? handleItem.contentY-oldY*handleItem.contentHeight/handleItem.height : 0 75 | } 76 | } 77 | onReleased: { 78 | __scrollState = 0 79 | __dragScroll = false 80 | oldY = -1 81 | } 82 | onPositionChanged: { 83 | if(!!handleItem && pressed && oldY!==-1) { 84 | var offsetMouseY = mouseY*handleItem.contentHeight/handleItem.height 85 | handleItem.contentY = __offset+offsetMouseY>=0? (__offset+offsetMouseY<=handleItem.contentHeight-handleItem.height? __offset+offsetMouseY : handleItem.contentHeight-handleItem.height) : 0 86 | } 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /Vertical-ScrollBar/MenuVerticalScrollBar.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.6 2 | import QtQuick.Controls 1.4 3 | import "./" 4 | 5 | Item { 6 | width: 320 7 | height: 480 8 | 9 | Rectangle { 10 | anchors.left: parent.left 11 | anchors.right: parent.right 12 | anchors.top: parent.top 13 | anchors.bottom: parent.bottom 14 | anchors.leftMargin: 10 15 | anchors.rightMargin: 10 16 | anchors.topMargin: 10 17 | anchors.bottomMargin: 10 18 | border.width: 1 19 | border.color: "#cccccc" 20 | 21 | Flickable { 22 | id: content 23 | anchors.fill: parent 24 | contentHeight: words.contentHeight 25 | boundsBehavior: Flickable.StopAtBounds 26 | interactive: false 27 | clip: true 28 | 29 | Text { 30 | id: words 31 | anchors.top: parent.top 32 | anchors.bottom: parent.bottom 33 | anchors.left: parent.left 34 | anchors.right: parent.right 35 | anchors.topMargin: 5 36 | anchors.bottomMargin: anchors.topMargin 37 | anchors.leftMargin: 10 38 | anchors.rightMargin: 10 39 | lineHeight: 1.5 40 | text: "Who killed Cock Robin? 41 | I,said the Sparrow, 42 | With my bow and arrow, 43 | I killed Cock Robin. 44 | Who saw him die? 45 | I,said the Fly. 46 | With my little eye, 47 | I saw him die. 48 | Who caught his blood? 49 | I,said the Fish, 50 | With my little dish, 51 | I caught his blood. 52 | Who'll make his shroud? 53 | I,said the Beetle, 54 | With my thread and needle, 55 | I'll make the shroud. 56 | Who'll dig his grave? 57 | I,said the Owl, 58 | With my pick and shovel, 59 | I'll dig his grave. 60 | Who'll be the parson? 61 | I,said the Rook, 62 | With my little book, 63 | I'll be the parson. 64 | Who'll be the clerk? 65 | I,said the Lark, 66 | If it's not in the dark, 67 | I'll be the clerk. 68 | Who'll carry the link? 69 | I,said the Linnet, 70 | I'll fetch it in a minute, 71 | I'll carry the link. 72 | Who'll be chief mourner? 73 | I,said the Dove, 74 | I mourn for my love, 75 | I'll be chief mourner. 76 | Who'll carry the coffin? 77 | I,said the Kite, 78 | If it's not through the night, 79 | I'll carry the coffin. 80 | Who'll bear the pall? 81 | We,said the Wren, 82 | Both the cock and the hen, 83 | We'll bear the pall. 84 | Who'll sing a psalm? 85 | I,said the Thrush, 86 | As she sat on a bush, 87 | I'll sing a psalm. 88 | Who'll toll the bell? 89 | I,said the Bull, 90 | Because I can pull, 91 | So Cock Robin,farewell. 92 | All the birds of the air 93 | Fell a-sighing and a-sobbing, 94 | When they heard the bell toll 95 | For poor Cock Robin. 96 | NOTICE 97 | To all it concerns, 98 | This notice apprises, 99 | The Sparrow's for trial, 100 | At next bird assizes." 101 | } 102 | } 103 | VerticalScrollBar { 104 | id: scrollbar 105 | height: content.height-2 106 | anchors.right: content.right 107 | anchors.rightMargin: 1 108 | anchors.verticalCenter: content.verticalCenter 109 | 110 | handleItem: content 111 | size: content.visibleArea.heightRatio * content.height 112 | position: content.visibleArea.yPosition * content.height-1 113 | } 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /LockscreenShortcut/LockscreenShortcutStyle.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import QtQuick.Controls 1.3 3 | import QtQuick.Controls.Private 1.0 4 | import QtGraphicalEffects 1.0 5 | 6 | Style { 7 | id:style 8 | 9 | /*! 4个按钮的宽(长=宽) */ 10 | property real btnWidth: 25 11 | /*! 4个按钮距离大圆的距离 */ 12 | property real btnMargin: 10 13 | 14 | /*! 背景 */ 15 | property Component background: Rectangle { 16 | radius: height/2 17 | color: "#00000000" 18 | border.width: 2 19 | border.color: "#77ffffff" 20 | } 21 | 22 | /*! 鼠标指针 */ 23 | property Component pointer: Item { 24 | height: 45 25 | width: height 26 | 27 | RectangularGlow { 28 | id: effect 29 | anchors.fill: lightsize 30 | glowRadius: 25 31 | spread: 0.1 32 | color: "#EB5800" 33 | cornerRadius: lightsize.height/2 + glowRadius 34 | } 35 | 36 | Item { 37 | id: lightsize 38 | height: 40 39 | width: height 40 | anchors.centerIn: parent 41 | visible: false 42 | } 43 | 44 | Rectangle { 45 | height: 20 46 | width: height 47 | radius: height/2 48 | anchors.centerIn: parent 49 | color: "#EC6700" 50 | visible: control.__chooseBtn===0 ? true:false 51 | 52 | RadialGradient { 53 | anchors.fill: parent 54 | source: parent 55 | gradient: Gradient { 56 | GradientStop { position: 0.0; color: "#EC6700" } 57 | GradientStop { position: 0.7; color: "#9C531A" } 58 | } 59 | } 60 | } 61 | Rectangle { 62 | height: control.__chooseBtn===0 ? 35:45 63 | width: height 64 | radius: height/2 65 | anchors.centerIn: parent 66 | color: "#00000000" 67 | border.width: control.__chooseBtn===0 ? 8:2 68 | border.color: "#ffffff" 69 | } 70 | } 71 | 72 | /*! 上面的按钮 */ 73 | property Component topbtn: Rectangle { 74 | height: style.btnWidth 75 | width: height 76 | radius: height/2 77 | 78 | Text { 79 | anchors.centerIn: parent 80 | color: "#333" 81 | text:"●ˍ●" 82 | } 83 | } 84 | 85 | /*! 下面的按钮 */ 86 | property Component bottombtn: Rectangle { 87 | height: style.btnWidth 88 | width: height 89 | radius: height/2 90 | 91 | Text { 92 | anchors.centerIn: parent 93 | color: "#333" 94 | text:"●▽●" 95 | } 96 | } 97 | 98 | /*! 左边的按钮 */ 99 | property Component leftbtn: Rectangle { 100 | height: style.btnWidth 101 | width: height 102 | radius: height/2 103 | 104 | Text { 105 | anchors.centerIn: parent 106 | color: "#333" 107 | text:"●ε●" 108 | } 109 | } 110 | 111 | /*! 右边的按钮 */ 112 | property Component rightbtn: Rectangle { 113 | height: style.btnWidth 114 | width: height 115 | radius: height/2 116 | 117 | Text { 118 | anchors.centerIn: parent 119 | color: "#333" 120 | text:"●^●" 121 | } 122 | } 123 | 124 | /*! 面板 */ 125 | property Component panel: Item { 126 | anchors.fill: parent 127 | 128 | Loader { 129 | id: backgroundloader 130 | height: Math.min(root.height-style.btnWidth*2-style.btnMargin*2, root.width-style.btnWidth*2-style.btnMargin*2) 131 | width: height 132 | anchors.centerIn: parent 133 | sourceComponent: background 134 | } 135 | } 136 | } 137 | 138 | -------------------------------------------------------------------------------- /Base/SimpleLauncherDelegate.qml: -------------------------------------------------------------------------------- 1 | /**************************************************************************** 2 | ** 3 | ** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). 4 | ** Contact: http://www.qt-project.org/legal 5 | ** 6 | ** This file is part of the examples of the Qt Toolkit. 7 | ** 8 | ** $QT_BEGIN_LICENSE:BSD$ 9 | ** You may use this file under the terms of the BSD license as follows: 10 | ** 11 | ** "Redistribution and use in source and binary forms, with or without 12 | ** modification, are permitted provided that the following conditions are 13 | ** met: 14 | ** * Redistributions of source code must retain the above copyright 15 | ** notice, this list of conditions and the following disclaimer. 16 | ** * Redistributions in binary form must reproduce the above copyright 17 | ** notice, this list of conditions and the following disclaimer in 18 | ** the documentation and/or other materials provided with the 19 | ** distribution. 20 | ** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names 21 | ** of its contributors may be used to endorse or promote products derived 22 | ** from this software without specific prior written permission. 23 | ** 24 | ** 25 | ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 26 | ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 27 | ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 28 | ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 29 | ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 30 | ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 31 | ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 32 | ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 33 | ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 34 | ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 35 | ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." 36 | ** 37 | ** $QT_END_LICENSE$ 38 | ** 39 | ****************************************************************************/ 40 | import QtQuick 2.0 41 | 42 | Rectangle { 43 | id: container 44 | property Item exampleItem 45 | width: ListView.view.width 46 | height: button.implicitHeight + 22 47 | 48 | gradient: Gradient { 49 | GradientStop { 50 | position: 0 51 | Behavior on color {ColorAnimation { duration: 100 }} 52 | color: button.pressed ? "#e0e0e0" : "#fff" 53 | } 54 | GradientStop { 55 | position: 1 56 | Behavior on color {ColorAnimation { duration: 100 }} 57 | color: button.pressed ? "#e0e0e0" : button.containsMouse ? "#f5f5f5" : "#eee" 58 | } 59 | } 60 | 61 | Item { 62 | id: image 63 | opacity: 0.7 64 | Behavior on opacity {NumberAnimation {duration: 100}} 65 | anchors.verticalCenter: parent.verticalCenter 66 | anchors.right: parent.right 67 | anchors.rightMargin: 16 68 | 69 | Text { 70 | anchors.centerIn: parent 71 | text: ">" 72 | color: "#666" 73 | } 74 | } 75 | 76 | Item { 77 | id: button 78 | anchors.top: parent.top 79 | anchors.left: parent.left 80 | anchors.bottom: parent.bottom 81 | anchors.right:image.left 82 | implicitHeight: col.height 83 | height: implicitHeight 84 | width: buttonLabel.width + 20 85 | 86 | MouseArea { 87 | id: mouseArea 88 | anchors.fill: parent 89 | onClicked: exampleItem.exampleUrl = url 90 | hoverEnabled: true 91 | } 92 | 93 | Column { 94 | spacing: 2 95 | id: col 96 | anchors.verticalCenter: parent.verticalCenter 97 | width: parent.width 98 | Text { 99 | id: buttonLabel 100 | anchors.left: parent.left 101 | anchors.leftMargin: 10 102 | anchors.right: parent.right 103 | anchors.rightMargin: 10 104 | text: name 105 | color: "black" 106 | font.pixelSize: 22 107 | wrapMode: Text.WrapAtWordBoundaryOrAnywhere 108 | styleColor: "white" 109 | style: Text.Raised 110 | 111 | } 112 | Text { 113 | id: buttonLabel2 114 | anchors.left: parent.left 115 | anchors.leftMargin: 10 116 | text: description 117 | wrapMode: Text.WrapAtWordBoundaryOrAnywhere 118 | color: "#666" 119 | font.pixelSize: 12 120 | } 121 | } 122 | } 123 | 124 | Rectangle { 125 | height: 1 126 | color: "#ccc" 127 | anchors.bottom: parent.bottom 128 | anchors.left: parent.left 129 | anchors.right: parent.right 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /WPTile/WPTile.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.5 2 | import QtQuick.Controls 1.3 3 | import QtQuick.Controls.Private 1.0 4 | 5 | Control { 6 | id:root 7 | implicitWidth: middleSize 8 | implicitHeight: middleSize 9 | 10 | style: Qt.createComponent("WPTileStyle.qml", root) 11 | 12 | property real middleSize: 100 //正常磁贴的大小 小磁贴为1/2*middleSize 大磁贴为2*middleSize 13 | property real minification: 0.8 //编辑状态下，非选中磁贴缩小至大小 14 | 15 | property real speedTime: 200 //动画速度(ms) 越小越快 16 | property real sleepTime: 1000 //翻转间的休息时间(ms) 17 | property real holdTime: 2000 //按下多久(ms)触发setting 18 | 19 | readonly property bool flipped: __flipped //只读 当前磁铁的是否能翻转的状态 当该值为true时，开始翻转动画 为false时动画停止 20 | 21 | signal setting() //设置磁贴的信号 22 | signal clicked() //点击信号 23 | 24 | property bool __flipped: false //翻转标志 当该值为true时，开始翻转动画 为false时动画停止 25 | property bool __setting: false //是否为setting状态 true为setting状态 false为普通状态 26 | 27 | Flipable { 28 | id: flipable 29 | 30 | width: middleSize 31 | height: middleSize 32 | property real runAngle: 0 //动画运行的角度 33 | 34 | back: __style ? __style.back : undefined 35 | front: __style ? __style.front : undefined 36 | 37 | transform: Rotation { 38 | id: rotation 39 | origin.x: width/2 40 | origin.y: height/2 41 | axis.x: 1 42 | axis.y: 0 43 | axis.z: 0 44 | 45 | NumberAnimation on angle { 46 | id:run 47 | target: rotation 48 | properties: "angle" 49 | from: flipable.runAngle 50 | to: flipable.runAngle-210 51 | duration: speedTime 52 | running: false 53 | alwaysRunToEnd: true 54 | onStopped: { 55 | swing.start() 56 | } 57 | } 58 | NumberAnimation on angle { 59 | id:swing 60 | target: rotation 61 | properties: "angle" 62 | from: flipable.runAngle-210 63 | to: flipable.runAngle-180 64 | duration: speedTime*2 65 | running: false 66 | alwaysRunToEnd: true 67 | onStopped: { 68 | if (__flipped) { 69 | sleep.start() 70 | } 71 | } 72 | } 73 | } 74 | 75 | Timer { 76 | id:sleep 77 | running:false 78 | interval:sleepTime 79 | onTriggered: { 80 | if (flipable.side===Flipable.Back) { 81 | flipable.runAngle = flipable.runAngle-180 82 | }else { 83 | flipable.runAngle = 0 84 | } 85 | run.start() 86 | } 87 | } 88 | } 89 | 90 | MouseArea { 91 | anchors.fill: flipable 92 | property bool isHold: false //是否触发长时间按下的信号 true触发了 false没触发 93 | 94 | onPressed: { 95 | root.forceActiveFocus() 96 | if (!__setting) { 97 | isHold = false 98 | hold.start() 99 | } 100 | } 101 | 102 | Timer { 103 | id: hold 104 | running: false 105 | interval: holdTime 106 | onTriggered: { 107 | parent.isHold = true 108 | __flipped = false 109 | __setting = true 110 | root.setting() 111 | } 112 | } 113 | 114 | onReleased: { 115 | hold.stop() 116 | if (!__setting && !isHold) { 117 | root.clicked() 118 | } 119 | } 120 | } 121 | 122 | Loader { 123 | id: delbtn 124 | anchors.top: parent.top 125 | anchors.right: parent.right 126 | sourceComponent: __style ? __style.deletebutton : undefined 127 | visible: false 128 | 129 | MouseArea { 130 | anchors.fill: parent 131 | onClicked: { 132 | console.log("papapapa") 133 | root.visible = false 134 | } 135 | } 136 | } 137 | 138 | on__FlippedChanged: { 139 | if (__flipped) { 140 | console.log("im running...") 141 | sleep.start() 142 | }else{ 143 | console.log("im stopped...") 144 | run.stop() 145 | sleep.stop() 146 | delbtn.visible = true 147 | } 148 | } 149 | 150 | onActiveFocusChanged: { 151 | if (!activeFocus){ 152 | __setting = false 153 | __flipped = true 154 | } 155 | } 156 | 157 | Component.onCompleted: { 158 | __flipped = true 159 | } 160 | 161 | function beginFlip() { 162 | //触发开始翻转方法 163 | delbtn.visible = false 164 | __flipped = true 165 | __setting = false 166 | } 167 | 168 | function reset() { 169 | //pin到桌面（恢复）方法 170 | root.visible = true 171 | beginFlip() 172 | } 173 | } 174 | 175 | -------------------------------------------------------------------------------- /Base/LauncherList.qml: -------------------------------------------------------------------------------- 1 | /**************************************************************************** 2 | ** 3 | ** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). 4 | ** Contact: http://www.qt-project.org/legal 5 | ** 6 | ** This file is part of the examples of the Qt Toolkit. 7 | ** 8 | ** $QT_BEGIN_LICENSE:BSD$ 9 | ** You may use this file under the terms of the BSD license as follows: 10 | ** 11 | ** "Redistribution and use in source and binary forms, with or without 12 | ** modification, are permitted provided that the following conditions are 13 | ** met: 14 | ** * Redistributions of source code must retain the above copyright 15 | ** notice, this list of conditions and the following disclaimer. 16 | ** * Redistributions in binary form must reproduce the above copyright 17 | ** notice, this list of conditions and the following disclaimer in 18 | ** the documentation and/or other materials provided with the 19 | ** distribution. 20 | ** * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names 21 | ** of its contributors may be used to endorse or promote products derived 22 | ** from this software without specific prior written permission. 23 | ** 24 | ** 25 | ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 26 | ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 27 | ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 28 | ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 29 | ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 30 | ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 31 | ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 32 | ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 33 | ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 34 | ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 35 | ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." 36 | ** 37 | ** $QT_END_LICENSE$ 38 | ** 39 | ****************************************************************************/ 40 | import QtQuick 2.0 41 | 42 | Rectangle { 43 | //model is a list of {"name":"somename", "url":"file:///some/url/mainfile.qml"} 44 | //function used to add to model A) to enforce scheme B) to allow Qt.resolveUrl in url assignments 45 | 46 | color: "#eee" 47 | function addExample(name, desc, url) 48 | { 49 | myModel.append({"name":name, "description":desc, "url":url}) 50 | } 51 | function hideExample() 52 | { 53 | ei.visible = false; 54 | } 55 | 56 | ListView { 57 | clip: true 58 | delegate: SimpleLauncherDelegate{exampleItem: ei} 59 | model: ListModel {id:myModel} 60 | anchors.fill: parent 61 | } 62 | 63 | Item { 64 | id: ei 65 | visible: false 66 | clip: true 67 | property url exampleUrl 68 | onExampleUrlChanged: visible = (exampleUrl == '' ? false : true); //Setting exampleUrl automatically shows example 69 | anchors.fill: parent 70 | anchors.bottomMargin: 40 71 | Rectangle { 72 | id: bg 73 | anchors.fill: parent 74 | color: "white" 75 | } 76 | MouseArea{ 77 | anchors.fill: parent 78 | enabled: ei.visible 79 | //Eats mouse events 80 | } 81 | Loader{ 82 | focus: true 83 | source: ei.exampleUrl 84 | anchors.fill: parent 85 | } 86 | } 87 | Rectangle { 88 | id: bar 89 | visible: ei.visible 90 | anchors.bottom: parent.bottom 91 | width: parent.width 92 | height: 40 93 | 94 | Rectangle { 95 | height: 1 96 | color: "#ccc" 97 | anchors.top: parent.top 98 | anchors.left: parent.left 99 | anchors.right: parent.right 100 | } 101 | 102 | Rectangle { 103 | height: 1 104 | color: "#fff" 105 | anchors.top: parent.top 106 | anchors.topMargin: 1 107 | anchors.left: parent.left 108 | anchors.right: parent.right 109 | } 110 | 111 | gradient: Gradient { 112 | GradientStop { position: 0 ; color: "#eee" } 113 | GradientStop { position: 1 ; color: "#ccc" } 114 | } 115 | 116 | MouseArea{ 117 | anchors.fill: parent 118 | enabled: ei.visible 119 | //Eats mouse events 120 | } 121 | 122 | Item { 123 | id: back 124 | width: 30 125 | anchors.verticalCenter: parent.verticalCenter 126 | anchors.verticalCenterOffset: 2 127 | anchors.left: parent.left 128 | anchors.leftMargin: 16 129 | 130 | Text { 131 | anchors.centerIn: parent 132 | text: "< back" 133 | color: "#666" 134 | } 135 | 136 | MouseArea { 137 | id: mouse 138 | hoverEnabled: true 139 | anchors.centerIn: parent 140 | width: 50 141 | height: 31 142 | anchors.verticalCenterOffset: -1 143 | onClicked: ei.exampleUrl = "" 144 | Rectangle { 145 | anchors.fill: parent 146 | opacity: mouse.pressed ? 1 : 0 147 | Behavior on opacity { NumberAnimation{ duration: 100 }} 148 | gradient: Gradient { 149 | GradientStop { position: 0 ; color: "#22000000" } 150 | GradientStop { position: 0.2 ; color: "#11000000" } 151 | } 152 | border.color: "darkgray" 153 | antialiasing: true 154 | radius: 4 155 | } 156 | } 157 | } 158 | } 159 | } 160 | -------------------------------------------------------------------------------- /LockscreenShortcut/LockscreenShortcut.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.4 2 | import QtQuick.Controls 1.3 3 | import QtQuick.Controls.Private 1.0 4 | 5 | Control { 6 | id:root 7 | 8 | implicitWidth: 400 9 | implicitHeight: 480 10 | 11 | style: Qt.createComponent("LockscreenShortcutStyle.qml", root) 12 | 13 | /*! 当前小圆移动的位置 只读 */ 14 | readonly property point pointer: __pointer 15 | /*! 小圆回原位的速度 数值越大速度越慢 */ 16 | property real speed: 250 17 | /*! 距离按钮多少距离触发选中效果 */ 18 | property real triggerDistance: 50 19 | 20 | /*! 选中上面图标的信号 */ 21 | signal isTop() 22 | /*! 选中下面图标的信号 */ 23 | signal isBottom() 24 | /*! 选中左边图标的信号 */ 25 | signal isLeft() 26 | /*! 选中右边图标的信号 */ 27 | signal isRight() 28 | 29 | /*! 当前小圆移动的位置 私有 */ 30 | property point __pointer: Qt.point(pointer.x, pointer.y) 31 | /*! 选中按钮的序号 0未选中 1上面的按钮 2下面的按钮 3左边的按钮 4右边的按钮 私有 */ 32 | property int __chooseBtn: 0 33 | 34 | 35 | on__ChooseBtnChanged: { 36 | var animationSetting = [ 37 | Qt.point(mousearea.topPoint.x-mousearea.pointerRadius+mousearea.widthOffset, mousearea.topPoint.y-mousearea.pointerRadius+mousearea.heightOffset), 38 | Qt.point(mousearea.bottomPoint.x-mousearea.pointerRadius+mousearea.widthOffset, mousearea.bottomPoint.y-mousearea.pointerRadius+mousearea.heightOffset), 39 | Qt.point(mousearea.leftPoint.x-mousearea.pointerRadius+mousearea.widthOffset, mousearea.leftPoint.y-mousearea.pointerRadius+mousearea.heightOffset), 40 | Qt.point(mousearea.rightPoint.x-mousearea.pointerRadius+mousearea.widthOffset, mousearea.rightPoint.y-mousearea.pointerRadius+mousearea.heightOffset) 41 | ] 42 | if (__chooseBtn!==0) { 43 | mousearea.runPoint(animationSetting[__chooseBtn-1].x, animationSetting[__chooseBtn-1].y, 300) 44 | if (__chooseBtn==1) { 45 | isTop() 46 | }else if (__chooseBtn==2) { 47 | isBottom() 48 | }else if (__chooseBtn==3) { 49 | isLeft() 50 | }else { 51 | isRight() 52 | } 53 | } 54 | } 55 | 56 | onActiveFocusChanged: { 57 | if (!activeFocus) { 58 | mousearea.reset() 59 | } 60 | } 61 | 62 | /*! 指针小圆球loader */ 63 | Loader { 64 | id: pointer 65 | property Component __pointer 66 | property real animationDuration: speed 67 | property real animationX: root.width/2-pointer.width/2 68 | property real animationY: root.height/2-pointer.height/2 69 | sourceComponent: __style && __style.pointer ? __style.pointer : __pointer 70 | x: root.width/2-pointer.width/2 71 | y: root.height/2-pointer.height/2 72 | 73 | PropertyAnimation { 74 | id: runX 75 | target: pointer 76 | property: "x" 77 | to: pointer.animationX 78 | duration: pointer.animationDuration 79 | } 80 | PropertyAnimation { 81 | id: runY 82 | target: pointer 83 | property: "y" 84 | to: pointer.animationY 85 | duration: pointer.animationDuration 86 | } 87 | } 88 | 89 | /*! 上面的按钮loader */ 90 | Loader { 91 | id: topbtnloader 92 | property Component __topbtn 93 | sourceComponent: __style && __style.topbtn ? __style.topbtn : __topbtn 94 | anchors.bottom: mousearea.top 95 | anchors.bottomMargin: __style && __style.btnMargin ? __style.btnMargin : 0 96 | anchors.horizontalCenter: mousearea.horizontalCenter 97 | } 98 | 99 | /*! 下面的按钮loader */ 100 | Loader { 101 | id: bottombtnloader 102 | property Component __bottombtn 103 | sourceComponent: __style && __style.bottombtn ? __style.bottombtn : __bottombtn 104 | anchors.top: mousearea.bottom 105 | anchors.topMargin: __style && __style.btnMargin ? __style.btnMargin : 0 106 | anchors.horizontalCenter: mousearea.horizontalCenter 107 | } 108 | 109 | /*! 左边的按钮loader */ 110 | Loader { 111 | id: leftbtnloader 112 | property Component __leftbtn 113 | sourceComponent: __style && __style.leftbtn ? __style.leftbtn : __leftbtn 114 | anchors.right: mousearea.left 115 | anchors.rightMargin: __style && __style.btnMargin ? __style.btnMargin : 0 116 | anchors.verticalCenter: mousearea.verticalCenter 117 | } 118 | 119 | /*! 右边的按钮loader */ 120 | Loader { 121 | id: rightbtnloader 122 | property Component __rightbtn 123 | sourceComponent: __style && __style.rightbtn ? __style.rightbtn : __rightbtn 124 | anchors.left: mousearea.right 125 | anchors.leftMargin: __style && __style.btnMargin ? __style.btnMargin : 0 126 | anchors.verticalCenter: mousearea.verticalCenter 127 | } 128 | 129 | /*! 整体的鼠标区域 */ 130 | MouseArea { 131 | id: mousearea 132 | height: movingAreaRadius*2 133 | width: movingAreaRadius*2 134 | anchors.centerIn: parent 135 | 136 | /*! 4个按钮的宽(长=宽) */ 137 | property real btnWidth: __style && __style.btnWidth ? __style.btnWidth : 0 138 | /*! 4个按钮距离大圆的距离 */ 139 | property real btnMargin: __style && __style.btnMargin ? __style.btnMargin : 0 140 | 141 | /*! 背景大圆半径 */ 142 | property real movingAreaRadius: Math.min(root.height-btnWidth*2-btnMargin*2, root.width-btnWidth*2-btnMargin*2)/2 143 | /*! 指针小圆半径 */ 144 | property real pointerRadius: pointer.height/2 145 | /*! 宽度上的偏移量 在显示原点的时候要加上偏移量 */ 146 | property real widthOffset: root.width/2-movingAreaRadius 147 | /*! 高度上的偏移量 */ 148 | property real heightOffset: root.height/2-movingAreaRadius 149 | /*! 圆心x坐标 */ 150 | property real centerX: movingAreaRadius 151 | /*! 圆心y坐标 */ 152 | property real centerY: movingAreaRadius 153 | 154 | /*! 上面的按钮坐标 */ 155 | property point topPoint: Qt.point(movingAreaRadius, -btnMargin-btnWidth/2) 156 | /*! 下面的按钮坐标 */ 157 | property point bottomPoint: Qt.point(movingAreaRadius, movingAreaRadius*2+btnMargin+btnWidth/2) 158 | /*! 左边的按钮坐标 */ 159 | property point leftPoint: Qt.point(-btnMargin-btnWidth/2, movingAreaRadius) 160 | /*! 右边的按钮坐标 */ 161 | property point rightPoint: Qt.point(movingAreaRadius*2+btnMargin+btnWidth/2, movingAreaRadius) 162 | 163 | /*! 是否激活移动小圆 true激活 false不激活 这个属性使得在圆外触发鼠标区域的时候不会移动小圆 */ 164 | property bool movingActive: false 165 | 166 | onPressed: { 167 | root.forceActiveFocus() 168 | movingActive = isInCircle(mouse) 169 | } 170 | 171 | onReleased: { 172 | if (__chooseBtn===0) { 173 | reset() 174 | } 175 | } 176 | 177 | onPositionChanged: { 178 | getPointerXY(mouse) 179 | 180 | var nowX = pointer.x-widthOffset+pointerRadius 181 | var nowY = pointer.y-heightOffset+pointerRadius 182 | __chooseBtn = isNear(nowX, nowY) 183 | } 184 | 185 | /*! 计算两点之间的距离 并将其返回 */ 186 | function distance(x1, y1, x2, y2) { 187 | return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)) 188 | } 189 | 190 | /*! 计算某个给定点与上下左右四个点之间的距离 0-上 1-下 2-左 3-右 */ 191 | function compDistance(x, y) { 192 | var topl = distance(x, y, topPoint.x, topPoint.y) 193 | var bottoml = distance(x, y, bottomPoint.x, bottomPoint.y) 194 | var leftl = distance(x, y, leftPoint.x, leftPoint.y) 195 | var rightl = distance(x, y, rightPoint.x, rightPoint.y) 196 | return [topl, bottoml, leftl, rightl] 197 | } 198 | 199 | /*! 判断是否可以移动鼠标小圆点 返回true可以 false不可以移动 x,y为当前坐标 */ 200 | function canMoving(x, y) { 201 | return __chooseBtn===0 || __chooseBtn!==isNear(x,y) 202 | } 203 | 204 | /*! 通过动画，将鼠标小圆点运动到x,y坐标的位置 runSpeed为运动的速度 */ 205 | function runPoint(x, y, runSpeed) { 206 | pointer.animationDuration = runSpeed 207 | pointer.animationX = x 208 | pointer.animationY = y 209 | runX.start() 210 | runY.start() 211 | } 212 | 213 | /*! 214 | 判断鼠标当前坐标是否在圆内 如果在圆内自动移动圆点到鼠标位置 215 | 返回ture在圆内 返回false在圆外 216 | */ 217 | function isInCircle(mouse) { 218 | var pointX = mouse.x-centerX //所选点在坐标系上的x值 219 | var pointY = mouse.y-centerY //所选点在坐标系上的y值 220 | 221 | if (pointX*pointX+pointY*pointY<=movingAreaRadius*movingAreaRadius && canMoving(mouse.x, mouse.y)) { 222 | pointer.x = mouse.x-pointerRadius+widthOffset 223 | pointer.y = mouse.y-pointerRadius+heightOffset 224 | __chooseBtn = isNear(mouse.x, mouse.y) 225 | return true 226 | }else { 227 | return false 228 | } 229 | } 230 | 231 | /*! 计算pointer该显示在什么位置上 */ 232 | function getPointerXY(mouse) { 233 | var pointX = mouse.x-centerX //所选点在坐标系上的x值 234 | var pointY = mouse.y-centerY //所选点在坐标系上的y值 235 | 236 | if (movingActive && !isInCircle(mouse)) { 237 | //当点不在圆内，判断其在第几象限 238 | var l = distance(pointX, pointY, 0, 0) //当前点距离圆心之间的距离 239 | var limitX = (movingAreaRadius/l*pointX)+movingAreaRadius //边缘x的坐标 240 | var limitY = (movingAreaRadius/l*pointY)+movingAreaRadius //边缘y的坐标 241 | if (canMoving(limitX, limitY)) { 242 | pointer.x = limitX-pointerRadius+widthOffset 243 | pointer.y = limitY-pointerRadius+heightOffset 244 | } 245 | } 246 | } 247 | 248 | /*! 判断pointer是否接近某个图标 x,y为当前坐标 */ 249 | function isNear(x, y) { 250 | var nowDistance = compDistance(x, y) 251 | if (nowDistance[0]<=triggerDistance) { 252 | //选中上面的按钮 253 | return 1 254 | }else if (nowDistance[1]<=triggerDistance) { 255 | //选中下面的按钮 256 | return 2 257 | }else if (nowDistance[2]<=triggerDistance) { 258 | //选中左边的按钮 259 | return 3 260 | }else if (nowDistance[3]<=triggerDistance) { 261 | //选中右边的按钮 262 | return 4 263 | }else { 264 | //哪个都没有被选中 265 | return 0 266 | } 267 | 268 | } 269 | 270 | /*! 重置圆点位置 */ 271 | function reset() { 272 | __chooseBtn = 0 273 | var nowl = distance(mouseX, mouseY, centerX, centerY) 274 | runPoint(root.width/2-pointer.width/2, root.height/2-pointer.height/2, nowl/movingAreaRadius*speed) 275 | } 276 | 277 | } 278 | } 279 | --------------------------------------------------------------------------------