31-组件-基础组件-button

大家好，欢迎来到IT知识分享网。

基础组件。

大家好，欢迎来到编程世界，今天来一起学习一下基础组件部分。

·第一个就是but，这个就是rtsui原生支持的基础组件，用来快速创建不同样式的按钮，这里可以看到有各种各样的。首先看一下它是有两种方法的。

→第一种方法是什么？button里面创建传了一个对象，对象里面有type，有say the effect，type就是要创建的按钮是什么样子的，要直角还是圆角，圆的还是方的。

→第二个就是点击的时候按钮有没有颜色变化的效果反馈。

具体去编辑器里看一下。

·首先这个地方还是在components工程里面，在入口下面patris里面创建了一个basic文件夹，对应的就是基础组件，创建一个对应的就是按钮的代码。

·entry进来，首先创建一个列，然后写一个row进来，可以创建，多个button。

·第一个button进来，然后可以给它一些内容对不对？首先写一个text，就叫帝心。看一下，百分之九十太长了，就不要了，让它默认的称好。这个时候是帝心，看到了。

·这个时候刚才说是不是有两个参数，看一下，先是type，对不对？那叫什么？button type，点儿。看一下number是什么？它是方字，可以把这个地方加一个之前提到过的叫什么外编剧，给它一个二十。

·这个时候是不是看的就特别清楚了对不对？左上角的应用窗口，圆圆的东西就不会挡角了，很清楚的看到是一个直角。这个地方为了方便看文字可以给它一个color，改一下白色，这样看的清晰一点。

·除此之外可以试一下看有没有其他类型的，还有一个，看一下，它变成了圆角，对不对？原来这个是圆角。再试一下别的，还有一个没有试的，这个是原色，已经看到了圆的。

·但是发现有一个问题，太小了对不对？只显示了一个d，这个时候怎么办？试试能不能把它改变一下大小，对不对？在这个地方加它的宽度，给它一个五十，还是有点小，来给个一百五，然后高度也给个一百五。看看是什么效果。现在显示出来了，原来是刚才太小了，变成圆了之后就太小，显示不全了。现在可以显示出来了。

现在除了这个，有人说这个还改回去，这个太大了，这个就改为正常的这个样子。有人说这个太单调了，给地心前面加个标志，不然一个人太孤单。这里面加一行，加一行里面还把笔芯先放进来。这个地方加一个什么？比如。加一个loading效果，这也是一个基础组件。

·这个里面是什么？可以看一下，太大了，改一下它的宽度、高度，说二十的宽，高度也是二十的高，看一下效果，是不是看到了一个小东西，把它颜色改一下，color点也改成白色，是不是看到前面是不是有这么一个小圆圈，这个小圆圈，这个什么？大家可以看到是不是还会动，稍微放大一点能看得清吧，都在旋转，对不对？

·这是什么？就是比如在下单的时候在网站上买了很多东西，结果下单时候不小心一下点了两次，点了一次之后又点一次，为了生防止手抖，一下买了两份重复的商品，是不是该心疼了？

·点击一下之后这里有一个加载效果，就告诉你已经在请求副端的接口了，就可以等待，等成功之后就提示按钮就会变成已经下单成功，这个时候就防止多次点击，在这里就可以理解为底薪太累了，刚更了一天就点一下，更一下，然后就让它歇一会。

·除此之外还记得之前讲过是有一个状态的，叫hit affect，改成处e r l e，看一下它有什么用？点击一下地心，看到这个按钮是不是有一个颜色的变化，颜色变化不明显，自己撕下去可以试一下，这个时候就点击的时候按下去的那一刻和弹起来那一刻是有颜色变化的，然后改成false试一下。

·现在再看一下效果，点击是没有颜色变化了，不管怎么点都是这个样子。除此之外还可以改按钮的颜色，比如在part time这个地方改一下，比如这个地方想点了之后会变成加载状态，不让打扰了，这个时候按钮也做一个颜色，做一个提示，改一下，比如改ground，做了一个灰色，这个时候变成灰色了，就不让你点击了。

·同时可以加一下它的透明度，改小一点，比如改个零点四，是一到四之间的数值，改零点四，这个时候发现灰色的，就不让你点击了。

除了这些是不是刚才提到过还是。

·还有一种方法可以创建一个button，第二种除了多了一个options之外还有一个label，这个是做什么用的？可以看到它是一个资源文件，之前地心也给大家提到过，看一下它是怎么用的。

·再复制一个，这个时候先把这些删掉，做一个区别，前面都还是一样的。这个时候要注意，比如这个地方又写了一个dc，发现是在这个位置，这个时候这里有个地心，到底显示的是哪一个？加一个地心一，这是地心二，这个时候发现它显示的是dc二。

·如果把dc里面删掉，它显示是什么？刷新一下，这个时候怎么还没有出来？发现按钮没了，怎么回事？发现下面是不是有报错？看一下，在这文件第十六行，哪里？十六行，在这个地方，然后什么错误？这个按钮组件有level参数了，就不能有任何子组件，就是不能有子组件了。

·这个时候怎么弄？虽然刚才把这个删掉了，但是没有把这个删掉，把它删干净，也就说不要有任何子组件，就单纯的对应这个按钮组件就好了。

这个时候看到出来了，所以遇到问题之后不要着急，不要害怕，可以看一下到底是什么错误，提示的信息是什么？如果是英文不好的朋友可以翻译一下这句话是什么意思，大概能猜出来，大概出的是什么问题，报什么错，如果能理解就自然能修复了。

如果还不理解就可以到官网上去搜一下相关的api描述，来看看官网上的描述怎么说的，以及案例大概是怎么写的，跟到底区别在哪里，可能也能发现问题。如果还不行可以到群里面去问大家，或者在百度去搜索，相信大家一定能解决的。

一飘烟会露馅，五柳先生对门，大家下期见了。