欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
在使用MUI开发APP的过程中，功能的融合和美观的布局，往往能使得项目得以顺利进展。不错的设计肯定离不开MUI的各个控件。对于每个控件的熟悉，并且能个灵活的运用，使得多个控件能够自由组合，和谐的互相锲合，常常可以使得写出一个页面有事半功倍的效果。
在本文中，我将介绍如何使用MUI现成样式做一个卡片视图。首先，大家是否明白卡片视图是什么？我们不妨看看下面这张图。不难看出在这个页面中，有三张完整的卡片模块，其实，CardView就是若干个卡片模块的集合。在同一个CardView中的所有卡片大致主题样式应该相似，卡片内容上的布局也应该保持统一性。这两点也是约定熟成的一项要求。
什么是Cardview?
想必，大家对CradView已经有了整体的了解。接下来，我们就开始通过代码具体实现一个CradView。万事第一步，先搭一个框架，咱们也不例外。
先来做个card的框架：
<!--这是一个卡片的框架-->
<div>
<div>
<!--这里是卡片标题-->
</div>
<div>
<!--这里是卡片内容-->
</div>
<div>
<!--这里是卡片的底部说明-->
</div>
</div>
Card框架
为了更加清楚的表现出Card模块的各个部分的用途，咱们分别来向这个Crad框架里填充一些内容。首先，我们向content里加入一张展示用的图片。
<div>
<!--这里是卡片内容-->
<img src="img/IMG_0512.JPG" width="400px" height="200px"/>
</div>
这样我们就得到了一张发帖所展示的封面图。效果如下：
封面图展示效果
常见的card的布局，会在header块里展示作者及头像等信息。我们同样，也对我们的header进行完善。
<div>
<!--这里是卡片标题-->
<img src="img/背景图.jpg"/ >
<p >自由的飞翔</p>
</div>
完善发表人信息后
此时，我们的发帖人信息已经做好了完善。紧接着，我们将底部完善好，填充进去发表时间。这样一个卡片就做好了。
<div >
<!--这里是卡片的底部说明-->
<div >
<p>2019年10月25日 17:20</p>
</div>
</div>
完善的卡片
我们再多做几个卡片，一个CardView就做好了。最后的效果图如下：
最终效果
在写页面时，熟练的自由组合各个控件，不用自己写样式，也能写出一个很好看、可以直接使用的页面。当然，对于一些细节上的修改，可以打开mui的css文件进行样式修改。
END实习编辑 | 王文星
责 编 | 李劲潮
where2go 团队
微信号：算法与编程之美
长按识别二维码关注我们!
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！
