我们想要编写好页面,就要先了解怎么创建项目,怎么分配布局,废话不多说,接下来让我们了解一下。
一.如何创建项目
我们进到编辑器里面,找到 entry<src<ets<pages(右键New<page<emply page)
进到底下这个页面,设置项目名称 点击finish就成功创建了一个新的项目
二.页面的内容注解
创建好项目之后,我们了解一下每个注解是什么意思
@Entry:入口页面
@Component:组件
@State message:动态变量
bulid:构建函数
这一部分就是bulid里面组件,今后我们编写程序代码就在这里面操作
三.了解线性布局
线性布局分为Row(横向布局)/ Column(纵向布局)
Column(纵向布局样式)
Row(横向布局样式)
四.了解基本组件与组件之间的属性
(1.)Text():文本组件
fontSize():字体大小
fontColor()//字体颜色
decoration():文本修饰
decoration里面的属性有:type:类型 color:颜色 style:文本装饰器样式
(2)TextInput():文本输入框
placeholder:输入的提示
text:默认值
type(InputType.password):输入框类型:密码框
borderRadius():圆角
backgroundColor():背景颜色
(3)Button()按钮组件
按钮组件有三种方式:圆形按钮,胶囊按钮,普通按钮
type:ButtonType.Circle:按钮的形状:圆形按钮
type:ButtonType.Capsule:胶囊按钮
type:ButtonType.Normal:普通按钮
stateEffect:按压状态 默认true(有按压效果)false(没有按压效果)
(5)Image():图片组件
有两种存放图片文件的方法,一种网络图片加载方法:
有两种存放图片文件的方法:
第一种是存放在resources<base<media里面
第二种:存放在resources<rawfile 里面
我们把图片存放到文件夹中,我们怎么取到文件夹中的图片呢?
我们分别学习一下这两种方法
第一种存放在media文件夹中的照片通过$r()获取,这种获取图片方式不用写图片后缀
第二种存放在rawfile文件夹中的照片通过$rawfile()获取, 需要写完整的图片名称
网络图片方法:需要申请网络权限
网络权限需要找到module.json5,编写这段代码到里面
renderMode(ImageRenderMode.Template):渲染颜色、
左边是原图,右边是渲染颜色之后的图片效果
interpolation:图片插值 抗锯齿
以上就是今天的知识总结,之后有更多的组件与方法属性也会继续发布,感谢大家观看。