FireMonkey 底下用自己定义 Style 的方式,给按钮 Button 以颜色

FireMonkey 里面有 Style 的支持。通常的用法是做一整套的 Style 然后给一个程序用。官方提供了不少的各种配色的 Style 设计,程序可以直接拿来用。通过使用 Style 来达到换肤的目的。

但自己设计整套的 Style 比较麻烦。有时候只是想给一个按钮设置一个不同的颜色,而按钮是没有 Color 这样的属性可以用来设置颜色的。这时候,可以利用 FireMonkey 提供的 Style 的功能来达到我们想要的效果。

B站有个视频讲解了如何操作。视频在这里:用 Style 的方式给 Button 设置颜色。

我照着那方式做了一下,并且我给按钮做了一个渐变色的效果。基本操作步骤如下:

1. 新起一个 FireMonkey 工程。放一个按钮 Button1 到 Form1 上面;

2. 在控件选择面板 Palette 里面,选择 TStyleBook 放到 Form1 上面,是为 StyleBook1;

3. 双击 StyleBook1,弹出 Style Designer 页面。在这个页面里,拖一个 TRectangle 过来,给它的 Name 属性命名为 Rectangle1;

4. 属性面板里面找到这个 Rectangle1 的 Fill 属性,拉开,里面的 Kind 属性设置为 Gradient,这个是渐变色。在其 Gradient 属性旁边的拉下按钮点下去,拉到底部,有 Create New TGradientAnamation 的字样,点它,会弹出 Brush Designer 窗口,在里面选择渐变颜色。它同时创建了一个属于这个 Rectangle1 的 ColorAnimation1Style 的对象。

5. 点击 Style Designer 页面的顶部右边的三角形按钮(类似 Play 的按钮),Apply 这个设计,让设计生效。

6. 回到 Form1,选中 Button1,在属性面板里面找到它的 StyleLookup 属性,在里面填写刚刚设计的 Style 的名字:Rectangle1。然后你能看到这个按钮的颜色变成了你刚刚在 Style Designer 里面给 Rectangle1 设置的渐变色。

7. 注意,FireMonkey 里面,所有控件都可以当作容器,在上面摆放其它控件。每个控件都有一个 HitTest 属性,如果是 True 则它响应鼠标点击,然后它下面的控件就无法接收到鼠标点击了。因此,这里,我们需要在 Style Designer 里面,把那个 Rectangle1 的 HitTest 设置为 False 避免 Button1 无法触发 OnClick。

8. Button1 使用了 Style 后,相当于设计的那个 Rectangle1 覆盖到了它的表面。这样它原本的 Text 无法显示了。如果需要显示文字,需要回到 Style Designer 页面,在 Rectangle1 上面,放一个 TText,设置它的文字。注意同样要把这个 TText 的 HitTest 设置为 False;要让它的文字保持在按钮中间,设置它的 Align 为 Content;

9. 动画效果:如果我想鼠标按下去的时候变颜色,鼠标释放的时候是另外一个颜色,则需要做:

9.1. 回到 Style Designer 页面,左上角,选中 Rectangle1 的 ColorAnimation1Style 的对象,在属性面板里面,有 Start Value 和 Stop Value,分别选择不同的颜色,然后再点开它的 Trigger 属性,下拉,选择 IsPressed=true,点开 TriggerInverse 属性,下拉,选择 IsPressed=false。这样当按钮被按下去的时候,它会变色。

10. 注意,每次在 Style Designer 里面修改完后,需要点右上角的 Apply style 按钮(三角形的类似 Play 的按钮)。

到处,运行你的程序,用鼠标去点按钮,可以看到按钮的颜色发生变化,并且按钮的颜色是渐变色的。

发布了116 篇原创文章 · 获赞 19 · 访问量 12万+

猜你喜欢

转载自blog.csdn.net/pcplayer/article/details/103915365