OrangeUI

OrangeUI的Edit目前没有什么特殊的功能,
是从自带的TEdit继承的,
只不过把TEdit自带的Style去掉了,
所以放在窗体上是透明的,
但我们可以自定义它的背景颜色或背景图片。
 
Edit的字体设置仍旧在TextSetting属性中,
而不是在SelfOwnMaterial.DrawTextParam里面。

SelfOwnMaterial.DrawTextParam属性是用在当Edit放在ItemDesignerPanel时,
ListBox使用它来绘制此Edit.
 
再讲解一下Edit的子控件Content,Content是在Edit中用于输入文字,
Content在IOS,Android上的高度是有限制的
当Content的高度大于25时,Edit将不能用手指定位输入光标,
因此当Edit的高度大于25时,就要设置Content的上边距ContentMarginTop和
下边距ContentMarginBottom,避免不能定位输入光标,
ContentMarginLeft:Content相对于Edit的左边距
ContentMarginTop:Content相对于Edit的上边距
ContentMarginRight:Content相对于Edit右左边距
ContentMarginBottom:Content相对于Edit下左边距
 
 
Edit控件的属性在Properties中,有:
HelpIcon:提示图标
HelpText:提示文本(当Text为空的时候显示的提示信息)
IsDrawHelpWhenFocused:当Text为空时,获得焦点时是否也需要显示HelpText
 
接下来我们做一个用户名密码输入框,

上图中,用户名输入框和密码输入框的样式是一样的,
都是提示图标显示在左边,输入提示文本居中显示,
需要如下两个图标,
:用户名输入框的提示图标
:密码输入框的提示图标
 
我们拖两个Edit到窗体上,
一个命名为edtUser,为用户名输入框,
一个命名为edtPass,为密码输入框,
 
先设置edtUser的提示图标:
把Properties.HelpIcon设置为,
让HelpIcon垂直居中显示,大小设置成24*24,
在SelfOwnMaterial.DrawHelpIconParam中设置,
DrawHelpIconParam.IsAutoFit设置为True,
DrawHelpIconParam.PictureHorzAlign设置为phaCenter,
DrawHelpIconParam.PictureVertAlign设置为pvaCenter,
DrawHelpIconParam.DrawRectSetting.Enabled设置为True,
DrawHelpIconParam.DrawRectSetting.SizeType设置为dpstPixel,
DrawHelpIconParam.DrawRectSetting.Width和Height设置为24,

再设置edtUser的提示文本:
Properties.HelpText设置为: “账号/手机号”,
让HelpText居中显示,并且字体颜色设置成灰色,
在SelfOwnMaterial.DrawHelpTextParam中设置,
DrawHelpTextParam.DrawFont.Color设置为灰色Gray,
DrawHelpTextParam.FontHorzAlign设置为fhaCenter,
DrawHelpTextParam.FontVertAlign设置为fvaCenter,

还需要设置edtUser的TextSetting,让文本居中,

看一下edtUser的高度,为40,

因此需要设置一下Content的上边距和下边距,都设置为8,

再拖一个ClearEditButton到Edit上面,用来一次性清除输入的内容,
 
好了,设置完成,显示效果如下:

输入用户名,居中显示:

 
按上面的步骤设置edtPass,
因为edtPass是用来输入密码的,
因此把edtPass的Password属性打上勾,

输入密码: