[MCU] 【我與gui-guider②】button控件

RCSN 樓主
2021-3-19 23:14
本帖最后由 RCSN 于 2021-3-20 21:19 編輯

  botton詞義就是按鈕意思,在lgvl也充當著開關作用。這里說明以gui-guide進行對buttom操作,以便形象理解lgvl的按鈕控件。

  這里我們根據上章的新建工程,參考 http://bbs.eeworld.com.cn/thread-1159377-1-1.html,自行建立好自己分辨率的工程,按button控件的事件觸發作為命名ID,如以下

image.png

  這里我們使用了七個按鈕,也就是說按鈕事件在此設計器中有7個。我們以clicked按鈕介紹下按鈕的相關屬性,依次類推其他控件,都是一樣的操作方式。我們把它切換成中文,這樣對于我們更加方便理解。

1、通用部分,包含了名字ID,控件坐標,控件大小。

image.png

①名字ID:系統默認的是btn_x,有多少個button就按照序號進行排序,但是實際用的時候,建議自己命名,以控件功能作為簡要名稱,同個srceen不能相同命名,但是不同srceen則可以。

②控件坐標:分為橫坐標和縱坐標。當前的設計器版本不支持兩個控件之間對齊方式,這個不太方便,如果需要多個控件對齊,要么在設計器上橫縱坐標一樣,要么自己設計器先隨便放,然后在custom文件中自己手動加API進行對齊。

③控件大小:分為高度和寬度。很簡單,就是定義控件的大小。

 

2、屬性部分,包括文本編輯、切換toggle、字體選擇、字體大小、字體顏色

image.png

①文本編輯:可以按鈕的文本編輯,其實也就是個在button這個父對象建立個label子對象,需要注意的是,默認生成的是對齊Button的中心,如果需要對齊上下左右邊自由對齊,需要在custom自定義代碼中,需要禁止布局功能,當禁止之后,對于子對象在父對象中的擺放位置,子對象必須得手動通過API接口隨便定義對齊。e.g: lv_btn_set_layout(ui->led_page1_btn_back, LV_LAYOUT_OFF)

②切換:也就是toggle,這里勾選就是把按鈕當作開關用,點擊前后樣式改變后,之后的樣式就保持不變,直到下一次點擊。

③字體選擇:目前只支持simsum,但是這種字體很丑,我們可以自己生成自己的字庫,通過custom來改變設計器的字庫,這個后面章節會進行說明。

note:設計器當前有選項可支持導入自定義字體,但是導入不生效,畢竟V1.0版本,等待官方修復即可。

image.png

④字體大小:也就是字體的大小,字體越大,消耗ROM也就越大,自己均衡資源決定大小。

⑤字體顏色:也就是字體的顏色RGB,可手動輸入RGB,也可以自己在顏色框選擇

image.png

1084534438 歡迎交流  [加油,一切皆有可能]

回復評論 (13)

沙發 freebsder

2021-3-19 23:15

就喜歡看RC折騰新東西

默認摸魚

板凳 RCSN

2021-3-19 23:16
本帖最后由 RCSN 于 2021-3-20 21:17 編輯

3、樣式屬性,不同狀態可以有不同的樣式,lgvl 7.0以上最大改變就在這里,樣式的多樣化,也給用戶提供多選擇。包括背景、內外邊框、動畫效果等都有。

image.png

①默認樣式:若勾選,則各個狀態的樣式都是按照默認的來。

②狀態:也就是控件的當前狀態,這里包含了缺省狀態(沒有任何動作)、聚焦、單擊、翻轉狀態

image.png

③禁用功能:若點擊,則狀態當前選擇的樣式是無效的,動作發生了樣式也不會顯示出來。

④背景 :也就是控件的背景顏色,這里包含了背景色、漸變色、透明度、和漸變方式。255就是不透明,0是透明。

e.g 若選擇的背景色是藍色,漸變色為白色,透明度為255,漸變方向為垂直,則效果如下:

image.png

若選擇的背景色是藍色,漸變色為白色,透明度是150,漸變方向是水平,效果如下,透明度在有圖片或者顏色的前景下很有用。

image.png

接下圖

image.png

①邊框:有顏色、透明度、寬度、圓角可選擇。為了方便理解這幾個屬性,這里列舉了右邊的A控件、B控件、C控件。A是圖上默認的樣式邊框,B是透明度變為150,寬度變為4,圓角為200;C則是把圓角為0,這樣變成了長方形。

③動畫 這是Lgvl的新改變,這里如果設置了動畫,則會位移和方式、持續時間進行動畫移動。

4、事件 button支持不少事件,事件屬性包含以下,有目標對象,觸發方式,作用對象,對作用對象的動作是怎樣的,事件的處理在設計器上,Button已經足夠很完善。特別是還支持自定義C語言,這個也給用戶足夠的擴展性。

image.png

這里我們把每個控件作為一個事件名稱,然后作用對象還是自己,每個控件的動作不一樣,有的是觸發就改變背景顏色,改變控件長寬,隱藏控件,設置動畫等。這里我們看下設計器的模擬器和在單片機的運行情況。


QQ圖片20210320204013.gif

 

QQ圖片20210320211151.gif

 

 

1084534438 歡迎交流  [加油,一切皆有可能]

4樓 annysky2012

2021-3-20 13:43
復制以后,將文中圖片重新插入即可

5樓 Jacktang

2021-3-20 18:42

RGB自動可調時能顯示三種顏色的數字值么

6樓 RCSN

2021-3-20 19:47
引用: Jacktang 發表于 2021-3-20 18:42 RGB自動可調時能顯示三種顏色的數字值么

可以,這點設計器容易實現

1084534438 歡迎交流  [加油,一切皆有可能]

7樓 RCSN

2021-3-20 19:47
引用: annysky2012 發表于 2021-3-20 13:43 復制以后,將文中圖片重新插入即可

我現在就是這么做的

1084534438 歡迎交流  [加油,一切皆有可能]

8樓 RCSN

2021-3-20 21:19

至此,button控件已經說明完畢,下一章,btnimg控件,也就是帶圖片的按鈕空間。

1084534438 歡迎交流  [加油,一切皆有可能]

9樓 dql2016

2021-3-22 13:36

這個設計器哪里下載,看著不錯

10樓 RCSN

2021-3-22 17:28
引用: dql2016 發表于 2021-3-22 13:36 這個設計器哪里下載,看著不錯

NXP官網下載即可

1084534438 歡迎交流  [加油,一切皆有可能]

11樓 ou513

2021-3-23 08:00

好東西,弱弱的請教一下,button如何響應實體按鍵?

12樓 RCSN

2021-3-23 22:26
引用: ou513 發表于 2021-3-23 08:00 好東西,弱弱的請教一下,button如何響應實體按鍵?

可以通過讀取實體按鍵狀態來改變button的狀態以及樣式

1084534438 歡迎交流  [加油,一切皆有可能]

13樓 深宣宣

2021-6-16 15:36

馬克一下

14樓 w494143467

2021-6-29 17:40

樓主是要把guider玩個遍啊~

電子工程世界版權所有 京B2-20211791 京ICP備10001474號-1 京公網安備 11010802033920號
    我也要說兩句
    發送
    評論
    萝卜大香蕉