antd 3.x table设置宽度无效

这节课我们再来看一点高级点的东西，我们来看一下这个颜色啊，他是这个蓝色哎，这个他也是这个蓝色，对吧？包括我们点开 这个日期，他的这个都是这样的一个蓝色啊，那这个蓝色呢？和我们用的这个支付宝，他这个蓝色啊是一样的，因为这个就是蚂蚁金服他们出的，对吧？啊？那现在我有一个需求，我不想要这个蓝色哎，我们整个网站的风格，比如说是红色， 这时候怎么办？你找到这个按钮的样式，然后看他哪个啊类是决定的这个颜色，然后把它给改了，是吧？然后其他的都改一下，是不是你用到哪个改哪个，你说麻烦不麻烦？这么多组件呢，对不对？ 所以说我们应该看一下他的这个文档，哎，他应该有一个配置去设置这个颜色来看一下啊，在下面 有介绍啊，自定义主题，他的这个蓝色其实就是他们的这个主题色啊，那根据我们使用的需求不同，那比如我们的主题车红色， 我们应该可以找到一个地方去修改这个主题色，看一下他这里说怎么用啊，如果想要配置这个主题哎， 我们得需要什么呢？用到这个 nice 变量覆盖的一个功能，因为他这个啊组间库他就是使用这个 nice 去写的啊，然后他定义了这个主题色的一个变量啊，最终经过这个啊变异之后才转成这个 css， 好接着看啊，然后可以啊，借助他提供的这个 nice 相关的这个函数来帮助去加载这个 nice 样式啊，因为我们要修改这个主题色，要对谁进修改？对他用 nice 写的这个主题色的这个变量进行修改，对吧？你要去 修改这个 nice， 那我们肯定要需要这个 nice 相关的啊，这个酷，对吧？一个是 nice low 的，一个 nice 啊，把这两个给安装一下 来，把这先停掉啊，找一下啊，看下面这个 配置怎么改，哎，同时还要修改这个配置吗？这个配置上面是要删除的啊，这个绿色是要增加内容哎，但其实你看一下的话，他其实就是多了一个这个，哎，多引了一个这个东西，对不对？所以我们就不删除了，多引入一个这个东西就可以了，哎，在这啊，多好。引入 引用他之后看下面的这个配置啊，他说了啊，我们原来的这个按需引入，我们这里配的是不是四 s s， 哎，按需引入四 s， 但是现在我们 这里要改了啊，这里我们现在操作的谁操作是 nice， 这里就不能配这个三三四了啊，要把它改成一个布尔直，改成处啊，这里啊，注意是布尔直的这个处啊，你不要写到单引号里面，不要把它变成字母，错了。嗯，接着往下看啊，这个改完之后，呃，下面要增加一些， 哎，增加一下这些配置箱来，注意啊，你看他的这个层级是在哪，是和他并列的，是不是啊？和他并列，那我在这回车，哎，加个配置箱，我把这个加号都删了啊，好，一二三掉， 哎，接下来把缩进调一调，这个往前来点，哎，整体重新调一下吧，你看这个缩进有问题， 看一下还有没有啊啊，这里就没有了啊，看看这几个配置项啊，这里我们使用这个啊， logo 要去处理这个 nice， 对吧？那这个配置项什么呢？这个配置项就说，哎，允许我们使用这个 gs 的语法去修改这个 amtd， 他默认的那个 啊，一些定定义的那些烂死的一些变量，对吧？接下来看这个选项，哎，修改什么？修改这个变量，对吧？那修改哪个变量呢？修改这个变量啊，那这个变量其实就是啊， ntd 他设置这个主题色的一个变量哎，他这里把它给他设置成这个颜色，那你要 想要红色，那你就设置成红色，想要其他颜色就在这改就可以。来，我们写一个十六禁止的井号，嗯，随便写一个 fd 四二三七。好，写完这个之后，啊啊，那我们就来运行一下看一看啊 啊，第一遍运行呢，会比较慢，因为他要对这整个 nice 要重新编译，所以我们稍微等一下 看看这里吧，这里边缘的话会有提示。好。哎，可以看到啊，这里 已经报错了啊，报错了，我们看页面中确实出现了一个问题啊，我们来放大一下看一下啊，这是什么问题？ 前面这些不用看我们也看不懂，这是他内部的一个包错的一个啊，一个位置，然后我们直接看最后的错误，他说这个类型错误，哎，这个不是一个函数啊， 那这什么问题造成的呢？这是因为我们在安装这个 nice 多的时候直接默认安装呢，他会使用最新版本，而这个 nice 多的呢，他最近做了一次升级啊，已经发了一个新的一个版本， 所以就会。哎出现这个问题，我们来看一看这个里面啊，可以看到啊，他这里面用的是这个八点零的一个版本 啊，我们要把这个给给卸掉，然后重新去安装一个啊，气垫顶的，哎，当然你不卸他不卸咱也可以，我们直接哎重新安装也可以去给他覆盖掉，我把这瓶去掉 啊，前面的 nice 不用安装直 只是重新安装一下他就可以了啊，艾特来指定版本号，我们装一个气垫七点零的吧， 等他安装完成。 安装完成之后啊，他自己会把这个版本给进行一个修改的啊，接下来我们再来启动 再看一下浏览器啊，这个错误，如果你们碰到的就是可能你安装的这个版本过高，因为刚才我们直接默然装没有指定版本的话，他使用的是最新的八点零的版本，而且这个新的这个版本也是最近才发布的。 看一下啊，现在还有没有问题，等他刷新完啊，这还是之前的啊，哎，这里呢又有个错误啊，还是一样的。那上面的我们就就不看啊，直接去找到他下面错误 的原因，然后这个错误的意思大概说我们来看看啊，他说我们使用了啊，这个一个属性啊，不知道的一个属性，然后嗯，接着会告诉我们，呃，支持的属性有这些啊，这几个，这几个对吧， 看到了吧，也就说我们这个配置有问题啊，我们这里使用的这个属性他不支持，那为什么不支持呢啊？而且我们这个是直接从这个手册这里 是吧，直接从这复制的，这里却告诉我们不支持啊。其实这也是版本的问题啊，他这个文档呢，写的可能比较早啊，早期的版本，哎，就是早期的这个 nice 多点啊，这么写没问题啊，就是 这样写没问题，但是随着这个拉丝兜的升级啊，他就不再支持这种写法了，不再支持这种写法了， 那支持什么呢？其实这里已经告诉我们了啊，他说你可能嗯要写这些这些，对吧？啊，那我们看一看，是第一个是不是 nice 的一个 opps 来自于选项，对吧？啊，所以我们用这个属性，那这个属性怎么用呢？啊？注意，你看这外面这是个对象，对吧？那所首先这个属性我得放到这个对象这里面，对不对？好，接着他这个选项呢？哎，他支持两个，他支持函数和支持这个 啊这个对象啊，那我就给他写个对象啊，他是支持两个的啊，支持函数还支持这个对象，我们写一个这种啊对象，然后把它给放进去就可以了啊，那其实 啊，我怎么知道这一块的呢？你去看一下这个拉丝 logo 的这个手册就可以啊，就可以找到，我们来看一看吧，一起还是这个文档里面啊，来找一找，在下面啊， 他说了这里是利用的这个拉丝 logo 的这个呃属性进行的主题的配置，然后呃这个可以点，你看我们右键在新建间中打开，就会来到他的这个给他啊这个地址，然后你看一下他最新的是八点零啊，而且是 最近才发布的啊，所以我们得降低下版本才能去使用哎，才能去正常的使用，接着往下看，下面有他的文档啊， 文朗说了啊，他支持的选项有这些，有这几个，这几个对不对？好，我们使用的是不是第一个，你看他说了支持这个对象和这个函数啊，然后，哎，描述的是说对这个 nice 进行一些啊，额外的一些配置吗？来，我们点开，他会告诉你怎么用啊，在这里， 哎，告诉你怎么用啊，这里他用的也是一个对象的方式，对吧？所以我们在写这的个配置的时候，也是用的对象的 方式，把这个配置箱放到这个对箱里面，好，接下来把这个停掉啊，停掉之后再来启动一下， 等他便宜完成啊，我把这个给重置一下，哎，可以看到啊， 是不是把这个主题色修完了之后，他所有的这个主题色都变了，哎，包括我们这个选项啊，包括这按钮的颜色，哎，包括这个悬浮的这个边框，哎，包括这个这里，哎， 那就是通过这个配置来修改了 nice 这个变量，这里就可以去改，去写我们自己需要的一个主题色，那这个就是对 ntd 我们自定义主题色的一个配置啊，上面的是按需引入的一个配置，那这个是 啊，主题色的配置，其实像这些啊，这些都都不用记，我给大家形成了笔记，因为这个呃，只有在你使用的时候，一开始去初始化你的项目的时候会配置一下，以后就不用配了，对吧？所以这些东西啊，没有必要记啊，你只要留好笔记，用到的时候能配置一下就可以啊。 那需要注意的地方就是这个关于这个 nice logo 的这个版本的这个问题啊，因为其实我们在写前端的话，经常会碰到这些啊插件，那这些依赖他 升级升级然后导致的一些问题啊，这个是比较常见的一个问题啊。好，那接着给他大家看一下笔记啊，笔记放到这里， 把这个折叠一下，然后这个还是用呃，麦克当写的，我们在那边预览啊，前面的啊，按需引入，也给大家形成了比例啊，要安装的这个几个工具，这三个我给 放到了一起啊，咱可以放到一起，然后去修改我们的启动的这个啊，修改拍个几的杰森， 最后去创建这个文件，写出这些配置。大家写好了啊，如果你要自定义主题的话，你要多安装一个 nice 和 nice logo 啊，那这个笔记我改一改，因为这个的话我们再给你加上这个版本号，是吧？来，找到，找到这里啊，艾特七点零点零啊，因为 不指定版本的话会出现啊，版本过高啊引起的一些问题，接着就来预览一下啊，好，然后是修改这个文件，哎，加上这个选项，把这个改正处 好，这个就是自定义主题，不用记这些配置哎，只要需要使用的时候，按照这个笔记，我们把它配置好就可以了啊啊，最后我们把 这个给删掉啊，这个里面东西太多了，而且没有必要，我们完全可以根据这个文件重新去安装就可以啊，在大家就说进行这个代码，比如说，呃， 推到这个版本库啊，或者说这个大马牛啊，考不给别人的时候，哎，最好不要带这个目录，这个目录东西太多了啊，我把它给删掉。好的，那这一小节就到这里。

好，那在这边啊，除了这一个的话，我们可以看得到它里面是不是还有这种什么这种，还有除了通用的话，是不是还有布局导航，然后数据日落，数据展示，数据返回和其他，明白吗？有这么多的组件，那这么多的组件我们给他做一个小的案例，让大家干嘛呢？把 这几个组件然后全部给他用一下，让大家知道是怎么回事。好，我就不单独给他用了啊？好，那我们想做一个什么样的案例呢？然后在这边我们去找一下在这个地方，这个地方是已经我之前做好的一个小案例，然后这边我把这案例干嘛呢？先把它刨起来，让大家看一下我们等下做出来的一个效果。啊？ 好，站到这边坐好了之后先按碟，好，站这边一 稍等一下。啊， 这好像是这样，还用到了一个，我看一下啊，之前应该写的这个 登录注册了的， 还没打开啊？ 重新开下。 好，站起来了啊， 好，起来之后，然后在这边啊，大家看啊，好，我们在这边啊给他内饰完成这样一个布局，大家看有一个导航，明白吗？然后在这里面点击的时候，你看页面是不是进行这个切换，然后这里面还有一个什么注册登录，然后在这边来看点击这个注册登录，是不是可以做一个什么？做一个切换，明白吗？ 那我们就希望给大家做出这样的一个效果来，明白吗？在这里面的话，就可以把我们今天要用到的所有的这些什么电梯里面的这个组建库，基本上的话我们都可以用的到，明白吧？好，这个呢就是。

啊啊，昨天啊，我们学了一下这个什么，原来可能里面的一个叫 like， 大概是这样的一个库，有了这个库的话，我们可以在 red 的项目中非常方便的去做什么，做这一个使用。好，今天的话我们再选另外一个生态圈。啊，另外一个生态圈是什么？也是 rec 的里面的一个生态圈。 red 里面的一个 ui 组件裤，在 ui 组件裤的话叫 a t d， 然后 tv n t t 的话，我们可以 用他的这个月逐渐过大家一个什么自己的一个项目。好，那接下来的话，我们先简单看一下 ntt 是什么啊？ 来找一下 nt t 的这个什么官网，然后在这边就点进去了之后看一下，然后这边你就可以在这边啊搜一下 a n t d， 然后一搜搜的话就可以看得到他的正面功能解释啊， 在这边的话他就有一个，我们点的话我们应该点这个文档里面，然后再去看啊，在这边大家就可以看得到 a n t d 是基于什么 的体战设计体系。一套瑞拉克的的优安组建库，主要用于什么企业及的这个中厚的产品的开发。好，那这边他有几个关键字大家需要读一下。第一个黑人基地，他是基于什么 的体战，然后这个设计体系出来的一个 ui 的组件裤。是谁的 ui 组件裤呢？是一个 red 的 ui 组件裤，主要用于什么？做综合的产品的开发。好，在这里面有几个大家需要注意一下的。好，注意一下的话来几个信息来。好，第一个大家看，首先啊，他在这边跟我们讲了一个， 他说 amtd 是基于什么？基于哪一个呢？是基于这一个叫什么？昂德基站这个设计体系，那首先大家需要注意下昂德基站这个设计体系 又是一个什么样的东西？然后要大致自带刀一下。好，那这边的话这个东西啊是干嘛的？就说这个体积是怎么回事啊？这个大家需要了解一下。 好，那这个呢？我们要大家知得到这个生意体系的话是什么？主要是我们的这个阿里旗下啊，这个阿里旗下的哪一个？阿里 旗下的这个蚂蚁金服啊的前端团队经过什么？经过多年的经验啊，多年的这个经验，然后总结出来的什么出来的一套什么一套设计什么设计规范， 遵循这套设计规范啊，遵循这套 设计规范可可以设计出什么？可以设计 出啊？更加符合什么？符合大众心里的什么心理和需求的这种什么产品。 明白，好，这个的话就称为叫做什么 a、 n、 t、 d， 然后声音提前也叫做昂的昂的抵战，昂的昂头的话，这个单词翻译过来啊，大家需要注意啊，这个东西叫蚂蚁，明白吗？ 然后这个底站，然后翻译过来的话叫设计，叫蚂蚁设计，就说蚂蚁设计体系是蚂蚁，就说是艾米旗下的蚂蚁金服潜能团队经过多年的总结出来的一套设计规范， 这一套设计规范你设计出来的产品就能符合大众的心理，然后的话用起来就非常的好。那在这里面他是怎么回事呢？大家在这边大家点到这个设计里面，然后在这里面去看一下，他就会对我们的这个安的底站这个设计体系，然后去做一个什么简介，大家可以看得到就说蚂蚁， 蚂蚁集团的话旗下有很多的产品，然后呢一些潜能团队就根据这些产品，其实就是这些产品里面的一些什么 拥有的一些特性总结出来了。在我们设计的过程中，我们要基于四个方向去走，哪四个方向呢？第一要基于自然，第二要基于确定性，第三要基于意义感，第四要基于是生长性。就说这一个什么设计体系，我们刚刚讲的这个话叫什么？叫这一个 好的几站设计体系吗？当然几站设计体系的话要遵循什么？遵循四个原则，哪四个原则呢？大家可以看到基于什么自然，然后确定和这个什么意义，然后的话还一个的话是什么？ 还有一个是他跟我们说好的叫生长性啊。在这里面意思是说在我们开发的过程中，我们如果要做设计产品的话，我们要遵循这什么这四大的这个产品，然后就可以做 出来一个比较符合什么用户的一个什么一个要求的一个产品，明白吗？啊？在这边大家可以看到是基于自然、确定意义、生长性这四大体系，这四大体系的话就是蚂蚁近乎的四大体系，明白吗？好，然后在这边的话大家就在这里面就可以去看一下他这边， 那就给你详细的给你介绍了一下，是吗？就说蚂蚁金蜂应该说怎么样的设计规范，在这里面就有这种文档，现在这个操作大家有时间的话可以去读一下这里面的这一些好吗？对于大家 在做产品设计的时候，以至于后面大家跟产品经理能够接触的时候也能够干嘛呢？有化疗啊，这个写的确实挺不错的啊，从这几个方向大家去看一下这，哎，写好了的好不好？好，这里就是给大家解释的，第一点就是说阿的底站是什么，是基于这个生意体系的 好，第二个大家可以看得到他是一套什么？是一套瑞克的 ui 组件裤，那这里面大家就需要注意一下，就是我们的安的底站啊，啊，这个什么安的安的 ntd 啊的，这个是 nt 的，这个什么实用范围好， 好，那大家注意啊，就是 amtd 的 antd 啊，最先啊是什么遵循什么？遵循 amtes ig 这个设计规范设计出来的主要是为了什么？主要是 主要是为啊这个瑞瑞克提供的什么？提供的这个优爱组建库，明白吧？但是随着，但是啊，随着这个什么随着 amt d 的这个什么流行啊，明白吧，慢慢的 这个 ui 组件裤啊，这个 ui 组件裤也可以背什么也可以啊，在哪一个呢？在这个 vivo 和这个什么安哥来解释 里面。行，明白，意思就是说就说这一个 ntd 最先是在 vico 里面用的，明白吗？但是因为这个东西太流行了，慢慢的有人也把这个 ui 主间库放在什么 vivo 和安购栏里面去用了，明白吗？好，那在这边的话大家就可以这样去搜，然后搜一个什么，搜一个 antd， 然后杠什么 vivo， 那这边的话你就可以找得到就 a t d 在微友中的使用场景，然后在这里面你看阿诺姐在微友，然后在这里面编也做好了，如果你要在你的 nt t， 你，你要把你的这个什么，把你的这个 nt 店放在微友里面去用，大家看，这里面也做好了。好，那除了这个的话，他还可以放在什么？还可以放在什么？放在安哥 戒色里面也可以用的啊，这个写错了， a gul 呀。好，然后在这边大家可以看得到， 怎么这么差，就这样一个王者啊，这，这样啊，现在进不来可以上玩一下啊。 好，就这样一个库来看，这个库的话是在谁里面用的呢？在安格兰 gs 里面也可以用，明白吗？好，这个时候大家需要注意下。好，最后的话大家还需要注意点，就是这个还需要有点注意， 就是这个什么，就这个 nt d 啊，最先是做什么？做批次端的啊？明白，后来也为期啊，后来慢慢的也开发出来了，什么，也开发出来了 一套什么基于这个手机端的啊？ y 组间库。明白，好意思说他还有一套组间库啊，还套组间库，大家也需要了解一下，这个叫 nt 的，膜拜啊，然后在这里面 nt 的， 然后什么 m b a l e 摩拜啊，然后是用于什么？用手机扔的，就他最先是做什么？做 ps 的产品的啊，但是因为这个东西太好用了， 手机端别人也开发出来的一套 ur 主线库。好，然后在这里面大家可以看得到，在这边你也可以下去看一下，点开探索，然后进去了之后他也可以干嘛呢？做手机端的应用，这个的话就跟哪一个呢？跟之前的， 那就是爱你们的鱼丸里面与之对应的不有一个蜜桃鱼丸吗？然后也是做手机灯布局的，大家看这里面一些手机灯的效果，他也给我们做好了的，像这种，你看 这像这个手机的这个顶部导航来，这是一个比较常见的应用，明白吗？在这里面还有很多，好吧，好， 那这边的话我们就给大家讲一下 nt 的使用范围，那最先使用的范围的话，他是不是给什么 red 提供的？但是后面的未有。 red 里面也可以用，手机端是不是也可以用？好吧，好，最后在这里面还有一个就是什么，大家可以看到他还有一个部分，他给我们剪辑了。 主要是用于什么？主要是用于做什么？做中后台程序啊，在这里面，在这里面又有一个中后台。这个好，在这里面呢，我们就要大致了解一下什么是中后台，以及这一些基本的概念啊。好，中后台产品啊， 那在这里面你要了解第一个小的问题，什么是什么？什么是中后台啊？已经有时候别人经常换一个问法，有的时候啊，有的时候别人也问， 别人也问啊，是否做过什么？做过中台程序开发，或者说是什么 说是中台开放，这个就有的时候别人会问你啊，说你是否做过中后台，或者说做过中台程序，或者说中后台程序，这都是同一个概念，明白吗？那这里面什么是中后台，大家有知道的吗？ 这什么是中后台？这个能理解的过来吗？其实就是鉴于什么，那在这里最简单的打法就是鉴于什么？鉴于啊，鉴于 于前台和后台之间的一个应用，一般我们称之为中 一般这种，一般这种项目啊，都是一些什么管理系统， 明白，一般啊，不需要对大众的，只是针对什么，只是针对少部分的啊， 使用的这种群体，明白，就是这样开发出来的这个程序，一般来说中台程序啊，他是不会干嘛的，不会给互联网上所有的这种大众使用的，他只是针对少部分的使用群体，而这种的话一般是管理系统，管理系统的话我们一般也称为叫什么？上面是系统，明白吗？就这个只是针对少部分 使用的，那这个少部分使用的话，一般就拿这个去做，明白吗？这叫中后台，好吧？好，那知道这概念的话，那我们把这里面三个点是不是就给他介绍清楚了？就是说， 那你听听他是什么啊？那这里面大家知道，第一个是基于这个生育体系做出来的，这是蚂蚁金服的，第二个他是 ur 组件裤，但这套 ur 组件裤不光可以在什么，光是可以在 licad 里面用，然后的话，微友啊，安哥拉啊，然后以及手机上都有的，然后最后的话主要是用于做什么中国的程序来开发好不好？好，这个给大家。

这是使用 h e n o 原声 table 标签实现的一个表格，现在你要给表头设置宽度，如果你直接使用 vit 来设置，会发现并没有效果。其实你可以尝试一下 mit。 若你想固定表头，那你只需要给每个表头加上粘性定位，把 top 设置为零即可。固定的效果 同理，将要把表格最后一列固定到表格外层，盒子最右侧可以继续使用粘性定位，把 i 设置为零， 额外加上一个层级，让表头永远在最顶层。接着将每行的最后一个单元格进行固定，这样就达到右侧固定的效果了。 如果你还想 实现表格每行点击高亮，则需要通 js 表格的每个 tr 标签加上点击事件。在点击表格的当前行时，通过新增一个类名来实现，通过类名实现高量的样式。当然初始化表格时需要给每行添加一个 index 属性， 复上职后通过下标就可以知道典籍的是哪一行了。值得注意的是，新增类名前一定要先把表格每行实现高亮的类名移除，这样就可以达到高亮的效果了。 以上几个效果就是 table 标签的常见需求，但是大概率我们都不需要通过手写来实现，因为现在的框架都会有现成的封装，大家了解即可。本期就到这下期见。

嗯，大家好，今天呢我们给大家介绍一下这个表格布局的使用，那么在表格布局当中来说的话呢，我们定义一个表格的布局，关键是由什么呢？由行列来构成，也就是说一个列的宽度呢，是由该列当中最宽的那个单元格来指定的， 在表格布局的宽度当中是由他的副容器所指定的，那么在 table real 当中来说的话呢，有这设置这几个三个属性，我们先简单画一幅简单的这个示意图， 那么假设在这里面来说的话呢，我们要打一个简单的这个表格布局，那么一提起这个表格布局呢，我们都知道他是由什么呢？由我们的单元格来决定的，比如说有几行几列来决定，这样啊，几行几列来决定，那么在编写这个表格 布局的时候呢，我们只需要关注这几个关键字就行了。第一个关键字，如果要是说设置这个表格布局当中的这个属性是 skinable， 那么表示什么呢？表示当前这一列呢，标示为 skinable 的话呢，然后呢，该列的这个宽度是可以进行收缩， 然后呢如果标示为这个属性的话呢，表示该列的这个宽度来说的话呢，是可以什么呢？是可以拉伸的，也可以填充整个表格当中的这个空弦的这个位置，然后呢，如果设置为最后一个属性呢，那么表示什么呢？表示该列是可以被隐藏的， 那么在设计的过程当中，我们注意一下这个技巧，在一个列当中，我们可以同时使用什么？使用 skinable 和当前这个属性来说，表示当前这个列呢，可以任意的进行 拉缩或者是拉伸或者是收缩，以适应这个俯冲口的这么一个使用。然后我们来看一下这表格布局当中的一个继承关系图，那么这个 table lao 的话呢，它是继承什么？继承这个 land lao， 对吧？是继承一个线性布局， 那么继承了这个线线布局来说，他不但具有线线布局的这以上的这个属性，那么表格布局当中还有自己的一些特有的一些属性。我们先来看一下，第一个， 如果设置为当前这个列的这个属性为这个属性呢？那么表示什么呢？表示该列是可以什么呢？可以隐藏起来的， 如果设置为当前这个属性呢？那么该列是可以什么进行一个是拉伸的这种收缩的这么一个效果，设置为最后一个呢？是表示什么呢？表示当前这列呢 可以进行什么嗖嗖的这么一个效果啊？然后呢注意的地方就是表格布局当中所谓的列的次序号来说的话呢，是什么？是从零开始的，好，我们先新建一个工程来实践一下，然后我们这样定义啊，叫 table 杠 lay out， 然后呢我们选择二点二的版本，然后在这里面就是选择的是 n 转什么表格布局 等 t a b my layout。 然后呢选择 finish。 好，我们打开这个表格布局当中的一个什么呢？ 一个布局文件，那么这个布局文件来说的话，我们把这个删除掉啊，我们当前这个布局来说，外层布局呢，我们还是取用什么？使用这个现金布局作为一个总的布局，然后这里面写上一个 t a table 什么呢？ table lay out。 好，我们给这个 table 六二呢，起了一个 id， 名称叫什么呢？ at 加上 id 杠 table layout 一啊，然后呢它的宽度，高度呢？我们从这里面把这个属性给拷围过来， 然后呢他的高度我们采用是什么呢？采用的是一个叫填充副窗口，不采用的是一个内容包裹啊，内容包裹。那么内容包裹来说的话呢，这个时候呢， 我们把它的背景颜色呢进行设置一下。 bet brown 等于什么呢？我们等于白色， 对吧？等于白色。然后呢在这个表格布局当中，我们要设置什么呢？设置这么一个示意的图，在这里面，我们把这个给他重新什么呢？重新给他画一个示意图，这个示意图这样写 在这里面整个表格布局当中采用外层呢，我们采用的是一个什么呢？采用的是一个线性布局， 那么内层当中来说的话呢，我们采用一个表格布局，在这个表格布局当中，我们先定一个什么，用一个 attest 来表示，输一个输入框，那么这个 attest 来说呢，它所占的这个表格 布局来说的话呢，只有什么？是不是只有一行一列？所以呢在这个 table layout 当中来说的话呢，我们是先设置它的一个什么一个列的这个属性叫 proms 等什么的，它的次序我们刚刚说的是从零开始的，对吧？然后设置完这个之后呢，我们该开始设置它的这个行叫 tab table， 什么？ table rose， 那么这个 table rose 来说的话，我们设置一下它的这个属性，先给它起一个 id 啊， id 来说的话呢，我们给它起个名称叫 b， 呃，一二五 w table rose， 一二，让它填充的这个副窗口来说的话，这个属性宽度高度我们从这里拷贝过来，然后呢将它填 填充副窗口的宽度高度来说，我们看一下宽度呢，我们采用的是什么呢？采用的是这个填充副窗口，高度呢？采用的是内容包裹。好在这里面我们给大家编写一个什么呢？编写一个叫 test view， 叫 题语一 test build， 那么这个 test build 呢？我们设置一下它的这个属性 给它起的这个 id， 对吧？ id 等于什么呢？等于 app 加上 id 杠。什么叫 test view？ 然后呢宽度高度呢？我们都采用的是内容包裹，对吧？采用的都是内容包裹，宽度高度采用内容包。 然后我们再设置一下他底下那几个属性，比如说设置一下他的背景颜色呢？等于什么呢？我们等于这个颜色，等于艾特这粉色啊， fd 八 地板地，对吧？然后呢还得设置一下他的这个呃文本的颜色，那么文本颜色我们从这个叫 test color， 等等等什么呢？我们采用的是这个颜色，零 这一二三四五六，这是表示什么呢？表示的是黑色。然后设置完这个之后呢，还得需要设置他的一个边框的这个距离，那么 and 什么呢？边框距离我们还记得吗？应该叫 pending， pending 呢等于什么呢？等 等于四个像素。然后还得设置一下它位于什么呢？位于这个叫 layout， 有一个叫 layout 杠 center t e r i n p a r e n t 等于什么呢？ 等于处，对吧？让他是什么呢？位于这个副窗口的这个位置来说的话呢是什么呢？是居中对齐，居中对齐 好，设置完之后我们来运行一下，先来看一下这个效果啊， huh， 这样呢，我们就给给他设计出来了，最后呢我们在这里面给他这个文本标记呢，给他写上一个什么呢？写上一个 test 标记，嗯，这 test 等于什么呢？比如说这是表格布局的什么使用， 那么等于是我们设置了一个什么？设置了一个整个，在整个 table real， 当 table real 当中已经设置了第一行，对吧？然后呢在这里面我们再设置第二行， 那么第二行来说的话呢，我们同样也采用一个什么呢？采用一个叫 tablely out， 对吧？ tablely out 在这里面这是第一个表格布局，第二个呢 采用的是一个 ta table 什么呢？ layout， 那么这个 table layout 来说的话呢？同样在这里面我们来看一下设置，先给大家起一个 id 啊， id 等于什么呢？ at 加上 id 杠 mypab table lay out on。 然后呢它的这个宽度跟高度来说的话呢，我们从这里拷贝过来都是什么呢？ 宽度来说，我们采用的是什么呢？叫匹配副窗口，匹配副窗口 好，那么设置完这个属性完了之后呢，我们还得要需要设置一个 enjoy 的什么呢？这个叫产生的列的个数 零一二三。那么这个属相呢？我给大家呃讲解一下，就说如果我们使用这个表格布局来打这个元，打这个布局元素呢？首先第一点，这个关键字非常重要， 表示什么呢？表示当前我们可以设置的这个 cross， 表示列的意思，那么列的序号呢？我们是从零开始的， 那么零用逗号一二三就表示当前来说的话呢，有几列啊？我们这里面来说选择的是四列，对吧？那么四列接着来说的话呢，我们要设置什么呢？设置每一列当中的这个包含的什么？这个行叫 t table 什么呢？ 有一个叫 table rose， 对吧？这个 table rose 来说，我们从这里把这个属性给它拷贝过来， 采用的填充方式在这里，好，我们给它格式换一下将好看一下这个代码。 table rose 呢？我们选择是二，对吧？ 宽度跟高度来说，一个是宽度是填充副窗口，对吧？然后高度来说的话呢，我们采用的是内容包裹，然后呢在当前这个 table rose 当中的时候，我们去设置一下什么呢？设置一下他的这个 botton bottom button， 那么这个 button 呢？我们给它起个名称叫 id， 对吧？等于什么呢？ at 加上 id 杠 bottom， 嗯，对吧？然后呢采用的包裹方式呢？是什么呢？我们都采用的是都是内容包裹，然后呢给当前这个 bottom 呢设置一个文 本信息等 b u t t n e， 对吧？好，设置完第一个之后呢，我们把这个 bottle 呢说给他拷贝几份呢？给他拷贝成四份，好，在这里面。 好，我们格式换一下，我们来看一下啊，看一下这个布局，那么当前这个布局的时候，我们设置这个列来说的话呢？是几列啊？是四列对吧？ 用四列来说的话呢，在这里面在这个 table rose 当中就表示什么呢？表示当前我们有几行，对吧？那几行来说的话，我们分别给他写上什么呢？ 写上这四个 bottom。 好，我们这里面先运行一下，看一下这个效果啊，那么运行之前我们把这个 bottom 来说的话呢，这个 test 我们改一下，改成这个二 三四段，好，我们运行一下。 好，我们看一下在这里面呢就产生了什么？四个什么？四个按钮，对吧？四个按钮。那么这设置完了这个之后呢，在这里面呢，我们还得最后还设置一个最简单的一个啊，在这里面再给他添加一个什么呢？添加一个 table ray out， 叫 t a b layout table layout table layout 呢？我们给它起个名称 id 等于什么呢？ at 加上 id 杠子吗 类啊三段。然后呢让它的这个填充方式来说的话呢，我们从这里拷贝过来是填充什么？填充副窗口， 填充负重口。如果在这里面我们想指定他当前这个表 table real 来说只有一列怎么办呢？我们写标注当前这个序号为零就行了，那么就表示当前这个 table real 来说的话呢，只有什么？只有一列？ 然后呢在这里面我们设置一个 table road， table table road。 那么这个 table 这样写 id 等于什么呢？设置一个 id 等于 at， 加上什么 id？ 钢铁屏 table o w 三，对吧？然后呢设置它的这个宽度，高度来说的话呢，我们采用都是内容包裹啊，一个是宽度是填充副窗口，高度呢，采用的是内容包裹。然后再 在这里面呢我们给它加上什么呢？我们先格式换一下，在这里面给它加上一个 ad test。 一，第一什么呢？ attest， 那么这个 attest 呢，是表示编辑框的意思，后面我们会讲到啊，然后呢给它起了个 and android， 什么呢？ 冒号 test 等于什么呢？这个给它初始化一个关键字叫查询， 查询好，然后呢我们设置他的这个宽度高度来说的话呢，都是采用什么呢？采用的是宽度跟高度都是采用的是。呃，匹配服装口，匹配服装口。 好，我们拷贝一下啊，好，在这里面给他几个 id， 对吧？ id 等于什么呢？ 等于，哎，对，加上 id 杠什么？这个叫 test view 一啊。好，那么整个表格不久他说的话呢，我们就设置完了。好，我们来看一下， 那么好，我们来看一下这个表格布局，对吧？那么在设置的过程当中，我们再回顾一下这个表格的这个布局的设置的规律。 在这里面我们用一个 table real 来说的话呢，来包含我们要指定要布局的这个元素，那么包含这个元素 来说，首先地点先在 table real 这个标签里面先定义到底我们要设置这个表格布局当中包含几列，对吧？然后呢再使用这个 table road 来说的话呢，来指定它的这个列的个数，对吧？列的个数对应什么？比如说是零一二三，那么应该有四列， 四列来说的话呢，我们对应的这个函数来说的话呢，是在这里四行四列，对吧？好，那我们就这样到这里啊。

今天分享一个我在使用 mtd 的时候遇到的一个问题，这里是一个非常简单的一个缝的表单，然后这里有一个 basically phone item， 然后这里直接返回了一个 input 预期之中，我在监听这一个 on values 劝局的时候，他会打印一个 test， 但是在我实际运行的过程中，我发现他并没有去打印，那这是为什么呢？ 我们直接在这里写一个音铺的，然后刷新一下， 发现他是会打印的，那这么写跟这么写有什么区别呢？我们 我们来看一下官方的文档被设置了 name 的属性的风埃藤包装的空间表单，空间会自动添加 wwe ouchange 数据同步将被 follow 接管， 这个时候他才能够去使用这个 on values 劝觉。这什么意思呢？ 我们将这一个 props 打印出来， 可以看得到他，他其实是将 values 跟 enchange 都注入到了 basketball phone 的艾特的这一个主见下面的，但他并没有 传递给这个 input。 那我们的解决方法呢？其实也很简单，我们只需要将他的 prop 破传进来， 我们来再来刷新一下，看一下这个时候他就可以了。 今天的一个分享就到这里，谢谢大家。

你的大眼睛。

为满足业务和品牌上多样化的视觉需求，组监控体系都会在设计规范和技术上支持灵活的样式定制，包括但不限于全局样式和指定组建的视觉呈现， 例如主色、圆角、边框、阴影层级以及动效等。 相较于前几个版本的主题定制方案，昂特点赞五点零提供了一套基于设计令牌思想而抽，提出符合自身设计理念的全新体系化定制主题方案。 注意， description 是设计系统中的视觉原子，可翻译为设计指令或者设计令牌，帮助设计师和开发工程 师之间建立起表达决策的通用语言。在 aunt d 赞五点零中，其提供了一套通用的 tok 生成算法。 以色彩生成方案为例， ont 点赞将自定颜色的色板生成算法抽离到了一个通用的 ont 点赞 colors 库中。值得一提的是，在 ont 点赞不同版本中，对于色版生成的方案有着十分巨大的差异。 在 aunt d 赞一点 x 色板算法中，其主要使用的是基于 r g b 模型线性组合的黑白混合算法。 然而 rgb 色彩模型线性换算过程中的间隔变化较大，对于人眼视觉效果及感性认知不友好。 在二点 x 色板算法中， aunt 底赞使用了基于 h s l 模型进行北赛尔曲线拟合后，再通过对灰度的判断分别进行加深及减弱的分化力度算法。 相较于 rgb 色彩模型， hsl 色彩模型则可以利用色相的旋转去做对应的加深和减弱，更加符合人的视觉感知。 对于 h s l 色彩模型而言， h s v 模型的变化梯度则更加的柔和且易于控制。因而，在 aunt 点赞三点 x 中， 昂德里赞对于灰度判断的理论依据不再基于北赛尔曲线拟合的 hsl 色彩模型，而又重新改为线性条 调整的 hsv 的色彩模型简化算法的混合方案在 on the d 赞五点零中，其仍沿袭了自三点零版本之后的基于 hsv 色彩模型的自定义色板算法。 可以看出，对于 anthda 五点零的分割力度方案而言，色相的判断区位在六十到二百四十之间，饱和度和明度的加深及减弱梯度则是明显有所区别，且减弱的幅度更大。 需要说明的是，这里提到了许多专业术语，比如北赛尔曲线色彩模型等。 学术界对色彩的研究十分复杂，包含有色彩理论、色彩模型、色彩空间、色彩计算等。感兴趣的读者可查阅相关资料进行深入学习。