文章插图
可视化界面
切换到可视化界面后 ， 可以分为三个区域:
①组件大纲区 ， 组建大纲群分为系统组件、UI组件和高级组件 。
- 系统组件是将页面元素进行了最基本的抽象 ， 而形成搭建页面的所需要最简单的基础组件 ， 是构建页面元素的最小单元 ， 同时也是具备了最大自由度的组件 ， 开发者可以基于当前组件进行最大的自由度的修改 ， 以满足自己的需求；
- UI组件是将项目的UI页面中常见的各种功能元素及其样式进行了抽象的封装而形成的组件 ， 因为其组件进行了一定程度的默认样式的封装 ， 所以在修改上自由度会比系统组件稍微差一些；
- 高级组件是针对于具体的应用场景 ， 抽象封装形成的 ， 其目的性功能更强 ， 可快速搭建列表页详情页 ， 可以根据自己不同的场景需求 ， 选择对应的组件 。
③最右侧是属性编辑区 ， 我们可以通过属性编辑对当前组件进行样式修改 ， 注册事件以及修改组件的一些内部属性 。
文章插图
上手体验 首先在左侧拖拽一个view视图容器 ， 鼠标长按view组件拖拽到中间的画布区域中 ， 然后松开鼠标 。可以看到在画布中有一个绿色的小框 ， 这个就是生成view组件 ， 接下来将当前容器组件中再拖拽一个text的文本组件 。
接下来我们再去修改组件 ， 先修改当前文本外面的view容器组件 。
- 选中view组件 ， 然后在右侧的样式中找到高度选项填写高度200px ， 这样它的高度变为了200像素；
- 接下来修改组件的背景颜色 ， 找到下面的背景颜色 ， 填充方式分为颜色填充、背景填充 ， 颜色填充就是使用十六进制的色号填充；背景填充是让组件背景是一张图片 。我们这里选择颜色填充 ， 可以看到当前的微有容器变成一个天蓝色 。
文章插图
- 布局属性 ， 除了修改尺寸大小之外 ， 还可以修改它的主轴方向 ， 主轴对齐、副轴对齐以及是否换行 ， 这个就是我们的flex布局 ， 我们可以通过这些配置项选择它的对接方式 。
文章插图
- 修改元素内外边距 ， 这里设置margin-top属性20px ， 那他距离顶部的距离就变成了20像素 ， 然后下面的定位当前元素是默认有一个相对定位 ， 然后可以使用相对定位和绝对定位 ， 对当前元素进行位置的固定 。
文章插图
- 下面就是设置字体 ， 我们选中文本组件 ， 修改它的字号 ， 这里输入24像素 ， 可以看到文本的字体变大 ， 然后也可以修改它行高 ， 还有它的自重也就是粗细 ， 然后点击修改文本颜色 。
经验总结扩展阅读
- 2022年12月14日吉日查询
- 如何改微信收款二维码
- 世界上什么名人十二月一号的生日
- 苹果无线耳机二代和三代的区别
- 二氧化碳的特点
- 原神潜能焕发第二天怎么通关
- 安庆师范大学是一本还是二本
- 2022年腊月二十日搬家好不好
- 葡萄汁蜜梨
- LeetCode - 二维数组及滚动数组