027-直播间模块-header组件原创

Hello，那位这一期啊，咱们来看一下我们诶直播间页面的布局部分啊，因为我们已经登录进来配置好了啊，我们可以呀，想一想呢，把这个hier部分内容啊，咱们给它布局完成，但然里面有些功能咱们可能做不了，那至少我能够进来知道这是谁的直播间呀，来这块我们还是能够完成的，好吧，列外来跟科文一起啊来看一下这些信息，那有人就说了科，我觉得你现在啊，你根本就不用配置就能知道，因为我点进来之后，那养组的这些头像对吧？这些信息咱们不都存在内部衣服里面了吗？嗯，是这样的，这些信息确实咱们可以从这个字段中来获取，就是我们的APP类iner中，咱们还打印了它，大家可以看到这个字段里面的信息，其实挺丰富的了，嗯，往上咕噜一下能找到，你看里面有很多信息，诶这个再往上走一下。重新编译一下啊，咱们这个信息类物一分的信息很丰富，对吧，里面肯定有这个人的一些头像信息，咱们都能拿得到的啊，最终的话你可以你看看头像信息也都有对不？哎，这是隐名的哈，这个不对，是这个的对吧，里面是杨组的头像的信息啊，还有名字都能拿得到啊，但是这是他们自己往数据库存的呀啊这些信息里面有一个像什么这个几个人在看，这些信息你永远获取不到的，你几人在看，你自己来统计呀，进入到你直播间，你自己在加一啊，那那其他人再来了呢，你现在就两个人，你将来这个十个人进来，你怎么知道十个人进来了，一定会用到socket通信的，所以咱们即使通讯这个产品，咱们就得用它啊，所以接下来的话呢，我想说就别看头部就这些信息，像这些信息的话，里面就是一个几个人在看，那也不是玩的，不是写死的，咱们是真正的获取到直播经验对象之后啊，咱们来进行啊显示的，所以我们接下来就是已经。

都配置好了，我们就是让他主动的触发join人room这个函数，Join人room之后就加入到这个直播间之后，它会给你生成一个对象，这个对象里面就存的咱们当前直播间的这个群主的信息，以及咱们当前登录进来的这个人的信息，以及几个人正在看等等的这些信息都在这里面啊，所以接下来咱们要讲的这个重点的东西就是咱们这个状人room这个方法，有了状人入这个方法之后，咱们才能够实现咱们什么几人在看呀，领取优惠券等等的这样一些行为的，好吧，那接下来就是这一个join room这一个方法，Join room这个方法你列我也可以参考文档，但是这个文档我还是想说一下，它有些关键词他不给我写啊，所以在这里你看他告诉我说join room这个方法直接调一下就行了，就这调一下就行了，但我实际调用中会发现他必须让我传一个入ID啊，所以在这里我还得去把这个入ID再重新的再传一次啊，我们在这里。

对于这个文档来说的话，确实是有点问题的哈，但没关系啊，咱们还得啊，一步走一步去测啊，来到这里之后，那就在这里吗？我不是已经初始化成功了吗？那接下来我就要照用入了，对不对，加入到直播间啊，调用这个方法，因为只有加入到直播间之后，当前这个用户才真正的进来了啊，因为咱们之前都属于初始化这一个部分，好join room的方法非常简单，这次点TLS，然后咱们在这join room这个方法，好，我真正的join进来之后join room啊，调用这个方法，然后咱们在这wait等待啊，大家会发现哈，只要我一调用这个方法，它会提示我一个什么方什么问题啊，一运行之后报错了已经哈，他告诉我什么呀，他说这个room ID必填，你这没告诉我呀，那文档中也没说这个room ID为这个必填项呀，对吧？啊没没办法哈，咱们还得填一下，还是当前这个直播间的这个room ID信息，然后room ID这个字段。

咱们把这个room门ID字段还填成咱们的app.live in，点R'M_ID，啊，就是在之前这块填的，给它复制过来也可以，然后最终的话呢，你能够在这里面拿到一些有用的一些信息，而且这为了保证能拿到群主的信息，诶保证能拿到群主信息，咱们在这里传一个get owner，然后infer，然后设置成true啊，大家说这些东西你怎么知道的，那就是我去找他的这个官方的DEMO，发现人家里面这么写的我才知道说哦，传入ID啊，然后传get owner in这些信息啊，那是干什么意思啊，最终的话，咱们解构出来东西里面的话有一个什么group infer啊，大家可以打印之后发现这个对象有两个属性啊，在点儿也行啊，可在这肯定是之前写过了，所以我可以很确定的说，里面就有我们这些信息的，有什么信息啊，Group infer user infer来打印。

验，咱们看一下，此时来重新执行一遍哈，编译完之后咱们看一下这些信息对不对，点进了杨组之后，咱们看一下这些信息来列位，第一个是group infer，就是这个群组的这一个信息里面这个信息对不对，这是不是杨组的直播间，这个什么2YOU，你记住哈，讲的是杨组的这个group ID，还有这个大家好，我是杨祖啊，然后还有这个什么一些时间呀，还有这块看见他们member count，当前直播间的用户数量，也就是几人在看呗，因为咱们这是直播间啊，所以进来之后就能加入进来，离开之后就退出了，说这个二就说明当前进来的这个直播间的人啊，一共有两个人啊，然后在这儿还有他的名字杨卓，哎，这块大家的公告，请大家文明发言，其实这个对象信息拿到的就是在这的这个信息列，对在这里的咱们这个群组中的这个信息来就拿到了这些信息，对不对啊，都拿到了啊，我们。

群主群简介啊，还有这个其他的一些群名称的创建时间都拿到了，在这里面，而这个user ID的话呢，是我当前登录的这个用户啊，这个信息咱们说这个信息咱们往自己的数据库存了一份，你忘了吗？这个信息咱们当年还往I'm的这个体系里面，咱们还存了一份呢，是不是往咱们的I'm的这个体重也存了一份，所以这个就拿到咱们I'm的这个信息，你看是吧，有什么生日性别等等的，那可是隐名这个字段UID是这个啊，只不过咱们往自己数据库也备份了一下，所以你认为从自己数据库拿到了，这就不用拿了，他们在这里拿了，这个可能更加的详细里面对不对啊，Group ID里面的话呢，这个对应的就是这个群组的信息，然后里面还有一个叫group，呃，叫owner iner拿到了，就是这个群的里面这个群主的这个信息啊，你看见了吗？Owner infer里面。

到的是当前群主的群主是谁，是杨左嘛，只不过咱们在这把这个什么呀，这个直播间的这个拿到信息里面的有个owner infer是群主的信息，而这个呢，User infer是咱们当前这个加到刚刚加入这个群组的这个人的一个信息，你看都在这里面完整的拿到了，哎呀，这东西跟他说绕口令儿似的啊，所以刚开始用这个小模块的时候，肯定会觉得这些信息乱七八糟的，但你列位知道这些信息是最全货的，什么几个人在看等等的啊，谁给谁点赞，咱们都在这里面啊，所以我把这个group infer user iner解构出来之后呀，哎，我给它存到哪里呢？存到我自己的状态里面来，因为将来了我得利用这些信息啊做活呢，所以我对应的会在我们这个data中啊，我写好一个什么group in符这个字段初始值是一个空，还有一个owner in owner in符。

就是我们群主的信息，哎，群主的信息还有一个当前user infer，当前登录用户的这个信息要注意app.user data，那是咱们在自己数据库那点信息，app.live infer，那也是咱们在自己数据库那点信息，而group infer是咱们从即时通讯的I'm中出来的群主的这个信息，Owner infer是从咱们即时通讯I'm中拿回来的群主的信息，User infer是咱们从我们的即时通讯中拿出来的当前登录用户的这个信息很全的是吧？哎，在这里咱们就可以来进行一个set data的一个设置，咱们就一起设置呗，这几个，那在这里就是一个this.set data，保证这的指向是没有问题的group infer，然后这就是user infer，还有一个什么呢？Owner infer是在group infer里面有个owner infer啊，这里别弄错了就行了，例外啊，Group INF。

这个字段中咱们有这个啊是吧，我这块应该是group用用户里面的话呢，应该有这个字段，好了，保存之后咱们看一眼这块怎么报错了呀，在这里的话group infer在这group infer重新编译一下啊，怎么出问题了吗？编译一下嗯，因为有时候的话，它这块啊，它不编译的话可能会有点问题，你看编译完了之后就好了啊，因为我也之前也说过哈，热更新啊，有些他只是这个当前某个组件的局部更新啊，很多数据也不会再区遍，所以导致他如户因会拿不到啊，然DeFine的点就报错了啊，所以遇到这种情况就重新的编译一下就可以了，好吧，那这样的话，咱们这些信息就存好了，另外有了这些信息的话，你说我在做这个头部这块的布局还很费劲吗？是不是当前的群主的头像，群主的这一个名字啊，然后对应的群主有几个粉丝，现在不能有对吧，但几个人在看诶咱。

咱们那个群组里面就有了group INF啊，群组组这个信息啊就有了，咱们就可以把它给显示出来了，好吧，咱们这一节的内容就是把上面这一个头部这一个组件，咱们给从数据啊到布局实现了就行了，当然里面有些这个每一个什么关注取消关注啊，几个粉丝啊，什么几人在看，再点一下能看到这个人的详细信息等等的，都很细节，但咱们这节课的内容就只负责把我们这点东西啊给他做出来就可以了。好吧，来跟哥们来试一下，因为咱们可以先把面儿上的哎，表面上做出来，还有这个聊天区对吧？嗯，表面做完了之后再去抠咱们的这些细节部分了。来吧，我们可以来写一个组件，因为我们这块组件化开发，我可不敢把将来所有代码写在利用在这个WXM2中，我的天呐，这个乱成什么程度了对吧？所以我在这里肯定是利用我们的这个是吧，组件化开发来去做。

那在正式去写之前呀，我还有一个问题啊，就是你看这个直播间页面的话，咱们是不是得让它全屏，这样的话会更好看一点，你看我现在这种感觉就是，哎呀不好看啊，因为我既然写写任何代码，他就是在这个header部分下面去写的啊，所以我得先让我的这个直播这个页面啊，咱们让他进行一个全屏，那这个全屏如何去写啊，是不是对应的在咱们的Jason文件中列位啊，我们小程序开发中啊，我们里面提供了一个叫什么呀，Navigation style这个属性，哎里面default就是默认的custom是你自定义的，你可以自己随便去写的啊，所以改成这个custom之后的话呢，就变成咱们自定义的了，那这块的话又得出问题，咱们重新编译一遍啊，重新编译一遍就行了。

好吧，在进行进来之后就不会报错了，对吧？啊，这块就是我们重新自己去写了答案在这答家说这不还有这些东西吗？客们哎，你自己做点背景啊，做点东西啊，给它写一写，你能发现它是好用的啊，我们在这写一个view啊，我们对应的这个view的话，咱们给它起一个名字，比如说叫做这个class名字啊，我们叫做这个room的BG啊，我们的背景，然后对应的我们在这个room BG中的话呢，我们做一下class，我们对应了这个bank ground，我就给他一个什么black，黑色的里面的字体的话呢，我就给他一个白色的，运行之后的话呢，对吧，咱们重新的一编译，我看一下这个class名字写好了，诶，咱们这个宽高没给他这个宽高，咱们给他宽度的话呢，100VW，然后高度的话呢，给他一个100V1保存之后，你看对吧，整个黑色全屏的背景的话呢，就已经被咱们给它加好了，另外啊，当然你要是把这个属性给它去掉啊，你会发现这个。

呃，全屏的背景根本就加不到全屏上，你只能加给谁呀，加到这一部分上来对吧？所以这个东西是有必要加进去的，好，那这样的话你保存之后是吧，没有问题，好接下来咱们再开始开发我们这一块啊，我们来做一下我们这一个呃组件，我们来到我们的live务WSM中，我理想中的话呢，是在这里面引入我的这个组件，但这个组件我还没写，但是我现在有想法呢，Room-hier组件，这个组件我一会儿就要创建出来，然后并且给在这里面注册一下就行了，所以在我的components。文件夹下，我们在这个文件夹下再新建一个文件夹，叫我们的room header文件夹，在room header中我们新建好一个room header组件，好列位，诶，这个文件写错了哈，我是不是选错了，我没选那一个组件啊room hier组件，OK，创建完了这个组件之后。

接下来在咱们的小程序的G算文件中，我要使用组件怎么去用呀，Room-header冒号，呃三个点呃两个点上一级，上一级下面的compose下面的room header下面的room header保存之后，哎，这个组件才算是正式的被引入成功，点进来之后，大家可以看到，你看看真的是在最上面，最上面这块来显示出来的啊，最上面能显示出来我们这几个文字，好这样来说的话呢，我们把这个东西的话呢，就成功的显示好了，好接下来咱们就把精力放在我们的这个room header这个组件，咱们可以对于room header这个组件的话呢，传数据过去，另外你必须要传数据啊，你要传什么数据，传你的owner数据和你的group数据，就是当前这个直播间的群主是谁，在这里，群主这些信息传。

过来也好布局这里呀，那就把这个当前直播间的群组，就这个组啊，这个直播间的信息传过来，好显示几人正在看这样的嘛，所以我们一定要把这个传过来，所以我在这里就要传参传一个什么呢。Owner infer按在这里，把咱们之前的那个owner infer传过来，还要再传一个什么group infer，再把咱们的group INF的话呢，再给它传过来，另外owner INF group infer这些东西不都是咱们之前在这个地方已经send data完了嘛，所以说你这边要更新了之后，肯定会往孩子里面传一次最新的owner iner和group iner，那咱们在这个孩子中，咱们的这一个room had组件中，咱是不是在这里要接收咱们的这个什么owner infer，哎，我们的owner infer infer这一块咱们去写啊，这种写法我们接受的是一个object，哎，技束，还有我们的group infer，我们接受的也是一个object。好了，保存之后完活啊，我也说了哈，每次报错不要惊慌，你自己重新编译一下呀就好了，那接下来的话呢，咱们这块也已经写完了。

好，所以我们就可以来看一下我们这个直播间的这个组建的具体的这个流程开发了呗，那从上面那无非就是写布局呗，我们可以来到room海WXM中，先把原来这些信息咱们给它删掉了，然咱们在这里来替换成我们自己的view啊，我在这里写好我这个class斯，这是咱们的这个应付了这个container。

啊，我们在这里将来可以放很多东西呢啊。好room，呃，我们的in container在room container中啊，我们在这再可以新建我们哪一块呀，我们这样啊，我们分为这几个部分吧，我们看一下这一块，我们分为这个头像是一个部分，然后对应的杨组还有零个粉丝他们在一起，呃，就是关注是单独的一个啊，然后再就是我们这个下面这块是一组的啊，所以上面这块放在一个大的view里面，大的view里面的话，分别套着他们三块，然后再就是下面这一块的话呢，我们也一样的放在一个单独的view里面，然后再就是这一块也单独的放在一个单独的这个view里面就行了，然后对应的上面这块的话，他们进行一个浮动布局就可以了，这一块也是一个左浮动右浮动就可以了，然后这一块呢，直接来一个右浮动啊就可以了，是吧？啊，所以我们身为这种方式的话呢，对吧，差不多就能够实现我们的一个布局，大家在这里布局方案的话呢，又非常的多，那因为咱们做这个头像这一块，就是把现有的数据给显示出来啊，这纯粹啊是一个体力。

一活连外，好吧，那接下来咱们就按照这个体力活的来一点点的咱们来写一写，看一看，瞧一瞧啊，在我的这个里面来，我先写一个view啊，这个view的话，我们来一个class，我们给他一个owner的infer这个信息呗，Owner iner里面的话就放上课文所说的来这个头像这一块，我看一眼，头像是单独的一块src等于什么，然后再就是放一个新的这个view，这个view里面套的两个，哎，两个小的，两个小的话，一个是这个什么羊组，咱们在这将来是不是得用真数据啊，然后在这里的话，这个是零个粉丝啊，零个粉丝。

嗯，然后这是一组，然后在接下来的话，这是咱们的另一组view下面的话呢，这一块的话就是咱们的这个直播间啊直播间。直播间的这个信息，然后再来一个我们的这个什么呀，我看一眼这个几人正在看这一个哈，我们在这里写一个什么，两人在看。再看这个信息，然后最后的话再来一个image就可以了，列外你看是不是就这样的一个布局啊，咱们这块结构就非常快的给它创建完了，因为右边本来就是最右边这一块，本来就是一张图片，当你给他说我放在view里边也没有问题啊，所以这个结构的话呢，比较简单，那咱们在这里可以看一下，那咱们咱们这块这个图片给我顶下去了，图片有自己的这个宽度，直接给我顶下去了啊，所以咱们在这里哈，没关系，我们把这个图片咱们给他找到，这个图片在哪里呢？列外啊，这个图片信息应该是在咱们的这个owner infer吧，Owner owner infer这个属性里面看一眼，在我们的room门还GS中，咱们有个owner infer owner INF，曾经我打印在控制台中了，我我是不是之前让我给注掉了吗？Owner infer里面有个字段，咱们重新的编译一下，来重新编译一下。

我看一眼在之前咱们哎呀让我给注掉了，咱们这样给它放出来，因为传过来这些信息不就是它嘛，这个点OWNER1份行吧，这样的话咱们重新的编译一下啊，看一下点进来之后我看一下owner iner里面有什么啊，在这里是吧点啊头像在这，另外就它就这个属性了，所以在我的room header room这里应该是owner in，点这个就是我们的头像这个信息，然后我们在这里给他一个mood设置成fix，哎，这样头像样玩虎玩好吧，然后接下来的话，咱们就可以来继续了啊，我们可以给他们加加样式啊，我们在这里分别的给这个view的话都做好样式，还有这个我们的图像这一块啊，我们首先对于外面这块，因为我觉得现在它好像真的是哈，这个全屏啊，我们全屏之后吧，太靠上了，我不想让他这么靠上，所以我给他设置一些PA定信息啊，做一些判定就可以了，那在这里对于这个infer container，咱们再。

在这个地方啊，加上一点样式，我们给它设置一下这个判定，我们比如说给它设置一个120PX啊上下的，然后左右的话设置成20RPX的是吧，一保存之往下一点啊往下一点空一点点，好接下来咱们再对于这个下面这个image，哎，在这里ownerer下面这个image吧，Ownerfer下面这一个image，咱们做一下它这个宽高的一个设置啊，宽度的话，咱们给他一个80RPX啊，然后包radius的话，我给他一个50%正好变成一个圆，然后让它浮动起来，哎，运行之后你看看感觉上瞬间啊，高大上了一点点啊，然后咱们再对应的在这里面再对它进行一个设置，Class iner，因为我希望他们俩的话呢，都浮动对吧？哎，这样的话挨着呗，这样的话都浮动起来，我再对于里面这块再做一些字体的一些控制啊就可以了。所以我可。

可以在这里的话进行一个什么点owner infer o owner infer，然后点infer，好，我们在这里的话对它进行我也设置它是浮动的啊，我们在这里设置它的判定life的，给它空出来20RPX，然后最近呢，我们给它字体的话呢，设置成我们的13啊这个PX1保存之后是不是，诶感觉看起来这块就已经好多了，好吧，然后咱们在这里的话，设置完之后的话，别忘了把它清一下浮动好了，我们在这清一下这个浮动来owner infer，哎，我们用用伪元素这种万能清除法content的空字符串呗，然后对应的第play我们设置成block，然后对应的我们的clear boos必须要加的嘛，运行对吧？哎，直接好用了，好，接下来我们可以再继续来看一下我们，诶落了一个什么呀，我我好像在这里落了一个关注这个小按钮没有写啊，所以我们接下来再把这个关注这个小按钮给它写一下它。

它应该他们都在一行上的吧，Button这块我们写一个什么呀，关注这个小按钮，然后客人在这里给他一个class，等于一个attention啊，注意attention好，咱们对于这个attention这一块的话，给它做一下这个样式就行了，嗯，对于这个小按钮做一下样式，来，来到这里之后，咱们看下这个小按钮，这里来点我们的这个attention这个这个按钮这一块，咱们应该给它设置一下宽度吧，宽高的话，宽度给他一个120PX，高度的话咱们给他一个60RPX，哎，然后对应的back ground的话呢，咱们给它一个就是我们的白色的底儿呗，啊对应的我们的border radius，设不设置都行啊，放了size给它小一点的12PX啊，然后字体颜色的话，我这样给他一个红色的吧，FF，呃，535353吧，行。

不行，这样一个颜色红色的啊，然后对应的我们text line设置成我们的center啊，Text line设置成center啊，对应的display的话呢，In block。把这个拍设置成零啊，然后再好咱们保存啊测试一下来，诶怎么这个宽度好像没有生效，还是这么宽是吧？嗯，这块的问题应该是是不是我的这个选择器的这个。

权重不够啊，咱们可以看一眼是吧，在这里它对于我们这张图片的话呢。是不是这个button的话权重不够，你看在这儿的话，这个宽度184，把我这个100给盖住了哈，这让我太上火了吧啊，所以要不然你就调整一下你的选择啊，然后要不然你就直接加一个important啊，这样的话，我们让我们的这个权重的话上升一下就可以了，OK，那接下来的话呢，咱们再把这个加一个border radius啊，加一个border radius啊，Border-radius的话，咱们给它一个32PXOK，这样的话呢，我们再最后的话加一个mark，跟刚left的往左边的话，留点这个距离吧，留点距离，然后再就是这个东西的话，好像有一点这个靠上，所以我们让它，因为我这个高度的话是60，我记得咱们这个头像的话呢，是不是80，因为这个头像是宽高一样的，80乘80的，所以往这个头部这块的话，也距离顶部的话，来一个这个十这个PX，嗯，好像有点大了是吧，是12P啊小。

2PX，那这样的话呢，就差不多了，好，咱们来看一眼marin life这块是不是也因为这个层级不够导致的呀，哎呀，这个看来是我应该把这个选择器的话呢，多选一级啊，这样的话呢，咱们做成主选择器层级就够了，这样的话我们就足够了，在这块不加这个import应该没事了，因为我们通过的是这种主选择器啊，先进行的啊，这个后代选择器先做我们owner in负，然后再找到这个子，这样的话应该会盖住它的那一个，嗯，这样的话就没有问题了，那位可以看一下我们上面这一小部分的话呢，就差不多了，嗯，我在这里哈杨组啊，零个粉丝，然后关注，当然我们将来要做的功能就是关注，真的要有关注功能的啊，取消关注啊，林哥粉丝现在是我写成固定的写死的啊，但是杨佐这个数据我们再给他改回来吧，当时在这里哈，粉丝这一块我们可能暂时不知道，但这个数据我们还是能够知道的，这个数据就是用我们的owner in for点列外看一下。

在这块是不是内刻就行了，这个属性呀，点内ke属性就是我们真正的这个养组这个属据了，嗯，这一块就算完事，好，接下来的话，咱们再来看一下直播间ID这个值啊，再西下来在这个地方啊，应该是有一个直播间这个ID，咱们给他哪个值呀，应该是我们的group infer，那外看一下group infer里面的话呢？啊，我们在这里应该是在重新打印一下，因为来看下这个直播间的ID啊，它是什么哈，Group infer点哪个属性呀，来咱们看一下重新编辑完了吗？我重新自己编译一下吧。好了啊，有时候这个图表好像有点问题，蜡笔小新这个轩辕翠花怎么有点问题啊，点击杨组之后，咱们看一下来是哪个group ID列位，OK，所以这个直播间的ID是点什么group ID这一个属性，这样的话呢，我一保存这是直播间的这一个ID，接下来我们再对它进行一点点的样式的一个控制，Room ID，这个infer啊，我们在这里选择一下，然后咱们对应的在这里对它进行加上一些我们的样式就可以了，那咱们在这对于这个room ID infer这个信息，咱们就像这样呗，也一样的啊，Float left marin top跟上面有一定的这个距离，10PX吧，然后这就是我们把这个字体的话呢，给它设置的小一点，放在size的话，给它设置一个10PX marin top OK，这样的话呢，是吧，字体这个就变小了，直播间啊，ID这一个，那这就两人在看，咱们让它float right就行了，所以这个就好做了哈。

两人在看这个事，我们在这写一个class，等于一个online用户呗，就是我们在这里对应的写好我们的这个class名字line，然后让它float，我们的这个right，然后对应的我们的marin杠，这个top跟上面一样，都是这个10PX，放size的话呢，我也让他是10PX，你看这样来说的话，他们俩是不就可以了呀，当然你要觉得呀，咱们这个直播间ID啊，在一行上显示太难看了的话，你可以让这个设置一下宽度，然后这样的话呢，肯定会超过这个宽度，那咱们就换行了，所以这样来说的话，就是我们的你看头像信息啊，杨左啊，这些数据都是真的了啊，然后这个直播间ID也是真的，两人在看这一块，咱们可能要给他改一改哈，这样就没有问题了哈，就是这样一个布局啊，我们在这块再把这个几人在看这个事，咱们给它改一下这个用哪个属性啊，是不是也是咱们的group iner里面。

的哪个字段有个这个字段吧，Member count这个字段啊，就是我们几人在看，一运行之后还是两人在看，对吧，因为这个数据他就是两人在看，那这样的话，我们这个布局头部这一块是不是差不多吧，哎，这些数据部分的话呢，也都没有问题哈，粉丝啊粉丝现在是没有的，是假的哈，关注然后这一块直播ID还有几人在看啊，那最后的话呢，咱们就差一个在右边这块，咱们给它放一张图片就行了，Image这块咱们src指向我的image文件夹下，我记得这块有一个叫做RA的，这一个就是红包的啊，这样一个小图片啊，咱们把这个小图片的话呢，咱们给它加过来，Mo设置成wide fix啊，对应的class咱们给它设置成我们的还是这一个的哈，Red pack这一个红包，这张图片。

然后在这里的话，咱们给它加上一些样式呗，来复制class名字啊，在这里的话呢，点咱们对应的它的话，直接就做一个什么呀，我们是不是呃浮动啊，Clear float right，然后对应的我们的宽度给它一个80RPX就行了，列位它怎么浮动在这来了，这不对，对称啊啊浮动在这里哈，是对的哈，咱们在这可以清一下前面的浮动，好，这样的话一保存之后，它是不是就放在这个位置上了啦，来列位看一下我们这个功能的话，跟我们当时想要的功能差不多了哈，我们上面这块头像，还有我们的这个内容，杨组，还有关注按钮，还有直播间的这个ID信息，还有右边的话呢，几人在看，还有我们这一块的话，有一个小的这个红包的福利，这一个小按钮诶放在这里，但虽然事件我们都没有绑，但至少呀，我们这个小结构的话呢，已经差不多了，然后你将来的话，你再换一下这个信息，咱们也不怕，因为我们。

养组，还有这些数据的话，咱们也不是写死的啊，咱们深至是在这里啊，通过我们传过来的group infer信息，还有我们的user in owner infer信息啊，咱们给他动态创建出来的啊，那至于将来的什么，呃，关注的交互用用户粉丝这一块啊，还有我们几人在看这一块，咱们在后面的话呢，咱就说它，所以这一节咱们内容就是把我们这个入嗨的直播间啊，头部这个组件给他做完就可以了，好了，咱们关于这小节就到这。