五屏网站建设平台发帖推广百度首页

.ets文件结构

//页面入口
@Entry
//组件
@Component
struct test{//页面结构build(){//容器  **一个页面只能有一个根容器，父容器要有大小设置**}

1、Column 组件

1. 沿垂直方向布局的组件，可以包含子组件

2. 接口 Column({space}) space的参数为string | number

3. 除了通用属性外，还支持

   alignItems(HorizontalAlign):子组件水平方向对齐

   justifyContent(FlexAlign) ：子组件垂直方向对齐

####2、Row组件

1. 沿水平方向布局容器

2. 接口：Row({space:25}) pace的参数为string | number

3. 除了通用属性外，还支持

   alignItems(VertialAlign):子组件垂直方向对齐

   justifyContent(FlexAlign) ：子组件水平方向对齐

justifyContent(FlexAlign) 和组件本身描述的方向一直

3、Button组件

1. 创建不同样式的按钮，可以包含单个子组件

2. 接口 Button(options？:{type?:ButtonType,stateEffect?:boolean})

   ButtonType: 按钮样式 Capaule(胶囊) ，Circle(圆形)，Normal(普通按钮)

   stateEffect: 是否显示按下效果

3. 如果使用lable标签，就不能再包含其他组件

    Button('ok').width(50)  √Button('ok'){}          ×
   

4、Text组件

1. 用于展示文本，文本内容需要写在标签内容区，支持转义字符 \

2. 记住常用的

   fontSize,fontColor,fontWight等

5、TextInput组件

1. 单行文本输入框

2. 接口 TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})

   placeholder:提示文本

   text:设置输入框当前文本输入内容

   controller:控制器

6、Image组件

1. 使用图片的三种方式

   image(“url”)

   image(“图片名称”) //图片在ets目录下

   image($r(‘图片名称’))

7、Flex组件

1. 弹性方式布局的容器组件

2. 接口 Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })

   direction:子组件的排列方向

   wrap:单行排列还是多行排列

   justifyContent:子组件在主轴的对齐方向，主轴方向由direction确定

   alignItems:交叉轴上的对齐方式

   alignContent:多行内容的对齐方式，在wrap下生效

8、走马灯 Marquee

1. 滚动展示一段单行文本，只有当文本宽度超过跑马灯组件宽度滚动

2. Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })

   start：控制跑马灯是否进入播放

   step:动画滚动步长

   loop:滚动次数，小于等于0无限循环

   fromStart:设置从开头滚动还是反向滚动

   src:需要滚动的文本

3. 属性 allowScale:是否允许文本缩放

4. 事件

   onStart:开始滚动时触发回调

   onBounce:完成一次滚动时触发

   onFinish:滚动结束触发

9、路由跳转

1. 通过不同的url访问不同的页面，包括跳转到应用内的指定页面、用应用内的某个页面替换当前页面、返回上一页面或指定的页面等。

2. 导入模块

3. pushUrl(options: RouterOptions): Promise

   options:跳转页面详细信息

   Promise：异常返回结果