整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
入控件作為最常用的界面設(shè)計(jì)控件之一，包含了哪些類型以及各類型與特征以及使用關(guān)鍵點(diǎn)有哪些呢？一起來了解下。
文章大綱：
數(shù)值參數(shù)是對(duì)象屬性之一，其值為數(shù)字。
具體例子包括：電商網(wǎng)站上的商品價(jià)格、數(shù)量，以及照片編輯應(yīng)用中的照片透明度等。
常用的數(shù)值參數(shù)交互控件包括：文本輸入框、滑塊、旋鈕控件、可編輯的二維曲線控件以及能對(duì)預(yù)先給定的默認(rèn)值進(jìn)行遞增或遞減的步進(jìn)器等。
不同控件適用于不同的交互場(chǎng)景來傳達(dá)編輯數(shù)值信息。
多數(shù)情況下，控件的類型和參數(shù)值之間存在一定的自然映射關(guān)系。比如旋鈕控件，可以自然地跟角度參數(shù)相對(duì)應(yīng)。
這些UI控件傳達(dá)編輯數(shù)值信息的同時(shí)，也遵循了「尼爾森十大可用性原則」之一 ——環(huán)境貼切原則：匹配系統(tǒng)與真實(shí)世界
許多創(chuàng)意類或數(shù)據(jù)分析類的應(yīng)用和網(wǎng)站均包含了較長(zhǎng)的表單，允許用戶對(duì)特定屬性進(jìn)行詳細(xì)調(diào)整?？丶趯?shí)現(xiàn)連續(xù)復(fù)雜的數(shù)值變化的同時(shí)，需要建立以下兩種體驗(yàn)上的平衡：
輸入控件的兩種主要類型：
嚴(yán)格來說，范圍值從0到100的滑塊是一個(gè)離散型控件，因?yàn)樗闹挡⒉皇沁B續(xù)的。而實(shí)際使用當(dāng)中，如果一個(gè)滑塊可選的數(shù)值范圍夠大而且不僅限于有限的幾個(gè)固定選項(xiàng)值的話，可以被認(rèn)為是連續(xù)型控件，從用戶的實(shí)際體驗(yàn)上來看它也是連續(xù)的。
Mac 版本 Kindle 包含了離散型及連續(xù)型兩種控件：
線性滑塊是一種有用的控件，當(dāng)對(duì)應(yīng)值屬于給定的范圍內(nèi)（明確的最大值和最小值），并且數(shù)值的精確度對(duì)用戶來說沒那么重要時(shí)。
根據(jù) Accot-Zhai 提出的“引導(dǎo)法則”（Steering Law），在滑塊上選定一個(gè)精確值并不容易。
所謂“引導(dǎo)法則”，是由人機(jī)交互原則之一的費(fèi)茨定律推導(dǎo)而來。
引導(dǎo)法則：用戶滑動(dòng)二維路徑上的滑塊時(shí)所需的時(shí)間受路徑的長(zhǎng)度和寬度影響。簡(jiǎn)單地說，路徑越寬或長(zhǎng)度越短，則滑塊移動(dòng)速度越快。大多數(shù)的滑塊寬度較窄，使得用戶很難選中相對(duì)精確值。
線性滑塊的高效性在于：用戶在滑動(dòng)滑塊的過程中可以實(shí)時(shí)預(yù)覽效果。一旦用戶的操作和實(shí)際效果存在一定延遲，線性滑塊可能就不是個(gè)合適的選擇。（根據(jù)標(biāo)準(zhǔn)響應(yīng)時(shí)間原則，延遲的時(shí)間最多不應(yīng)超過0.1s）
如果是頁面顯示結(jié)果比較費(fèi)時(shí)的情況下，滑塊同樣不是個(gè)很好的選擇。
可選擇諸如：實(shí)時(shí)渲染視頻效果，龐大的數(shù)據(jù)集合的篩選控件（e.g.價(jià)格范圍的篩選）等等……
IOS系統(tǒng)屏幕亮度滑塊并不是用于選定一個(gè)準(zhǔn)確的亮度值，而是獲取一個(gè)相近的、類似的亮度值。
通常來說，用戶移動(dòng)滑塊僅僅是為了讓屏幕比現(xiàn)有的更亮或更暗些。
這種控件的易用性關(guān)鍵在于——系統(tǒng)是否能夠在用戶滑動(dòng)滑塊的同時(shí)通過改變屏幕亮度來給予即時(shí)反饋。
一旦用戶的操作和它產(chǎn)生的實(shí)際屏幕亮度效果存在較大延遲，用戶也就無法在滑塊上準(zhǔn)確地選定合適的亮度值。
滑塊控件的其中一種變體是：具有兩個(gè)在可選值范圍內(nèi)移動(dòng)的滑塊。
這種滑塊變體常用于網(wǎng)頁界面的篩選，用戶可以設(shè)定最小最大價(jià)格，航班的起始和結(jié)束時(shí)間等。
和其他類型的滑塊類似，雙滑塊控件選取準(zhǔn)確值比較困難，因此這種控件僅適用于少數(shù)情況。
雙滑塊與直方圖之類的圖表結(jié)合使用時(shí)，可以確保選擇的范圍值可實(shí)際匹配到對(duì)應(yīng)的內(nèi)容或選項(xiàng)，從而避免無搜索結(jié)果的情況的發(fā)生。
Kayak 網(wǎng)站（提供機(jī)票、酒店服務(wù)的旅游網(wǎng)站）的一大特征就是提供范圍選擇滑塊來篩選航班起飛時(shí)間段。
雖然精確的起飛時(shí)間如12:15pm比較難選中，但航班起飛時(shí)間與對(duì)應(yīng)費(fèi)用圖表的搭配使用，使得用戶在平衡時(shí)間和費(fèi)用后作出較優(yōu)選擇變?yōu)榭赡堋?/p>
旋鈕控件或其他用戶需要旋轉(zhuǎn)的控件自然地代表了平移（音頻工程師可以在混合音頻的時(shí)候調(diào)節(jié)音頻的左右聲道）之類的參數(shù)。
然而，使用常用的鼠標(biāo)、觸控板等輸入設(shè)備去操作旋鈕有一定的難度，在旋轉(zhuǎn)功能上不具備較好的功能可見性。
鑒于鼠標(biāo)之類的線性輸入設(shè)備執(zhí)行旋轉(zhuǎn)操作比較困難，一些設(shè)計(jì)中會(huì)賦予旋鈕一種隱式的線性拖動(dòng)操作。用戶可以任意通過點(diǎn)擊、上下或垂直拖動(dòng)來調(diào)整數(shù)值大小。
但這種線性拖動(dòng)操作往往是意料之外的，通常不作任何提示，難以被用戶發(fā)現(xiàn)。
另外，如果應(yīng)用不當(dāng)，會(huì)使那些試圖通過鼠標(biāo)轉(zhuǎn)圈去模仿旋鈕旋轉(zhuǎn)的人失去自主控制權(quán)。
GarageBand (一款數(shù)碼音樂創(chuàng)作軟件) 為用戶提供多個(gè)旋鈕，通過點(diǎn)擊或垂直拖動(dòng)進(jìn)行旋轉(zhuǎn)。
該設(shè)計(jì)彌補(bǔ)了不能很好掌控旋轉(zhuǎn)的設(shè)備（鼠標(biāo)等）的缺陷，但是不容易被發(fā)現(xiàn)，并且與用戶嘗試移動(dòng)光標(biāo)轉(zhuǎn)圈來轉(zhuǎn)動(dòng)旋鈕的意圖相違背。
這個(gè)例子里，旋鈕控件的靈感來源于過去的音頻工程師所使用的旋鈕，是擬物設(shè)計(jì)的不恰當(dāng)應(yīng)用實(shí)例之一。
既然它的參數(shù)值并不能很好地映射到一個(gè)圈內(nèi)，水平的滑塊可能更適用于該參數(shù)。
Adobe 圖像管理器 Lightroom 的設(shè)置面板針對(duì)數(shù)值參數(shù)使用了多種輸入控件，其中包括了滑塊和旋鈕。
盡管每個(gè)控件都代表連續(xù)的數(shù)值，他們也反映了一些重要的額外的關(guān)于這些被修改數(shù)據(jù)的信息。
其中包括：用旋鈕來代表物體周邊陰影角度的角度控件；包含最小和最大值范圍值的滑塊（e.g.0% – 100%透明度滑塊）。
二維曲線輸入控件是一種通過調(diào)整一個(gè)復(fù)雜曲線來同時(shí)修改多個(gè)相關(guān)參數(shù)的專業(yè)控件。
通常情況下與之交互方式是，通過在已有的直線或曲線上添加一個(gè)節(jié)點(diǎn)。
一旦添加了新的節(jié)點(diǎn)，并且將節(jié)點(diǎn)拖曳至新位置時(shí)，系統(tǒng)會(huì)在兩個(gè)節(jié)點(diǎn)之間繪制出一條新的曲線。
這種控件在以下情況下非常實(shí)用：有兩個(gè)相關(guān)聯(lián)、互相牽制、會(huì)被同時(shí)修改的參數(shù)（e.g.圖像視頻編輯應(yīng)用里的亮度和RGB曲線）或需要通過二維空間來描述物體的位置和路徑時(shí)（e.g. 電影的環(huán)繞聲）。
GIMP（GNU圖像處理程序）用二維曲線控件來同時(shí)控制多個(gè)參數(shù)，否則可能需要多個(gè)滑塊才能實(shí)現(xiàn)。
上述例子中，X 軸 Y 軸代表不同參數(shù)，其中 X 軸（從暗到亮）對(duì)應(yīng)輸入，Y 軸對(duì)應(yīng)輸出。曲線越接近于水平，圖片的整體色調(diào)范圍越小。
如果這些數(shù)值用滑塊來表示并進(jìn)行調(diào)節(jié)，可能需要多對(duì)控件來實(shí)現(xiàn)，每個(gè)對(duì)應(yīng)用戶需要調(diào)整的參數(shù)值。
使用二維網(wǎng)格的情況下，用戶簡(jiǎn)單地通過點(diǎn)擊在線上添加任意位置節(jié)點(diǎn)，將節(jié)點(diǎn)拖曳至新的坐標(biāo)處。
這類設(shè)計(jì)使得用戶可以通過一些小的調(diào)整來完成復(fù)雜曲線的創(chuàng)建。
實(shí)現(xiàn)精確值輸入最簡(jiǎn)單的一種方式是使用輸入框，用戶可以輸入該精確值。
然而，這種解決方案提供精確輸入的同時(shí)，不支持用戶高效地探索參數(shù)值范圍。
輸入一個(gè)提前已知的值比較簡(jiǎn)單，但在你不知道要輸入什么值的情況下，如果讓你不停地隨機(jī)輸入一個(gè)看起來像樣的顏色值，整個(gè)過程是冗長(zhǎng)乏味的。
即使額外提供增減顏色值的步進(jìn)器按鈕。有些文本框甚至不會(huì)顯示可輸入值的范圍。比如，RGB 顏色值輸入框，對(duì)于新手用戶來說 RGB 顏色值的范圍是0-255就不是那么直觀。
Microosoft Ofiice 通過在輸入框旁添加上下箭頭按鈕的步進(jìn)器，來快速地增減數(shù)值。
上述輸入框問題的一個(gè)典型的解決方案是，使用兩個(gè)互相獨(dú)立而又相關(guān)聯(lián)的控件來對(duì)同個(gè)參數(shù)進(jìn)行或粗略或精準(zhǔn)的數(shù)值調(diào)整。
所謂聯(lián)合控件是指兩種（或多種）調(diào)整同個(gè)數(shù)值的控件組合。
一般來說，連續(xù)型控件，如：滑塊，用于粗略的輸入，不斷探索范圍內(nèi)的數(shù)值從而找出所需值的大致臨近值。
之后，輸入框作為精確控件用來確定具體的數(shù)值。精確控件也有助于那些已經(jīng)知道所需具體數(shù)值的超級(jí)用戶。
聯(lián)合控件的設(shè)計(jì)不僅支持輸入值的精細(xì)調(diào)整，也能直接顯示出當(dāng)前狀態(tài)下的參數(shù)值，告知用戶與其期望輸出效果相關(guān)聯(lián)的值是多少。
一個(gè)關(guān)鍵點(diǎn)：由于這兩個(gè)控件持續(xù)關(guān)聯(lián)，兩者展示同一值時(shí)調(diào)整其中一個(gè)，另一個(gè)控件值應(yīng)隨之立即（通常指0.1s之內(nèi)）發(fā)生變化。
為了使聯(lián)合控件有更好的使用體驗(yàn)，用戶調(diào)整滑塊時(shí)，鍵盤的聚焦應(yīng)移動(dòng)至輸入框。
這樣一來，用戶設(shè)置粗略滑塊值后能輕松在文本框進(jìn)行輸入，而無需點(diǎn)擊文本框。這個(gè)設(shè)計(jì)有助于讓尋的（即移動(dòng)手從鼠標(biāo)到鍵盤或鍵盤到鼠標(biāo)的行為）更高效。
另外無論如何要確保的是：當(dāng)鍵盤聚焦在微調(diào)輸入控件，鍵盤快捷鍵仍能被使用。
近期的（文章寫于2017.04）一個(gè)可用性研究中顯示，某個(gè) Adobe Photoshop 的PC用戶在使用透明度滑塊與鍵盤去放大（Alt+滾輪）時(shí)遇到了問題：
一旦鍵盤聚焦在輸入框，該用戶使用快捷鍵時(shí)系統(tǒng)總會(huì)播放錯(cuò)誤的提示音（輸入框僅允許數(shù)字作為有效輸入）。
合適的參數(shù)默認(rèn)值十分重要：不僅能節(jié)省用戶時(shí)間和精力，而且能為新手提供使用指導(dǎo)。
典型的默認(rèn)值便是選取一個(gè)中立的值（取決于具體參數(shù)）：對(duì)于縮放滑塊來說，100%（值位于滑塊中間）是個(gè)理想的默認(rèn)值；對(duì)于其他包含0和最大值的控件，理想的默認(rèn)值可能是中點(diǎn)。
為默認(rèn)值的輸入提供便捷的方式，例如：重置按鈕。
一旦中立數(shù)值在范圍中的某個(gè)位置或者所處位置不明顯時(shí)，重置按鈕顯得尤其好用。
如果默認(rèn)值帶有某種視覺指示符號(hào)同樣易于使用，比如默認(rèn)值在滑塊上所處位置顯示小箭頭刻度線。
Apple 的相冊(cè)應(yīng)用包含多個(gè)調(diào)節(jié)參數(shù)滑塊以及能夠一鍵重置這些數(shù)值的重置按鈕。（然而，該重置功能被隱藏于上下文菜單中）
精確的數(shù)值輸入依賴于合適的控件選擇。
控件傳遞出的信息不僅包括這些控件應(yīng)該如何被使用，也包含了它們所代表數(shù)值的范圍。
控件應(yīng)該提供簡(jiǎn)便的方式用于探索可能的數(shù)值范圍選項(xiàng)以及給定精確值。
為用戶提供獨(dú)立而又相關(guān)聯(lián)的粗略和精確輸入控件，給定合適默認(rèn)值的同時(shí)為正在使用粗略數(shù)值控件的用戶提供輸入框的鍵盤聚焦。
原文作者：Page Laubheimer
原文地址：https://www.nngroup.com/articles/sliders-knobs
翻譯：一起吃雪糕
本文由 @一起吃雪糕 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
pp中常使用的時(shí)間(日期)選擇組件有滾輪式與日歷式2種。同樣都可以實(shí)現(xiàn)具體時(shí)間或時(shí)間段選擇的功能，實(shí)際應(yīng)用中該如何取舍呢？今天我們就來看看這兩種方式各自的優(yōu)勢(shì)與使用場(chǎng)景。
一、滾輪式時(shí)間選擇器
交互方式
1. 點(diǎn)擊btn呼出選擇器
①從屏幕底部呼出彈層，如滴滴
②從菜單欄下方呼出彈層，如網(wǎng)易有錢
③在當(dāng)前屏幕展開，如TIM
2. 上劃滑動(dòng)滾輪進(jìn)行選擇
3. 點(diǎn)擊確定按鈕進(jìn)行提交
優(yōu)勢(shì)
1. 取材于用戶現(xiàn)實(shí)中熟悉的密碼鎖、記分牌樣式、用戶熟悉上下滑動(dòng)的操作方式，學(xué)習(xí)門檻低
2. 體積小，節(jié)約空間，多種頁面位置，方便與多種情景進(jìn)行配合3. 對(duì)用戶的操作干擾性較小
劣勢(shì)
1. 滾動(dòng)選擇方式較枯燥，在滾輪選項(xiàng)很多時(shí)，用戶可能會(huì)在多次滾動(dòng)選擇中產(chǎn)生不耐煩情緒
2. 除了數(shù)字外沒有其他信息進(jìn)行核實(shí)確認(rèn)
3. 視覺表現(xiàn)不夠生動(dòng)
適用場(chǎng)景
1. 用戶對(duì)自己要選擇的具體時(shí)間節(jié)點(diǎn)非常明確，例如生日、紀(jì)念日、預(yù)約服務(wù)、待辦事項(xiàng)
2. 不同的用戶選擇的時(shí)間節(jié)點(diǎn)跨度很廣，例如生日的年份會(huì)從1900-2018
使用建議
1. 選項(xiàng)數(shù)量一般為2~3項(xiàng)，最多5項(xiàng)；
2. 為用戶設(shè)置合理的默認(rèn)選項(xiàng)，減少操作次數(shù)，提升效率，例如：
3. 選擇合適的展開位置，把滾輪選擇器放到控件觸發(fā)區(qū)域附近，方便用戶操作
4. 用“今天”、“昨天”等相對(duì)概念，更快的激發(fā)人對(duì)時(shí)間的感知，例如上圖滴滴、TIM
5. 不顯示不可選時(shí)間，暗示用戶可選日期，降低用戶誤操作可能性
6. 若有選項(xiàng)為非必填項(xiàng)，可提供忽略該選項(xiàng)操作，如下圖生日管家，可選擇不填寫年份，點(diǎn)擊忽略按鈕后，年份收起。
二、日歷式時(shí)間選擇器
交互方式
1. 點(diǎn)擊btn打開選擇器，通常為新開頁面（如上圖飛豬）或全屏彈層（如去哪兒）
2. 點(diǎn)擊或者滑動(dòng)選擇某一具體時(shí)間或時(shí)間段
3. 點(diǎn)擊確定按鈕進(jìn)行提交
優(yōu)勢(shì)
1. 取材于用戶現(xiàn)實(shí)中熟悉的日歷樣式，用戶學(xué)習(xí)成本低。
取材于用戶現(xiàn)實(shí)中熟悉的密碼鎖、記分牌樣式、用戶熟悉上下滑動(dòng)的操作方式，學(xué)習(xí)門檻低
優(yōu)勢(shì)
1. 取材于用戶現(xiàn)實(shí)中熟悉的密碼鎖、記分牌樣式、用戶熟悉上下滑動(dòng)的操作方式，學(xué)習(xí)門檻低
劣勢(shì)
1. 占用面積大，新開頁面或全屏彈層對(duì)用戶操作的連續(xù)性干擾較大
2. 單頁展示的時(shí)間選項(xiàng)較少，不便于選擇時(shí)間跨度較大的時(shí)間段
適用場(chǎng)景
1. 用戶不能明確具體時(shí)間，只有大致范圍，例如這個(gè)月的某一天
2. 用戶需要對(duì)自己選擇的時(shí)間進(jìn)行二次確認(rèn)，例如通過星期確定時(shí)間有沒有記錯(cuò)
3. 不同用戶選擇的時(shí)間主要集中在一個(gè)范圍內(nèi)，如預(yù)定火車票主要集中在未來一個(gè)月內(nèi)
使用建議
1. 設(shè)置合理的默認(rèn)頁面，減少操作次數(shù)，提升效率。通常采用日歷式選擇器的場(chǎng)景都是選擇近期時(shí)間，所以默認(rèn)頁面為當(dāng)前月，如本章節(jié)頂部示例，都默認(rèn)展示當(dāng)前月。
2. 提供返回默認(rèn)頁的按鈕，方便用戶進(jìn)行選擇；如下圖生日管家、大姨媽，在查看日歷時(shí)，當(dāng)日歷顯示頁為非當(dāng)前頁時(shí)，出現(xiàn)返回當(dāng)前日期按鈕
3. 當(dāng)選擇時(shí)間范圍跨度較大時(shí)提供快速跳轉(zhuǎn)的方式，可以與滾輪式選擇器配合使用
4. 將不可選擇的時(shí)間置灰，暗示用戶可選日期，降低用戶誤操作可能性
總結(jié)
綜上所述，滾輪式時(shí)間選擇器和日歷式時(shí)間選擇器各有所長(zhǎng)，設(shè)計(jì)師要根據(jù)實(shí)際場(chǎng)景對(duì)分析需求并靈活判斷該用哪種交互方式更合理。
當(dāng)然，沒有最好只有更好，今天分析的兩種方式只是較為常見的選擇方式，可以用于大部分場(chǎng)景下。在這之外也有其他特別的方式，例如：
貨拉拉：彈層外區(qū)域顯示已選中內(nèi)容自如：表格式選擇滴答清單：可自定義選擇日歷的排布方式詳細(xì)情況就不在這里嘮叨啦，如果你感興趣的話，百看不如一見，不妨親自去試一試~也許會(huì)有新收獲哦。
這個(gè)控件是近期定制的控件，還是比較實(shí)用的控件之一，用戶主要是提了三點(diǎn)需求，一點(diǎn)是切換焦點(diǎn)的時(shí)候控件放大突出顯示，一點(diǎn)是可直接輸入或者編輯值，還有一點(diǎn)是支持上下鍵及翻頁鍵和鼠標(biāo)滾輪來動(dòng)態(tài)修改值，類似于qspinbox控件。要能夠支持直接輸入首先想到的就是qlineedit控件，在原有的儀表盤控件上中間部分，放置一個(gè)qlineedit控件用來輸入值，采用正則表達(dá)式來限制只能輸入數(shù)字，為了使得qlinedit和自定義繪制的儀表盤完全融為一體，必須設(shè)置qlineedit的樣式為背景透明，至于輸入框的位置，有個(gè)小技巧就是直接將輸入框設(shè)置為控件的大小，這樣輸入的焦點(diǎn)永遠(yuǎn)在控件的中間，完全混合，絲毫看不出是一個(gè)輸入框控件插在那里，至于上下鍵及翻頁鍵和鼠標(biāo)滾輪，直接安裝事件過濾器即可識(shí)別到，進(jìn)行對(duì)應(yīng)的處理即可。
* 1:可設(shè)置范圍值,支持負(fù)數(shù)值
* 2:可設(shè)置開始旋轉(zhuǎn)角度/結(jié)束旋轉(zhuǎn)角度
* 3:可設(shè)置是否啟用動(dòng)畫效果以及動(dòng)畫效果每次移動(dòng)的步長(zhǎng)
* 4:可設(shè)置外圓背景/內(nèi)圓背景/進(jìn)度顏色/空余顏色/文字顏色
* 5:自適應(yīng)窗體拉伸,文字自動(dòng)縮放
* 6:支持tab及鼠標(biāo)按下切換焦點(diǎn)
* 7:支持直接輸入值立即應(yīng)用
* 8:獲取焦點(diǎn)控件自動(dòng)變大
* 9:支持鍵盤上下鍵步長(zhǎng)為1修改值
* 10:支持上下翻頁鍵步長(zhǎng)為10修改值
* 11:支持鼠標(biāo)滾輪步長(zhǎng)為1修改值
void GaugeEdit::paintEvent(QPaintEvent *)
{
int width=this->width();
int height=this->height();
int side=qMin(width, height);
//繪制準(zhǔn)備工作,啟用反鋸齒,平移坐標(biāo)軸中心,等比例縮放
QPainter painter(this);
painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
painter.translate(width / 2, height / 2);
painter.scale(side / 200.0, side / 200.0);
//繪制外圓
drawOuterCircle(&painter);
//繪制內(nèi)圓
drawInnerCircle(&painter);
//繪制當(dāng)前進(jìn)度
drawProgress(&painter);
//繪制中心圓
drawCenterCircle(&painter);
//繪制單位
drawUnit(&painter);
}
void GaugeEdit::drawOuterCircle(QPainter *painter)
{
int radius=91 + offset;
painter->save();
painter->setPen(Qt::NoPen);
painter->setBrush(outerCircleColor);
painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
painter->restore();
}
void GaugeEdit::drawInnerCircle(QPainter *painter)
{
int radius=80 + offset;
painter->save();
painter->setPen(Qt::NoPen);
painter->setBrush(innerCircleColor);
painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
painter->restore();
}
void GaugeEdit::drawProgress(QPainter *painter)
{
int radius=75 + offset;
painter->save();
painter->setPen(Qt::NoPen);
QRectF rect(-radius, -radius, radius * 2, radius * 2);
//計(jì)算總范圍角度,當(dāng)前值范圍角度,剩余值范圍角度
double angleAll=360.0 - startAngle - endAngle;
double angleCurrent=angleAll * ((currentValue - minValue) / (maxValue - minValue));
double angleOther=angleAll - angleCurrent;
//繪制當(dāng)前值餅圓
painter->setBrush(usedColor);
painter->drawPie(rect, (270 - startAngle - angleCurrent) * 16, angleCurrent * 16);
//繪制剩余值餅圓
painter->setBrush(freeColor);
painter->drawPie(rect, (270 - startAngle - angleCurrent - angleOther) * 16, angleOther * 16);
painter->restore();
}
void GaugeEdit::drawCenterCircle(QPainter *painter)
{
int radius=60 + offset;
painter->save();
painter->setPen(Qt::NoPen);
painter->setBrush(centerCircleColor);
painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
painter->restore();
}
void GaugeEdit::drawUnit(QPainter *painter)
{
int radius=100;
painter->save();
painter->setPen(textColor);
QFont font;
font.setPixelSize(30);
painter->setFont(font);
int offsetY=110;
QRectF unitRect(-radius, -radius + offsetY, radius * 2, radius * 2 - offsetY);
painter->drawText(unitRect, Qt::AlignCenter, unit);
painter->restore();
}
1. 超過150個(gè)精美控件，涵蓋了各種儀表盤、進(jìn)度條、進(jìn)度球、指南針、曲線圖、標(biāo)尺、溫度計(jì)、導(dǎo)航條、導(dǎo)航欄，flatui、高亮按鈕、滑動(dòng)選擇器、農(nóng)歷等。遠(yuǎn)超qwt集成的控件數(shù)量。
2. 每個(gè)類都可以獨(dú)立成一個(gè)單獨(dú)的控件，零耦合，每個(gè)控件一個(gè)頭文件和一個(gè)實(shí)現(xiàn)文件，不依賴其他文件，方便單個(gè)控件以源碼形式集成到項(xiàng)目中，較少代碼量。qwt的控件類環(huán)環(huán)相扣，高度耦合，想要使用其中一個(gè)控件，必須包含所有的代碼。
3. 全部純Qt編寫，QWidget+QPainter繪制，支持Qt4.6到Qt5.12的任何Qt版本，支持mingw、msvc、gcc等編譯器，支持任意操作系統(tǒng)比如windows+linux+mac+嵌入式linux等，不亂碼，可直接集成到Qt Creator中，和自帶的控件一樣使用，大部分效果只要設(shè)置幾個(gè)屬性即可，極為方便。
4. 每個(gè)控件都有一個(gè)對(duì)應(yīng)的單獨(dú)的包含該控件源碼的DEMO，方便參考使用。同時(shí)還提供一個(gè)所有控件使用的集成的DEMO。
5. 每個(gè)控件的源代碼都有詳細(xì)中文注釋，都按照統(tǒng)一設(shè)計(jì)規(guī)范編寫，方便學(xué)習(xí)自定義控件的編寫。
6. 每個(gè)控件默認(rèn)配色和demo對(duì)應(yīng)的配色都非常精美。
7. 超過130個(gè)可見控件，6個(gè)不可見控件。
8. 部分控件提供多種樣式風(fēng)格選擇，多種指示器樣式選擇。
9. 所有控件自適應(yīng)窗體拉伸變化。
10. 集成自定義控件屬性設(shè)計(jì)器，支持拖曳設(shè)計(jì)，所見即所得，支持導(dǎo)入導(dǎo)出xml格式。
11. 自帶activex控件demo，所有控件可以直接運(yùn)行在ie瀏覽器中。
12. 集成fontawesome圖形字體+阿里巴巴iconfont收藏的幾百個(gè)圖形字體，享受圖形字體帶來的樂趣。
13. 所有控件最后生成一個(gè)動(dòng)態(tài)庫文件(dll或者so等)，可以直接集成到qtcreator中拖曳設(shè)計(jì)使用。
14. 目前已經(jīng)有qml版本，后期會(huì)考慮出pyqt版本，如果用戶需求量很大的話。
15. 自定義控件插件開放動(dòng)態(tài)庫使用（永久免費(fèi)），無任何后門和限制，請(qǐng)放心使用。
16. 目前已提供26個(gè)版本的dll，其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
17. 不定期增加控件和完善控件，不定期更新SDK，歡迎各位提出建議，謝謝！
18. Qt入門書籍推薦霍亞飛的《Qt Creator快速入門》《Qt5編程入門》，Qt進(jìn)階書籍推薦官方的《C++ GUI Qt4編程》。
19. 強(qiáng)烈推薦程序員自我修養(yǎng)和規(guī)劃系列書《大話程序員》《程序員的成長(zhǎng)課》《解憂程序員》，受益匪淺，受益終生！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
