《TD開發筆記》TD GUI原生控制元件使用探析
阿新 • • 發佈：2020-12-29
技術標籤：TD開發筆記linux嵌入式TD GUITD控制元件
免責宣告：文中部分資訊有參考到其他網站及牛人的資料，在引用到的地方會註明其來源，如有不宜之處可聯絡本人進行更正或者刪除！學術看法及觀點僅代表個人，僅供參考。知識共享，共同學習，來源於社會，回饋社會。
目錄
1 前言
目前，TD官方的幫助文件非常有限，好多細節需要實際開發過程中經驗性摸索。在原生控制元件的使用過程中，大多數小夥伴都是直接使用TDRealizer拖拽、配置屬性、修改樣式的方式完成介面佈局及設計的，但是有很多細節需要在介面佈局.ini檔案和樣式.rc檔案中才能探個究竟。
2 使用示例
3 控制元件佈局
3.1 一個例子
介面長這個樣子
它的佈局.ini檔案是這樣的
#這是註釋(直到換行) mainwindow = { type="window" x=20; y=20; w = 200; h=100 caption="hello" #style=”style_name” #flags=0 button_ok = { type="button" x=20; y=20; w=50; h=30 caption="ok" #style="style_name" #flags=0 } button_cancel = { type = "button" x=100; y=20; w=50; h=30 caption="cancel" #style="style_name" #flags=0 } }
3.2控制元件的基本屬性
type： 控制元件的型別。一個字串的 id，例如 type=“window” x： 相對於父控制元件的橫向位置。一個整數，例如 x=100 y： 相對於父控制元件的縱向位置。一個整數，例如 y=800 w： 控制元件的大小，寬。一個整數，例如 w=200 h： 控制元件的大小，高。一個整數，例如 h=50 style： 控制元件的風格名。一個字串，例如 style=”hello” flags： 控制元件的標誌（公共標記和私有標記）。一個或多個標記，例如 flags=hide 或者 flags={no_focus; child_no_focus;}4 控制元件樣式
4.1 一個例子
button.ok {
#[nd] 控制元件在normal和disable狀態下的顯示
bg = "file1.png", stretch_hv3
border = "file2.png", 2
border_margin = 2
text_aline = text_left, text_middle
image_aline = image_left, image_middle
text_margin = 1
image_margin = 1
text_color = rgb(0,0,0)
font = "*-12-*"
#[as] 控制元件在active和select狀態下的顯示
bg = rgb(255,0,0)
border = rgb(255,0,0), border_circle, 2
border_margin = 2,2
text_color = rgb(0,0,0),rgb(255,255,255)
#}4.2一般的形式是
type 或者 type.name {
#[status]
item=value
item=value,value,...
#[status]
item=value
item=value,value,...
#}4.3type 表示要設定的控制元件型別
button 按鈕
bool_button 布林值按鈕
text 單行文字輸入框的每行
scrollbar_v_top 垂直滾動條的上端按鈕
scrollbar_v_bottom 垂直滾動條的下端按鈕
scrollbar_v_thumb 垂直滾動條的滑塊
scrollbar_v_background垂直滾動條的背景
scrollbar_h_left 水平滾動條的左端按鈕
scrollbar_h_right 水平滾動條的右端按鈕
scrollbar_h_thumb 水平滾動條的滑塊
scrollbar_h_background水平滾動條的背景
processbar_h_thumb 水平進度條的滑塊
processbar_h_process 水平進度條的進度指示
processbar_h_carrier 水平進度條的背景
processbar_v_thumb 垂直進度條的滑塊
processbar_v_process 垂直進度條的進度指示
processbar_v_carrier 垂直進度條的背景
window 視窗
listview_node 多行列表的節點
listview_item 多行列表的節點裡面的項
#**********************************************************************
name 表示要設定指定風格名的控制元件型別
如果不寫name,表示設定該控制元件型別的預設風格。
當建立一個控制元件時,會在符合這個控制元件型別的所有風格中查詢和控制元件的風格名一致的風格。
如果找不到或使用者沒有設定控制元件的風格名,就採用預設風格。
#**********************************************************************
#**********************************************************************
item表示可以設定的風格項,
value表示設定的值,有4種形式: 字串"string", 10進位制數, 顏色rgb(0~255,0~255,0~255), 關鍵詞
不同的item會要求不同的value個數和形式,下面具體說明
#**********************************************************************
bg
設定控制元件的背景,可以為顏色值,也可以為圖片。
當是圖片時還可以指定圖片的拉伸方式, 拉伸方式有
stretch_normal: 普通拉伸
stretch_hv3: 把圖片分成3x3的9塊,四個角的四塊不拉伸,其他塊拉伸
stretch_hv2: 把圖片分成2x2的4塊,四個角的四塊不拉伸,對兩條分隔線及其交叉點進行拉伸
stretch_tile: 平鋪,不拉伸
例子
bg=rgb(255,200,200)
bg="bg.png",stretch_hv3 不寫拉伸方式,預設是stretch_normal
bg="ParentRelative" 特殊的圖片名,表示採用父控制元件的背景
bg="None" 特殊的圖片名,表示沒有背景
img
控制元件上顯示的前景圖片
img="img.png"
#----------------------------------------------------------------
border
設定控制元件的邊框, 可以為顏色值,也可以為圖片，
當是圖片時，實際繪製時的圖片拉伸方式和bg相同,還可以設定邊框大小，
當是顏色時可以設定邊框的型別和大小,邊框的型別有
border_rect：矩形邊框
border_circle: 圓角邊框
border_down: 凹邊框
border_up: 凸邊框
border_right_br: 下邊和右邊有邊框
border_right_b：下劃線邊框
border_right_b_d：下劃線虛框
border_blank：空白框
例子
border=rgb(255,200,200),border_rect,2
border="bg.png",2
#----------------------------------------------------------------
text_aline
控制元件文字的對齊方式,分為水平對齊和垂直對齊,
text_left: 文字水平左對齊
text_right: 文字水平右對齊
text_top: 文字垂直上對齊
text_bottom: 文字垂直下對齊
text_middle: 文字水平或垂直居中
text_xfollow: 文字水平跟在圖片後面
text_yfollow: 文字垂直跟在圖片後面
例子
text_aline=text_left,text_middle 文字水平靠左邊,垂直居中顯示
#----------------------------------------------------------------
image_aline
控制元件圖片的對齊方式,分為水平對齊和垂直對齊,
image_left: 圖片水平左對齊
image_right: 圖片水平右對齊
image_top: 圖片垂直上對齊
image_bottom: 圖片垂直下對齊
image_middle: 圖片水平或垂直居中
例子
image_aline=image_left,image_middle 圖片水平靠左邊,垂直居中顯示
#----------------------------------------------------------------
text_margin
控制元件中兩行文字之間的間隔
例子
text_margin=1
#----------------------------------------------------------------
image_margin
當文字的對齊方式text_xfollow或text_yfollow時,圖片和文字之間的間隔
例子
image_margin=1
#----------------------------------------------------------------
border_margin
邊框四周和控制元件內部(文字和圖片)的間隔,分為左left,上top,右right,下bottom
例子
border_margin=1 left=1,top=1,right=1,bottom=1
border_margin=1,2 left=1,top=2,right=1,bottom=2
border_margin=1,2,3 left=1,top=2,right=3,bottom=2
border_margin=1,2,3,4 left=1,top=2,right=3,bottom=4
文字和圖片的對齊方式是左對齊時，間隔只考慮left, 右對齊時只考慮right，
居中時考慮left和right；垂直方向類似。
#----------------------------------------------------------------
text_color
設定文字顯示的顏色和背景色
例子
text_color=rgb(0,0,0) 用黑色顯示文字,沒有文字的背景色
text_color=rgb(0,0,0),rgb(0,255,0) 用黑色顯示文字,文字的背景為綠色
#----------------------------------------------------------------
font
控制元件中顯示文字的字型名,預設是繼承父控制元件的字型
如 font = "yahei-16"
#----------------------------------------------------------------
alpha
設定顯示內容的alpha值，預設為255(不透明), 賦值範圍為[0, 255]
如 alpha = 128
#**********************************************************************
status 一個控制元件在它的不同狀態下會有不同的顯示,所以在一個完整的風格
中要根據狀態分組.當開始不寫[status]時就表示設定的是所有狀態下的顯示
#**********************************************************************
每個單元都有四種狀態,分為：
正常狀態（normal）
啟用狀態（active）
被選擇狀態（select）
失效狀態（disable）
其對應的狀態值分別為n、a、s、d 或 N、A、S、D
例子
[nasd] [nas] [n] [sd]
注意：包含n狀態的項一定要排在前面, 控制元件建立時n狀態的項總會先設定.