13-7实现旅拍卡片布局-2

文字需要设置成单行显示,这样才不会换行
13-7实现旅拍卡片布局-2_第1张图片
设置文字显示的形式,和样式
13-7实现旅拍卡片布局-2_第2张图片
运行测试看效果
13-7实现旅拍卡片布局-2_第3张图片

实现图片下的描述信息

13-7实现旅拍卡片布局-2_第4张图片

13-7实现旅拍卡片布局-2_第5张图片
13-7实现旅拍卡片布局-2_第6张图片
底部放一个方法
13-7实现旅拍卡片布局-2_第7张图片

_infoText用来封装最下面的左右布局
13-7实现旅拍卡片布局-2_第8张图片
希望最左边和最右边,中间是空白的
13-7实现旅拍卡片布局-2_第9张图片
左边头像圆角,用PhysicalModel。裁切的行为clipBehavior
13-7实现旅拍卡片布局-2_第10张图片

13-7实现旅拍卡片布局-2_第11张图片
13-7实现旅拍卡片布局-2_第12张图片
图片的直径要是裁切的两倍,这样才能裁切成一个圆形的图片。
13-7实现旅拍卡片布局-2_第13张图片
13-7实现旅拍卡片布局-2_第14张图片
13-7实现旅拍卡片布局-2_第15张图片

右边点赞

左边是一个图片,右边是点赞的数量。所以用Row布局。
13-7实现旅拍卡片布局-2_第16张图片
13-7实现旅拍卡片布局-2_第17张图片

13-7实现旅拍卡片布局-2_第18张图片

测试

13-7实现旅拍卡片布局-2_第19张图片
希望文字居左显示
13-7实现旅拍卡片布局-2_第20张图片

文字外层是一个Column,通过约束Column
13-7实现旅拍卡片布局-2_第21张图片
这个时候文字就居左显示了
13-7实现旅拍卡片布局-2_第22张图片
点击查看详情
13-7实现旅拍卡片布局-2_第23张图片
切换不同的tab
13-7实现旅拍卡片布局-2_第24张图片

彩蛋-页面重绘问题解决

已经打开的tab页面,再次切换回来,页面会重绘,也就是重新渲染

13-7实现旅拍卡片布局-2_第25张图片
13-7实现旅拍卡片布局-2_第26张图片
重写一个方法
13-7实现旅拍卡片布局-2_第27张图片
13-7实现旅拍卡片布局-2_第28张图片

结束

 

你可能感兴趣的:(13-7实现旅拍卡片布局-2)