使用ivx学习开发时，响应式布局/自适应布局/宽度自适应（相对定位）方面的心得体会

时间：2020-03-12 18:34:57 阅读：69 评论：0 收藏：0 [点我收藏+]

最近在学习使用ivx进行开发的过程中，对响应式布局/自适应布局/宽度自适应（相对定位）方面的开发颇有收获，自己总结了些经验希望能和大家分享下。为了方便，我针对官网的demo栅格系统，进行了以下分析：
1.自适应布局的核心组件要用到相对行的环境宽，单个模板的进行设计的时候通过设置环境宽变化时模块的宽度，可以实现不同环境宽时都能美观合适地展示模块，我多少试验后发现环境宽较大时，将模块宽度就设置小一点，这样每行显示的模块数量就会变多，看起来不会太分散，同理，环境宽较小时就设置大一点，这样每行显示的模块数量就会变少，看起来不会太拥挤，具体设置在后文中会说明。
2.首先的话，多个模板肯定要用到很多组相同的数据，所以建议先新建一个数组，将需要展示的模块数据导入数组，然后在首页下创建相对行，作为导航栏，这里demo中导航栏的宽度为100%，因为导航栏要自适应网页的宽度，所以宽度设置为百分比，再在相对行容器下添加对象，demo中选择的是等间距的水平对齐方式，这样能让对象随着网页宽度变化撑满导航栏，如果想要让所有对象都保持在一块，就选择其他的水平对齐方式
技术图片

3.导航栏完成后，我们再看主体的编辑方式，demo中采用了在一个居中对齐的相对行中再添加80%宽度内容区的方法，这样可以让模板与网页边缘保持20%网页宽度距离，看起来更美观舒适，不会出现边框遮挡模板的情况。这里内容区使用等间距的水平对齐方式，使模板尽量铺满网页且排列整齐，接着创建一个模板循环，将循环与模板数据绑定起来，就可以进行单个模板的设计了。
技术图片

4.接下来是最关键的地方，demo中我们将环境宽较大时的模块宽度设置为30%，这样每行就会显示3个模块（总宽度为100%，3个模块平均下来就是33%，但每个模块之间要有间距，所以这里设置为30%比较合适），环境款较小时的模块宽度设置为45%（总宽度为100%，2个模块平均下来就是50%，但每个模块之间要有间距，所以这里设置为45%比较合适），这样每行就会显示2个模块，同理，环境宽为手机宽的时候，将模块宽度设置为100%,这样1行就只有1个模块充斥这个行。
技术图片

最后，分享下我的心得，UI组件的选择和行列排列方式需要多练习，有扎实的基础功才能继续往前走，环境宽的设置是我认为自行应布局中最重要的一环，还需要多熟悉，ivx总能带给我很多惊喜，在以后不断的学习开发过程中我会继续给大家分享自己的心得和经验的。

使用ivx学习开发时，响应式布局/自适应布局/宽度自适应（相对定位）方面的心得体会

标签：显示说明 src ui组件 img 心得通过网页分享

原文地址：https://blog.51cto.com/14556317/2477553

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行