【iVX 初级工程师培训教程 10篇文拿证】02 数值绑定及自适应网站制作

目录

【iVX 初级工程师培训教程 10篇文拿证】01 了解 iVX 完成新年贺卡
【iVX 初级工程师培训教程 10篇文拿证】02 数值绑定及自适应网站制作
【iVX 初级工程师培训教程 10篇文拿证】03 事件及猜数字小游戏
【iVX 初级工程师培训教程 10篇文拿证】04 画布及我和 iVX 合照
【iVX 初级工程师培训教程 10篇文拿证】05 画布及飞机大战游戏制作
【iVX 初级工程师培训教程 10篇文拿证】06 数据库及服务
【iVX 初级工程师培训教程 10篇文拿证】07 08 新闻页制作
【iVX 初级工程师培训教程 10篇文拿证】09 聊天室制作

高分提升请查看专栏:
iVX入门到精通
大话 IVX 实战到精通

一、数据绑定

数据绑定在 iVX 中指某一个组件的属性值绑定于其他组件,例如以下示例中,点击这个文本,将会在其属性面板中看见一个锁链按钮:
在这里插入图片描述
此锁链就表示当前对应的属性值可以与其他值进行绑定。

首先,咱们可以点击文本变量组件,创建一个存储文本的变量:
在这里插入图片描述
接着,点击文本变量,可以在其属性中设置当前文本变量的值,当然这个文本变量也可以绑定于其他值:
在这里插入图片描述
接着,咱们点击文本,点击其数据绑定按钮:

在这里插入图片描述
我们发现,此时数值前面有一个箭头,该箭头可以从对象树中选择某一个组件的值:
在这里插入图片描述
选择值之后,咱们点击预览即可发现文本的值自动切换成了文本变量的值:
在这里插入图片描述

二、相对定位

在刚刚的演示之中,咱们使用的项目为 相对定位 应用,咱们可以发现,在绝对定位中左侧组件栏的颜色为蓝色,在相对定位应用中咱们组件栏的颜色为白色,这是亮点较为直观的不同项目的IDE界面区别。

相对定位是根据元素的相对位置进行定位的,咱们在相对定位中添加组件并不需要在界面中进行绘制,只需要选择对象树中的某一个组件(页面、行列),再选择需要添加的组件,那么即可直接点击需要添加的组件进行添加。

接下来咱们需要做一个PC端的可适应网站,那么此时需要在对象树之上的屏幕大小区域更改其页面大小:
在这里插入图片描述

2.1 行列

接着,在做自适应网站前,咱们需要了解行和列的概念,在一个网站之中,元素要么是竖着排列,要么是横着排列,以下图片所显示的红色框中元素为行,蓝色则为竖排为列:
在这里插入图片描述
在 iVX 中可以通过行和列进行对应内容元素的位置排版。咱们在项目之中添加一个行,那么点击行在其内部添加某些组件,如文本组件,将会发现文本会自动横排显示,并且在文本大于一行时,其文本将会自动换行:
在这里插入图片描述
若添加内容到列之中,那么这个列中的元素将会竖排显示:
在这里插入图片描述
并且在此处需要注意,行和列都是容器,他们可以相互嵌套,则:行中可以包含多个行,列中可以包含多个列,并且行和列可以互相包含于其中。

三、简单站点制作

现在使用 iVX 仿 CSDN 首页,并且使其首页可以自适应屏幕大小。

首先咱们在页面中添加一个行,并且设置行的高度为包裹:
在这里插入图片描述
包裹表示为当前行中的元素高度有多高,那么该行的高度就有多高,若没有元素,那么该行则无法从视觉上进行呈现。

接着在行中设置背景色为透明,设置行的水平对齐为居中:
在这里插入图片描述
接着在行1中添加一个行,设置宽度为 80%,80% 表示当前行占据父容器宽度的 80%:
在这里插入图片描述
同样给这个行设置高度为包裹,并且设置其背景色为透明(我在此处对行重命名为“内主”方便进行辨认):
在这里插入图片描述
接着在内主行中创建一个行,命名为标题,并且设置高度为包裹、背景色为透明,这个行将会用作标题的制作:
在这里插入图片描述
接着,在这个标题之中添加一个文本,并且将其文本内容设置为“首页”:
在这里插入图片描述
我们可以发现该文本自动的距离左侧有一段距离,这是因为父容器行宽度只有 80%,最外部的行设置了水平居中,自然其内部的行将会跟随父容器进行位置上的变动。我们发现这个文本在这个行中太过于靠近顶部,此时咱们只需要将标题行设置内外边距即可;外边距可以分外上外边距、下外边距、左外边距、右外边距,这些外边距分别表示当前组件与对应方向的元素的距离,设置为 10 则表示距离该方向元素 10 个单位;外边距容易造成布局的显示错乱,咱们这里使用内边距实现这个文本与顶部的距离,只需要点击标题行,设置标题行的上内边距,那么这个行将会有一个透明的厚度存在,那么此时这个文本自然的与顶部有了距离:
在这里插入图片描述
由于字体过大不是很美观,设置字体的大小后显示结果如下:
在这里插入图片描述
接着在这个行中复制这一个文本,并且粘贴在标题行中:
在这里插入图片描述
此时这两个文本将会紧紧相挨,为了使其留有一定间隙,咱们将博客这个文本设置其左外边距为6:
在这里插入图片描述
此时页面将会更加美观:
在这里插入图片描述
接着复制多个文本到标题行中更改文本内容,将会看到以下效果:
在这里插入图片描述
接着咱们创建一个行命名为广告,并且在其内部添加一个图片组件,上传图片:
在这里插入图片描述
我们发现这个图片超出了屏幕区域,这是因为这个图片没设置其属性,咱们需要设置这个图片的属性宽度为100%,那么将会暂居包裹他的父容器的最大宽度:
在这里插入图片描述
设置完毕之后页面将会变得好看许多:
在这里插入图片描述
咱们接着创建 1个行命名为内容,并且在这个内容行里面创建3个列,并且这些行和列的背景色都设置为透明,内容行设置高度为包裹,其内部的3个内容列设置宽度为33%,使3个列能够占据一行:
在这里插入图片描述
此时我在页面中创建了多个文本:
在这里插入图片描述
在页面中显示如下:
在这里插入图片描述
具体美不美观这里不做要求,咱们可以看到这些文本自动换行了,那有什么办法让他们不进行自动换行吗?答案是肯定可以的,还需要在文本属性中把换行关闭即可:
在这里插入图片描述
可是关闭之后查看内容时发现该文本内容超出了最大宽度:
在这里插入图片描述
此时只需要给予这个文本一个宽度为100%即可:
在这里插入图片描述
设置后将会自动省略超出内容:
在这里插入图片描述

四、for 循环组件

通过刚刚的内容编排,咱们发现直接复制文本太过繁琐有什么功能可以快速的完成内容的显示吗?

咱们可以使用 for 循环容器,但在使用 for 循环容器之前咱们得学习一个变量组件——数组组件。

4.1 数组组件

点击页面,在页面中创建3个数组容器,并且进行重命名:
在这里插入图片描述
数组容器可以添加多个值,可以在其中创建多种类型的内容:
在这里插入图片描述
我们为每个内容数组都添加多个值:
在这里插入图片描述

4.2 for 循环生成内容

接下来只需要使用 for 循环组件就可以生成多个内容了。

每个内容列此时只需要留下一个文本即可,其他文本删除:
在这里插入图片描述
接着,在这些内容列中添加一个for循环组件,并且将文本放到 for 循环组件之内:
在这里插入图片描述
接着点击任一 for 循环组件,可以看到 for 循环组件属性中有一个数据来源,点击箭头,选择对应的 数组的值 作为其数据来源:
在这里插入图片描述
依次对3个for循环创建进行操作,随后在文本之中点击数据绑定按钮:
在这里插入图片描述
此时发现这些文本的绑定值中有一个当前数据值,该值则是指循环创建时自动遍历数组元素的值,循环将会从数组的第一个值开始取值,重复不停,若文本的值设置为当前的值,那么循环创建将会自动创建一个文本以及绑定对应的值给到文本,此时所有的内容都将会以文本进行显示。

设置完文本数据为当前数据后,预览后发现文本值自动出现:
在这里插入图片描述

五、自适应网站制作

接下来进行最后的一个步骤,为这个页面添加自适应功能。

我们先判断该页面哪一个区域需要自适应,咱们可以得知,就是3个内容列,当页面变化为小屏幕时只需要更改其父容器的宽度为100%即可完成自适应。

实现很简单,咱们同时选择 3 个自适应的列,在属性中找到环境宽打开:
在这里插入图片描述
设置不同屏幕下的不同宽度,例如设置小屏PC宽为100%,那么意思则是在小屏是改列会直接占据100%大小宽度,我在这里同时设置了3个需要自适应的屏幕宽度:
在这里插入图片描述

最后若想手机屏幕也可以实现这个宽度自适应,还需要在对象树根节点下设置移动端适配为原始尺寸:
在这里插入图片描述
最后预览,拖动浏览器大小可以看到屏幕的不同变化

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286465.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

将WebApiTestClient添加到ASP.NET Web API帮助页面

ASP.NET Web API帮助页面是一种有用的扩展,可为您的Web API自动生成基于Web的文档。它使调试变得更容易,因为您可以将帮助页面中的信息复制/粘贴到Fiddler等工具中,以调用Web API服务并检查响应。现在,如果您可以直接在帮助页面上…

ArcGIS实验教程——实验二十五:大型商场选址经典案例

ArcGIS实验视频教程合集:《ArcGIS实验教程从入门到精通》(附配套实验数据) 一、实验分析 合理的商场位置有利于商家营业,方便人们购物。商场选址问题需要考虑很多因素,如地理位置、居民点分布、停车场分布、交通情况等。综合把握这些影响因素对商场的选址显得尤为重要。 …

全球域名商解析新增保有量15强:爱名网落榜

IDC评述网(idcps.com)11月30日报道:根据DailyChanges公布的最新数据显示,在2015年11月26日,全球域名解析新增保有量15强排行榜上,共有5家中国域名商。其中,易名中国连续夺冠,新增保有…

大话领域驱动设计——应用层

‍概述应用层是基于领域的应⽤程序用例的实现,应⽤程序⽤例可以看作是⽤户界⾯上的⽤户交互。这一篇,我将详细讲解应用层组件及用法。总览应用层包含以下组件:数据传输对象(DTO):数据传输对象是一个简单的对象&#xf…

【iVX 初级工程师培训教程 10篇文拿证】01 了解 iVX 完成新年贺卡

目录 【iVX 初级工程师培训教程 10篇文拿证】01 了解 iVX 完成新年贺卡 【iVX 初级工程师培训教程 10篇文拿证】02 数值绑定及自适应网站制作 【iVX 初级工程师培训教程 10篇文拿证】03 事件及猜数字小游戏 【iVX 初级工程师培训教程 10篇文拿证】04 画布及我和 iVX 合照 【iV…

ArcGIS实验教程——实验二十六:ArcScene实现二维数据的三维显示

ArcGIS实验视频教程合集:《ArcGIS实验教程从入门到精通》(附配套实验数据)》 DEM三维显示: 地形数据+影像数据: 以上效果均是在ArcScene中实现的。 ArcScene允许用户制作具有透明效果的场景,在场景中能对数据进行浏览和交互。ArcAcene支持复杂的3D符号系统及纹理制图,支…

用Swashbuckle(swagger-ui)显示API帮助并进行调试

安装Swashbuckle: 打开NuGet控制台输入: Install-Package Swashbuckle 进行安装。查看帮助 在浏览器输入 http://调试项目地址/swagger/ui/index 可以看到帮助的效果API调试 点开调试的条目,填写相关参数,“Try it out!”

Linux两块磁盘挂载指向一个文件夹LVM磁盘管理(一)

注意:任何磁盘的操作有可能损坏里面数据,请提前备份数据,切记!切记!切记! 0x00:前言. 在Linux使用过程中,发现一个文件很大,比如5G,但是有两块物理磁盘一个剩…

盘点现有开源软件许可合规工具

|原文出处:The Openchain Reference Tooling Work Group|翻译:刘天栋.Ted,开源社.ONES(开源战略研究组)|编辑:胡湘月|设计:周颖引言开源软件已经吞…

【前端就业课 第一阶段】HTML5 零基础到实战(十一)canvas 基础

注意:手机(APP)打开,内容显示更佳,不会的私聊博主即可 想要拿代码或加入学习计划(** 博主会监督你并且教你写文章 **)的拉到最下面(PC端Web打开)加博主即可,目…

【遥感数字图像处理教程】理论基础知识目录(5章全)

文章目录1. 专栏简介2. 专栏地址3. 专栏目录1. 专栏简介 遥感数字图像的处理,是对遥感数字图像的计算机处理。与工业和医学数字图像不同,遥感数字图像类型更为多样,内容更为复杂。因此,遥感数字图像的处理,不仅需要掌握…

MonoRail学习笔记十一:页面控件的填充和验证

Mono提供很多组件可以方便的处理页面:可以自动将后台的值填充到页面,可以自动进行Javascript验证,可以自动在后台验证等。这些功能都是比较实用的,可以减少很多开发 FormHelper是用来对应html页面中Form内的tag的,可以…

JavaBean的详细及引用

1.JavaBean实际是具有统一接口格式的java类 2.JavaBean的组成&#xff1a;属性(Properties)、方法(Method)、事件(Events) 3.一个JavaBean的例子(该例子是用的Simple属性<属性在以后说>) //我遵循的习惯是类名大写&#xff0c;包名小写package com;//意思是将 FirstBean这…

驱动开发实战之TcpClient

场景模拟假设你有一批非标设备需要对接&#xff0c;你需要根据设备方提供的协议&#xff0c;为IoTGateway开发驱动&#xff0c;进行数据交互。文章比较长也可以到官网会有更好的体验&#xff0c;地址:http://iotgateway.net/docs/iotgateway/driver/tcpclient请先浏览上一篇驱动…

【遥感数字图像处理实验】Erdas版详细图文实验教程(8实验全)

文章目录1. 专栏简介2. 专栏地址3. 专栏目录1. 专栏简介 遥感数字图像的处理&#xff0c;是对遥感数字图像的计算机处理。与工业和医学数字图像不同&#xff0c;遥感数字图像类型更为多样&#xff0c;内容更为复杂。因此&#xff0c;遥感数字图像的处理&#xff0c;不仅需要掌握…

WEBAPI 增加身份验证 (OAUTH 2.0方式)

1&#xff0c;在Webapi项目下添加如下引用&#xff1a;Microsoft.AspNet.WebApi.OwinOwinMicrosoft.Owin.Host.SystemWebMicrosoft.Owin.Security.OAuthMicrosoft.Owin.Security.CookiesMicrosoft.AspNet.Identity.OwinMicrosoft.Owin.Cors2&#xff0c; 在项目下新建Startup类…

无代码iVX编程实现简单 小蜜蜂 经典游戏

首先咱们打开 iVX 的在线编辑器&#xff1a;https://editor.ivx.cn/ 随后选择相对定位&#xff0c;咱们选择2D游戏类型制作一个简单小蜜蜂游戏&#xff1a; 接着咱们创建一个物理世界&#xff0c;并且将页面布局如以下&#xff1a; 以上布局中&#xff0c;矩形为模拟飞机、…

【无人机航空摄影测量精品教程】目录:Pix4d、EPS、CC、PhotoScan、Godwork项目化作业流程及注意事项汇总

文章目录1. 专栏简介2. 专栏地址3. 专栏目录1. 专栏简介 该专栏为目前最为热门的无人机航测内外业项目&#xff0c;主要内容包括&#xff1a;无人机航测外业作业流程&#xff08;像控点布设、航线规划、仿地飞行、航拍&#xff09;和内业数据处理软件&#xff08;Pix4d、CC、EP…

WPF 基础控件之 Slider 样式

其他基础控件1.Window2.Button3.CheckBox4.ComboBox5.DataGrid 6.DatePicker7.Expander8.GroupBox9.ListBox10.ListView11.Menu12.PasswordBox13.TextBox14.RadioButton15.ToggleButtonSlider 实现下面的效果1&#xff09;Slider来实现动画&#xff1b;Grid嵌套 Border并设置S…

SQL 通过syscolumns.xtype动态查找指定数据类型字段所包含的数据

表中太多列&#xff0c;只想查找某些比如&#xff0c;数据类型为varchar的字段的数据。 思路&#xff1a;1、先获取列名&#xff1a; select * from syscolumns where id(select max(id) from sysobjects where xtypeu and nametest_A)2、查找指定数据类型&#xff0c;xtype就…