即将发布的ChinaCock新版本,将带来一个CCButton控件,实现可视按钮。Delphi原生的Button,在上面滑动后,当释放手指时会误触发OnClick事件,这不是我们想要的结果,CCButton完美解决了这个问题!

现在,可以看一下这个控件的用法,这是一个可视控件,从组件面版拖放一个TCCButton到Form上,然后定义他的外观样式:

1.Fill:这个属性定义按钮的颜色,用法与原生控件的Fill一样,默认为白色

2.Text:定义按钮显示文字

3.TextSettings:定义文字显示效果

Text与TextSettings与原生控件用法一样,默认文字为红色。

4.Stroke:设置按钮的边框样式,同原生控件一样

5.XRadius与YRadius:设置按钮为椭圆按钮,默认值为8

上图是拖放到Form上并设置了Text属性的Button的效果。

为了使按钮有按动的效果,我们需要定义动画的方式来达到这个目的。

按官方的Demo,有两种方式:

1.定义Opacity属性的动画效果:

如上图,设置StartValue=1,StopValue=0.5,Trigger=IsMouseOver=true;TriggerInverse=IsMouseOver=false

这种方式是简单的方式,只定义该Opacity属性的动画即可

2.定义Fill.Color及TextSettings.FontColor属性的动画效果

上图是定义Fill.Color的动画,当用户触摸这个按钮,颜色由白变红

再设置TextSettings.FontColor的动画:

定义TextSettings.FontColor的动画,当用户触摸这个按钮,颜色由红变白

CCButton有OnClick事件,这个系统原生的Button一样,不再多说了。相信你能很快定制出与你app整体风格一致的按钮。

最后,我们看一下官方自带Demo的运行效果:

ChinaCock界面控件介绍-CCButton的更多相关文章

  1. ChinaCock界面控件介绍-CCNavigateTitle

    先看一下实际项目中的运行效果,如图,通过品牌的导航栏,显示不同品牌的商品列表. 完全基于ChinaCock控件包中CCNavigateTitle组件实现的,这是一个可视控件,从组件面板上拖放一个到Fo ...

  2. ChinaCock界面控件介绍-CCLoadingIndicator

    这是一个显示等待状态的控件,当在线程中执行一个稍长时间的任务,需要显示一个等待过程,免得让用户不知app在做什么?避免用户寂寞. 先看看这个控件的属性说明: BackgroundTransparenc ...

  3. ChinaCock界面控件介绍-TCCYearMonthSelector

    Delphi原生控件支持日期的选择,但对于只选择年月的情况,则没有好的实现.TCCYearMonthSelector正是为解决这个问题而产生的.看看运行效果图: 用法一如即往的简单,这是一个不可视控件 ...

  4. ChinaCock界面控件介绍-TCCImageViewerForm

    有多个图片,左右滑动可以切换,通过手势还可以放大.缩小查看,象常见的相册,就是这样子实现效果. 现在,我们有了TCCImageViewerForm组件,也可以轻松实现这样的场景应用. 现在看看TCCI ...

  5. ChinaCock界面控件介绍-CCSystemBar

    Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体验.而A ...

  6. ChinaCock界面控件介绍-TCCBarcodeCreator

    条码生成器,可以生成各种条码,包括二维码.这是一个不可视控件.用起来依旧简单. 属性说明: BarCodeColor:生成条码的颜色 BarcodeFormat:生成条码的类型,支持的条码类型: Bo ...

  7. ChinaCock界面控件介绍-CCGridPictureEditor

    CCGridPictureEditor如其名,网格图片编辑控件,实现利用一个网格来显示多张图片的缩略图,这是一个非常实用的控件,实现类似微信朋友圈中发布多张图片的功能. 在没有这个控件之前,我都是用D ...

  8. ChinaCock界面控件介绍-CCNewsSilder

    上图是控件包里的Demo运行效果,轮播新闻图片. 这个控件用起来简单,拖放一个CCNewsSiler到Form上,设置Align为Top,再设置好高度,然后用代码加载图片: procedure TFo ...

  9. ChinaCock打印控件介绍-TCCFujitsuPrinter实现蓝牙针式打印

    项目中遇到,要蓝牙针式打印机,用手机打印表单.感谢专家,对厂家提供的SDK进行了封装,实现利用Delphi开发出这一功能. 现在来看看,如何利用这一控件实现打印过程: procedure startS ...

随机推荐

  1. 4、Ubuntu系统环境变量详解

    参考:Linux公社Ubuntu系统环境变量详解 UNIX/Linux系统中的环境变量和库文件的使用方法 由于Linux系统严格的权限管理,造成Ubuntu系统有多个环境变量配置文件,因此我们需要了解 ...

  2. python-flask-请求源码流程

    启动先执行manage.py 中的    app.run() class Flask(_PackageBoundObject): def run(self, host=None, port=None, ...

  3. python-day75--django项目问题详细

    1.项目名要小写 2.表中字段 AutoField()   表示整形字段,建表时不用写,当整形的数字范围不够你用的时候, 你可以用 BigAutoField()字段, 表示长整形    当表内新增有关 ...

  4. leetcode-algorithms-12 Integer to Roman

    leetcode-algorithms-12 Integer to Roman Roman numerals are represented by seven different symbols: I ...

  5. 使用vue-router设置每个页面的title

    进入 router 文件夹底下的index.js文件 首先引入: import Vue from 'vue' import Router from 'vue-router' 然后在路由里面配置每个路由 ...

  6. ABAP游标

    DATA: BEGIN OF count_line, carrid TYPE spfli-carrid, count TYPE i, END OF count_line, spfli_tab TYPE ...

  7. 类似“未能加载文件或程序集“tesseractengine3”或它的某一个依赖项”等一些问题的解决方案

    有些时候我们引用了一些32位的dll,结果就会出现类似“未能加载文件或程序集“tesseractengine3”或它的某一个依赖项”这样的问题,原因是IIS的应用程序池的设置中默认是不启用32位的应用 ...

  8. Cassandra V2.1.20单机安装

    1. 系统调优 [root@sht-sgmhadoopcm- ~]# echo "vm.max_map_count=131072" >> /etc/sysctl.con ...

  9. vue组件生命周期详解

    Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...

  10. npm使用国内淘宝镜像的方法

    一.通过命令配置 1. 命令 npm config set registry https://registry.npm.taobao.org 2. 验证命令 npm config get regist ...