HarmonyOS开发第三天

直接上手写代码也是懵的状态。  恶补这些基础吧先。又是恶补html和css的一天。

继续看常用属性：justify-content:这也是css中常用的布局属性他用在flexbox（弹性盒布局）或者grid(网格布局)中。它的属性值还是比较多的，接下来一个个了解一下。

它们就是两部分  分别用在flexbox和grid中

首先是用在flexbox中的。flex-start：这是默认值，意思是放在布局的起始位置。

.container {
    display: flex;
    justify-content: flex-start;
}

flex-end:  将子元素放在容器的结束位置。将控件放在布局结束位置。

.container {
    display: flex;
    justify-content: flex-end;
}

center：将子元素在布局中居中

.container {
    display: flex;
    justify-content: center;
}

space-between:恩怎么理解呢  你可以把它理解成权重xml里面的weight，将控件权重分配这样控件到布局已及控件之间的间距都变成一样的。

.container {
    display: flex;
    justify-content: space-between;
}

space-around：这个和between相似，在它的基础上还会将控件和其他的控件均匀分配。

.container {
    display: flex;
    justify-content: space-around;
}

grid布局中的的属性值和flexbox的一致意思呢也都一样，具体的这些不能只看理论，要自己去实践，写写代码在看previewer的排列就很用以理解和上手了。

align属性：用于设置控件在某个方向上的对齐方式。包含水平和垂直方向。

在水平方向可是设置属性值为：left，right，和center。用于将控件元素对齐布局的左侧右侧和中心对齐。

在垂直方向可设置的值和水平类似，它可以取值为 top，bottom和middel分别对齐布局的上，下，中。

需要注意的是，在水平方向上，align属性只对块级元素起作用，而在垂直方向上，它只对表格单元格和图像等内联元素起作用。如果想要在水平方向上对内联元素进行对齐，可以使用text-align属性。align-items:center;让元素中心位置

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 40px;
    text-align: center;
    width: 100%;
    height: 40%;
    margin: 10px;
}
好  先这么多用到其他的在学，接上次hml里面创建了一个button按钮

指向呢是一个class为button 现在就需要在css里面去创建这个元素

.button {
    width: 40%;
    height: 40px;
    color: white;
    background-color: red;
}

去设置它得宽高颜色。之后给他添加点击事件。就需要去js里面去写了

首先我们onclick定义的函数是onClick  所以先去创建一个onClick。接下来要做的事情是点击按钮，跳转新的界面。

先创建一个新的page 在pages里面：

就会出现一个新的

我们要做的就是index跳转到new_demo里。点击new_demo里面的按钮再重新跳回index里面。先需要同样的方式在new_demo里面添加个按钮。正好又练一次手。自己盲写吧哈哈

之后呢在js里面从system包里面导入router类型。这个router就是用来实现页面跳转的。

import router from '@system.router';

需要用到router里面的replace方法。键值的对应关系去实现

恩~~同理new_demo的js只要换个跳转路径就可以了~~这样就能实现两个界面相互跳转了。又前进一步~~~明天再来