零基础美化篇之QQ系列-006-导航按钮绑定页面

易团雪 · 发表于 2024-3-12 09:49:33

本帖最后由易团雪于 2024-3-12 09:49 编辑

1.布局设置
接上节，这里首先设置一个分割线效果
这里就不具体操作了，大家可以思考一下。应该怎么去设置
提供思路是用基础元素：宽度=填充父，高度=1。设计背景编辑器
分割线后面添加布局元素，布局宽度=填充父，布局高度=占用剩余(记得先设置好最后一个布局后在设置这里的占用剩余，主要是如果先设置了占用剩余。对后面的元素设置时会不友好)
继续添加一个分割条
最后添加一个布局：布局宽度=填充父，布局高度=50
效果如图：
QQ图片20240312090239.png

2.添加2个布局页面
点击导航按钮的页面布局，在这里添加两个布局。此时注意看文档大纲的结构
QQ图片20240312092640.png

是不是发现变成了子级了？该怎么办呢？不要慌(这里我设置了布局元素的离开状态背景，便于查看)
GIF 2024-3-12 9-28-37.gif

选择子级进行拖动即可调整它的层次关系，是不是很简单。当然还有其他方法
QQ图片20240312093101.png

选择刚刚添加的导航布局页面，分别设置好ID，如下图的文本大纲
然后对导航按钮分别绑定元素就是刚才设置的布局页面ID，对应导航按钮绑定ID即可
QQ图片20240312093921.png

最后对消息页面和空间页面进行设置
布局-项：布局宽度=填充父，布局高度=占用剩余
好了，预览点击导航按钮试试效果吧

numbersir · 发表于 2024-3-27 20:57:43

支持支持支持支持教程

		自动登录	找回密码
密码			加入我们

[图文教程] 零基础美化篇之QQ系列-006-导航按钮绑定页面