单向数据流

• HarmonyOS的JS UI框架延用的是一种类小程序和vue的Web开发方式，与vue中MVVM不同的是，HarmonyOS的JS UI框架是以单向数据流的形式连通JS脚本变量与标记语言(hml)实现的界面。
  • View：就是展现出来的用户界面。
  • Model：就是业务逻辑相关的数据对象。
  • ViewModel：就是与界面(view)对应的Model。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。
  • 单向数据流：JS UI框架中采用单向数据流的方式来管理视图和数据对象的绑定。

MVVM
MVVM是Model-View-ViewModel的简写，是M - V - VM 三部分组成。
MVVM就是将其中View的状态和行为抽象化，其中ViewModel将视图（即View）和业务逻辑分开，它可以去除Model的数据的同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。
MVVM采用：双向数据绑定。
View中数据变化将自动反映到Model上，反之，Model中数据变化也将会自动展示在页面上。

ViewModel就是View和Model的桥梁。
ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回到Model。

• 单向数据流将对象状态化，只要对象状态发送变化，就通知页面更新视图元素。
• 步骤：

​        step1: 识别哪个UI组件绑定了相应的对象。 

​        step2: 监视对象状态的变化。 

​        step3: 将所有变化传播到绑定的视图上。

• 注意：

​        数据流向是单向的，即视图变化不会影响对象状态。

测试单向数据流

在hml文件中编写

            {{ $t('strings.hello') }} {{ title }}        

在js文件中编写

export default {    data: {        title: ""    },    onInit() {        this.title = this.$t('strings.world');        setTimeout(() => {            console.log("title=" + this.title); //需要注意console.log打印的信息需要在debug级别中寻找        }, 1)    }}

此时title的值始终不变

Flex布局

• Flex布局又名“弹性布局”，用来为盒状模型提供最大的灵活性。

 其中main axis为主轴，cross axis为交叉轴，可以在对应的轴线上设置样式

flex-dirction属性

• flex-direction属性决定主轴的方向（即项目的排列方向）。它的值可选项有：
  • row（默认属性值）：水平方向从左到右。
  • column：垂直方向从上到下。

flex-wrap属性

• flex容器是单行还是多行显示，该值暂不支持动态修改。它的值可选项有：
  •   nowrap（默认值）：不换行，单行显示。
  •   wrap：换行，多行显示。

justify-content属性

• justify-content属性定义了项目在主轴上的对齐方式。可选项有：
  •   flex-start（默认值）：项目位于容器的开头。
  •   flex-end：项目位于容器的结尾。
  •   center：项目位于容器的中心。
  •   space-between：项目位于各行之间留有空白的容器内。
  •   space-around：项目位于各行之前、之间、之后都留有空白的容器内。

align-items属性

• flex容器当前行的交叉轴对齐格式，可选值为：
  •   stretch（默认值）：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。
  •   flex-start：元素向交叉轴起点对齐。
  •   flex-end：元素向交叉轴终点对齐。
  •   center：元素在交叉轴居中。

align-content属性

• 交叉轴中有额外的空间时，多行内容对齐格式，可选值为：
  •   flex-start：所有行从交叉轴起点开始填充。
  •   flex-end：所有行从交叉轴末尾开始填充。
  •   center：所有行朝向容器的中心填充。
  •   space-between：所有行在容器中平均分布。
  •   space-around：所有行在容器中平均分布，相邻两行间距相等。

flex-grow属性

• flex-grow属性定义布局容器内部的成员组件的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性

• 设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩，默认值为1。

align-self属性

• align-self属性允许单个项目有与其他项目不一样的对齐方式，父元素的align-items样式。默认继承父元素的align-items属性，如果没有父元素，则等同于stretch。仅在父容器为div、list中生效。可选值为：
  •   stretch 弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  •   flex-start 元素向交叉轴起点对齐。
  •   flex-end 元素向交叉轴终点对齐。
  •   center 元素在交叉轴居中。
  •   baseline 元素在交叉轴基线对齐。