特别说明：完整STemWin的1-60期教程和配套实例下载地址：链接
5 X; w, c* S' M  D, P

第58章 SPINBOX控件

* P4 o; u, p  r8 c

    本期教程讲解STemWin支持的SPINBOX控件。

    58. 1 SPINBOX控件介绍

    58. 2 官方WIDGET_Spinbox实例

    58. 3 使用官方GUIBulder建立SPINBOX控件

    58. 3 总结

* P7 o( ~7 K7 H% C( O58.1 SPINBOX控件介绍

    SPINBOX控件主要用于需要快速而准确的数据调整，SPINBOX控件是由一个编辑框和两个按钮组成。默认的显示效果如下：

设置了皮肤色后显示效果如下：

58.1.1 SPINBOX支持的通知代码

    以下事件是编辑框控件作为WM_NOTIFY_PARENT消息的一部分发送给其父窗口的：

" ~3 c( h7 B9 C2 o! F$ p- E7 G

消息	描述
WM_NOTIFICATION_CLICKED	已被点击。
WM_NOTIFICATION_RELEASED	已被释放。
WM_NOTIFICATION_MOVED_OUT	已被点击，且指针已移出控件，但没有释放。
WM_NOTIFICATION_VALUE_CHANGED	SPINBOX的值 （内容）已更改。

58.1.2 SPINBOX支持的键盘反应

    同第43章中的43.1.2小节一样。

58.2 官方WIDGET_Spinbox实例

    官方的这个实例很好的演示了spinbox的使用，这个例子在模拟器中的位置：

源码如下（程序中进行了详细的注释）：

1. #include "GUI.h"
   
2. #include "DIALOG.h"
   - O  e. }: Y9 p; ?
3. 
   / z4 m8 q4 l! V; Y- n! D. O% E" G
4. /*********************************************************************
   
5. *
   5 N* T( n* f! g5 ], @2 m
6. *       Static data
   + B# i& b7 M' w+ S+ s* a/ U
7. *
   
8. **********************************************************************
   
9. */
   
10. static const GUI_WIDGET_CREATE_INFO _aDialogSpinbox[] = {
    
11.   { FRAMEWIN_CreateIndirect, "Spinbox",           0,                 0,  0, 260, 160, 0, 0, 0 },
    ( W5 e8 w1 x2 N9 n. i$ K8 a
12.   { TEXT_CreateIndirect,     "Step value",        GUI_ID_TEXT0,     20, 15, 100,  21, 0, 0, 0 },
    
13.   { TEXT_CreateIndirect,     "Editmode "Step"", GUI_ID_TEXT1,     20, 42, 100,  21, 0, 0, 0 },
    
14.   { TEXT_CreateIndirect,     "Editmode "Edit"", GUI_ID_TEXT2,     20, 75, 100,  21, 0, 0, 0 },
    9 T! r+ [! l' \3 m
15.   { SPINBOX_CreateIndirect,  NULL,                GUI_ID_SPINBOX0, 130, 15,  60,  21, 0, 0, 0 },
    3 w  }$ {9 s2 [  \
16.   { SPINBOX_CreateIndirect,  NULL,                GUI_ID_SPINBOX1, 130, 42,  60,  21, 0, 0, 0 },
    
17.   { SPINBOX_CreateIndirect,  NULL,                GUI_ID_SPINBOX2, 130, 75,  60,  21, 0, 0, 0 },
    $ g  A0 J) r* H2 Y* x, S5 i
18. };
    
19. 
    
20. /*********************************************************************
    7 a- @% \2 G/ j. e5 o( _$ e
21. *
    
22. *       _cbBk
    
23. *   桌面窗口的回调函数
    
24. */
    1 b4 V; f! d! ]2 ^
25. static void _cbBk(WM_MESSAGE * pMsg) {
    , W+ t( {: m/ ?# b* X
26.   int xSize;
    % J8 i2 U& A4 Q! c/ V
27.   int ySize;
    
28. 
    : q, n- f! H% V: ?; _, F: e9 X4 B
29.   switch (pMsg->MsgId) {
    : T7 u! p; h  s9 T5 W( o+ z
30.   case WM_PAINT:
    
31.     xSize = LCD_GetXSize();
    
32.     ySize = LCD_GetYSize();
    
33.     GUI_DrawGradientV(0, 0, xSize, ySize, GUI_BLUE, GUI_BLACK);
    $ k" Y" u9 r5 n
34.     GUI_SetColor(GUI_WHITE);
    % x1 o0 f2 W4 B' [" l. S- G$ c
35.     GUI_SetFont(&GUI_Font24_ASCII);
    
36.     GUI_SetTextMode(GUI_TM_TRANS);
    
37.     GUI_DispStringHCenterAt("WIDGET_Spinbox - Sample", xSize / 2, 5);
    0 T$ B: H, D1 Y7 r& ~' C
38.     break;
    9 |* S. Q2 q1 i% D' t
39.   default:
    - a. E8 q3 d* Y6 r
40.     WM_DefaultProc(pMsg);
    
41.   }
    
42. }
    / C5 I/ C& Q* b& P# V
43. 
    
44. /*********************************************************************
    
45. *
    
46. *       _cbClient
    ' }2 p8 O; D8 ~8 @# o+ ^! O
47. *   对话框的回调函数
    
48. */
    2 p2 B6 {. V( t& w; |7 j0 a
49. static void _cbClient(WM_MESSAGE * pMsg) {
    " ^# d; N& p' k0 R2 k* T/ s1 G2 ^
50.   EDIT_Handle hEdit;
    
51.   WM_HWIN     hItem;
    
52.   int         Value;
    
53.   int         NCode;
    
54.   int         Id;
    / I% o, Q' s* v& X+ A) S
55. 
    ' z$ [$ Q- `6 s9 G& y) H
56.   switch (pMsg->MsgId) {
    ; X% v) A1 O* @
57.   case WM_INIT_DIALOG:
    
58. 
    0 [) ?! ~  m1 C9 H6 ^
59.     /* 设置框架窗口标题的字体和皮肤 */
    
60. FRAMEWIN_SetFont(pMsg->hWin, GUI_FONT_16B_ASCII);
    
61.     FRAMEWIN_SetSkin(pMsg->hWin, FRAMEWIN_SKIN_FLEX);
    7 c2 X/ R% J' t) }
62. 
    / e3 F5 Y8 c. |( J8 F7 t
63.     /* 设置文本TEXT0的对齐方式 */
    
64. hItem = WM_GetDialogItem(pMsg->hWin, GUI_ID_TEXT0);
    + g) w/ y4 B5 K7 F' [9 S
65.     TEXT_SetTextAlign(hItem, GUI_TA_VCENTER | GUI_TA_RIGHT);
    
66. /* 设置文本TEXT1的对齐方式 */
    ( Y  L6 Q. D5 a
67.     hItem = WM_GetDialogItem(pMsg->hWin, GUI_ID_TEXT1);
    
68.     TEXT_SetTextAlign(hItem, GUI_TA_VCENTER | GUI_TA_RIGHT);
    3 j. n1 j7 h3 V$ S  ]
69. /* 设置文本TEXT2的对齐方式 */
    
70.     hItem = WM_GetDialogItem(pMsg->hWin, GUI_ID_TEXT2);
    
71.     TEXT_SetTextAlign(hItem, GUI_TA_VCENTER | GUI_TA_RIGHT);
    
72. 
    : I0 H$ q  C# e2 _0 c' u/ ^. [. P, _- K
73.     /* 设置spinbox的皮肤 */
    5 |9 T9 w) z# B$ b. I! H
74. hItem = WM_GetDialogItem(pMsg->hWin, GUI_ID_SPINBOX0);
    * A, {8 O4 P3 I; R
75.     SPINBOX_SetSkin(hItem, SPINBOX_SKIN_FLEX);
    ) f8 k( u1 e( x; e3 K7 g, Z
76.     hEdit = SPINBOX_GetEditHandle(hItem);
    " l/ y) l( a; S5 R
77.     /* 启用编辑字段的十进制编辑模式 */
    2 r6 `) S+ G9 X$ C
78. EDIT_SetDecMode(hEdit,
    
79.                 1,    /* 要修改的值 */
    8 w& R/ N: A# ^; L& W0 [
80. 1,    /* 最小值 */
    
81. 10,   /* 最大值 */
    : a3 @) `: Q. Y0 i& Y% s
82. 0,    /* 如果>0，指定小数点的位置 */
    7 X! l) f  |* b0 A, H7 y) d
83. 0);   /* 0（默认值）：在正常模式下编辑，符号仅在Value为负值时显示 */
    
84. 
    
85.      /* 设置spinbox的皮肤 */
    
86. hItem = WM_GetDialogItem(pMsg->hWin, GUI_ID_SPINBOX1);
    " D3 G3 q1 p$ @$ `
87.     SPINBOX_SetSkin(hItem, SPINBOX_SKIN_FLEX);
    : ]  H, f0 \; B
88.     hEdit = SPINBOX_GetEditHandle(hItem);
    ! Q& [! _# p) g8 K* Y( ?
89.     /* 启用编辑字段的十进制编辑模式 */
    ' ?/ E& L& x- T0 ^; s4 g
90. EDIT_SetDecMode(hEdit,
    
91.                 1,     /* 要修改的值 */
    
92. 0,     /* 最小值 */
    
93. 99999, /* 最大值 */
    
94. 0,     /* 如果>0，指定小数点的位置 */
    
95. 0);    /* 0（默认值）：在正常模式下编辑，符号仅在Value为负值时显示 */
    
96.      /* 设置spinbox的皮肤 */
    1 K( A! U( z0 Q8 U
97. hItem = WM_GetDialogItem(pMsg->hWin, GUI_ID_SPINBOX2);
    / l1 `" ^! S  l
98.     SPINBOX_SetSkin(hItem, SPINBOX_SKIN_FLEX);
    
99. 
    
100. /* 特别注意，这个函数是5.24版本才加入的，用于设置模式 */
     
101. SPINBOX_SetEditMode(hItem, SPINBOX_EM_EDIT);
     
102. /* 设置最大和最小值 */
     ! W& G, u- G* ?9 T# A
103.     SPINBOX_SetRange(hItem, 0, 99999);
     
104.     break;
     
105.   case WM_NOTIFY_PARENT:
     
106.     NCode = pMsg->Data.v;
     
107.     switch (NCode) {
     " j4 q, l9 r: b' a1 K9 g9 N6 N1 S
108. /* 接收到GUI_ID_SPINBOX0的WM_NOTIFICATION_VALUE_CHANGED消息后，根据SPINBOX0
     9 i8 [  F, b' i3 [# Y
109.    中的当前值修改SPINBOX1中单次的前进后退步数。
     2 N  f* ^( B3 d5 A$ b3 m
110. */
     
111.     case WM_NOTIFICATION_VALUE_CHANGED:
     
112.       Id = WM_GetId(pMsg->hWinSrc);
     ! [6 y9 A! \- W" p2 t2 f9 h9 h
113.       if (Id == GUI_ID_SPINBOX0) {
     ' J9 n) Q! Y& R# H3 w
114.         Value = SPINBOX_GetValue(pMsg->hWinSrc);
     
115.         hItem = WM_GetDialogItem(pMsg->hWin, GUI_ID_SPINBOX1);
     
116.         SPINBOX_SetStep(hItem, Value);
     ; i5 _, x: c3 K9 P  {
117.       }
     
118.       break;
     4 B0 _( u' T. B( g) P' `
119.     default:
     
120.       WM_DefaultProc(pMsg);
     
121.     }
     
122.     break;
     9 x) n$ N' a6 r3 ]: o0 X# g4 s
123.   case WM_PAINT:
     " p' o' N( l" k7 V$ N6 b' {
124.     GUI_SetBkColor(0xAE9E8D);
     ) @6 R6 x. j3 ?8 {/ f
125.     GUI_Clear();
     
126.     break;
     1 v; `+ {! D/ v1 Y& A7 i# ]
127.   default:
     $ V$ d9 P( E8 a  q0 }
128.     WM_DefaultProc(pMsg);
     
129.   }
     
130. }
     
131. 
     
132. /*********************************************************************
     
133. *
     7 |/ h4 j. J8 C8 m6 |
134. *       MainTask
     5 X4 c1 \# s4 b# @% g2 ~
135. */
     : `7 U6 G6 @" V) @7 i$ {' o
136. void MainTask(void) {
     3 l( j% t; q2 v; T- X+ k5 \
137.   GUI_Init();
     
138.   WM_SetCallback(WM_HBKWIN, _cbBk);
     ; ~4 }3 y0 N- n6 N4 P! ?
139.   TEXT_SetDefaultTextColor(GUI_WHITE);
     
140.   /* 创建对话框 */
     3 K1 ?0 T: [- |" x7 k
141.   GUI_CreateDialogBox(_aDialogSpinbox, GUI_COUNTOF(_aDialogSpinbox), _cbClient,  WM_HBKWIN,  30,  60);
     
142.   while (1) {
     
143.     GUI_Delay(100);
     2 z# t0 G  Y% q( Y, R. X
144.   }
     
145. }

复制代码

实际显示效果如下：

58.3 使用官方GUIBulder建立SPINBOX控件

    这里用GUIBulder5.22建立一个如下的界面（分辨率480*272）：

    当前GUIBulder5.22版本对SPINBOX控件的支持还比较的弱，仅支持将其添加到对话框上面。将生成的代码直接复制到模拟器或者开发板上面运行，实际显示效果如下（生成的代码在本期教程配套的例子中）：

58.4 总结

    本期教程主要是跟大家讲解了SPINBOX控件的基础使用方法。希望大家可以把本期教程中讲的这两个例子跑跑，然后自己设计一个相关的例子进行试验学习。教程中只是使用了部分的SPINBOX控件API，其它的API大家都可以试试。

7 ~" i1 b: S+ K. B" M/ W! C" j

谢谢分享

学习了，，，，

支持一下，，，

谢谢分享~

还有这每天都更新也是难得。。

谢谢分享

谢谢你分享你的经验

谢谢分享啊