FireMonkey Style之TLabel篇



FireMonkey Style之TLabel篇

 

（文章中使用的为Delphi XE6，所有不同的版本属性上会有些变化，基本是从XE6开始的）

 

   TLabel作为UI中使用非常多的一个控件，相对也比较简单，下面我来讲解下它的样式结构，首先从控件栏中拖一个TLabel组件到设计窗口，选中组件后

右键选择 Edit Custom Style... 项进入TLabel的自定义样式设计，如图：

 

可见TLabel的样式结构非常的简单，由一个TLayout和TText构成， 每个组件都有一个非常重要的属性StyleName这个相当于平时的Name，必要层需要指定一个有意义的名称，这样方便之后自己调用同时可以绑定控件的属性，例如 TLable.Text，如果指定TText的StyleName为text则就会与控件的Text属性进行绑定，不需要再使用额外的代码去设置数据

 

 

这里我们指定第一个TLayout样式名为 labelstyle_custom 前缀使用 控件类名(去掉T) + style这样一来清楚知道是哪个样式的，二来可以自动列表到对应组件的StyleLookup属性中。

 

前面介绍了基本的一些，下面我们来自定义一个样式吧， 功能上主要是将TLabel的背景显示为蓝色, 其它不改变。

 

我们先要从右边的控件栏中拉一个TLayout布局组件到左边的 Structure窗口下面的 Stylecontainer下， 这里需要注意下，不是平时直接拖到设计界面，这样是无效的，需要拖到要Structure窗口下自己想要置于的组件下。

 

这里其它并不限定一定要一个Tlayout， TRectangle也是可以的，基本上看需求了，这里使用TLayout作为样式的主体部分, 并设置刚刚这个组件的StyleName为labelstyle_custom

接下来我们需要一个可更改背景颜的组件，这里我选择使用TRectangle， 将TRectangle从组件栏拉到 labelstyle_custom下， 并更改以下几个属性

  1)、 StyleName 为 background

  2)、 Align 为 Contents (XE6以下的为 alContents )

  3)、 HitTest为False (取消HitTest是因为这样会阻止原组件接收相关消息，特别情况下不设置也行的，具体取决于需求)

  4)、Fill -> Color 为Blue (需要Fill.Kind属性为Solid)

  5)、Stroke -> Kind为 None 

 

再接下为了让Label的Text属性不失效，我们得再拉一个TText组件到background下设置以下几个属性：

  1)、 StyleName 为 text (名称必须与label的Text相符才能绑定上)

  2)、 Align 为 Client 

  3)、 HitTest为False   

  4)、 TextSettings.FontColor 为 White

 

 

 这样一来，我们就已经建立好一个颜色背景的样式

 

退出样式编辑， 返回到界面设计将Label的StyleLookup选择为刚刚定义的labelstyle_custom样式名

 

 

选择后，设计界面的label样式已经被改为我们刚刚定义的了，是不是很容易

 

 

PS: 样式是很自由的，不限于某个特定的控件，你也可以把一个label的样式变为一个按钮或者一个ListBoxItem或者其它的

 

 

 

Unit1.pas

 

unit Unit1;interfaceuses  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,   FMX.Types, FMX.Graphics, FMX.Controls, FMX.Forms, FMX.Dialogs, FMX.StdCtrls;type  TForm1 = class(TForm)    lbl1: TLabel;    stylbk1: TStyleBook;  private    { Private declarations }  public    { Public declarations }  end;var  Form1: TForm1;implementation{$R *.fmx}end.

 

 

Unit1.fmx------------------------------------------------------------------------------------

object Form1: TForm1  Left = 0  Top = 0  Caption = 'Form1'  ClientHeight = 480  ClientWidth = 640  StyleBook = stylbk1  FormFactor.Width = 320  FormFactor.Height = 480  FormFactor.Devices = [Desktop, iPhone, iPad]  DesignerMobile = False  DesignerWidth = 0  DesignerHeight = 0  DesignerDeviceName = ''  DesignerOrientation = 0  DesignerOSVersion = ''  object lbl1: TLabel    Height = 49.000000000000000000    Position.X = 96.000000000000000000    Position.Y = 96.000000000000000000    StyleLookup = 'labelstyle_custom'    TextSettings.WordWrap = False    Text = 'FireMonkey Style    ying32'    Width = 329.000000000000000000  end  object stylbk1: TStyleBook    ResourcesBin = {      464D585F5354594C4520322E350106116C6162656C7374796C655F637573746F      6D038001005450463007544C61796F757400095374796C654E616D6506116C61      62656C7374796C655F637573746F6D064865696768740500000000000000C804      400A506F736974696F6E2E5805000000000000008808400A506F736974696F6E      2E5905000000000000009707400557696474680500000000000000C804400854      61624F726465720200000A5452656374616E676C6500095374796C654E616D65      060A6261636B67726F756E6405416C69676E0708436F6E74656E74730A46696C      6C2E436F6C6F720707636C61426C7565064865696768740500000000000000C8      04400748697454657374080B5374726F6B652E4B696E6407044E6F6E65055769      6474680500000000000000C804400005545465787400095374796C654E616D65      06047465787405416C69676E0706436C69656E74064865696768740500000000      000000C80440074869745465737408165465787453657474696E67732E466F6E      74436F6C6F720708636C6157686974650557696474680500000000000000C804      4000000000}  endend