鸿蒙第五次培训

Input组件

实例（hml文件中的代码）：

预览：

 

Image组件 

实例：

 

Toolbar组件 

实例（hml文件中的代码）：

 

预览：

 

实现登录页面的制作及页面跳转： 

 

<div class="container">
    <div class="title">
        <text class="txt">Django 5</text>
    </div>
    <div class="middle">
        <input id="username" class="input" maxlength="10" placeholder="用户名" onchange="inputAccount" ontranslate="translate"/>
        <input id="password" class="input" maxlength="10" placeholder="密码" onchange="inputPassword"/>
    </div>
    <div class="login">
        <button class="btn" onclick="onclick">登录</button>
    </div>
    <div class="reginst">
        <text class="txt1">忘记密码</text>
        <text class="txt2">|</text>
        <text class="txt2" onclick="doregist">立即注册</text>
    </div>
    <div class="back">
        <text>{{winfo}}</text>
    </div>
</div>

 

.container{
    background: linear-gradient(120deg, #3498db, #8e44ad);
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}
.title{
    margin-top: 100px;
}
.txt{
    color: white;
    font-size: 40px;
}
.middle{
    flex-direction: column;
}
.input{
    width: 300px;
    height: 60px;
    color: white;
}
.btn{
    width: 150px;
    height: 45px;
}
.reginst{
    font-size: 20px;
}

 

import router from'@system.router';

export default {
    onclick(){
       router.push({
           uri:"pages/second/second"
       })
   }
}

 second.hml

<div class="container">
    <input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send"
    headericon="/common/images/搜索.png" placeholder="Please input text" onchange="change"
    onenterkeyclick="enterkeyClick">
    </input>
    <input class="btn" type="button" value="Back" onclick="onclick">
    </input>
    <toolbar style="position:fixed;bottom:0px">
        <toolbar-item icon='/common/images/搜索.png' value='Option1'> </toolbar-item>
        <toolbar-item icon='/common/images/搜索.png' value='Option2'> </toolbar-item>
        <toolbar-item icon='/common/images/搜索.png' value='Option3'> </toolbar-item>
    </toolbar>
</div>

second.css

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

.title {
    font-size: 38px;
    text-align: center;
    width: 100%;
    margin: 10px;
}

.btn {
    font-size: 40px;
    text-align: center;
    font-weight:bold;
    margin: 10px;
}

second.js

import router from'@system.router';

export default {
    onclick(){
        router.push({
            uri:"pages/index/index"
        })
    }
}

最终效果：

 

感悟：

1、制作页面时要注重细节，一些组件基本的使用方法和功能要记得或提前查资料。

2、在制作页面开始前脑中要有一个大概的思路和布局，再进行写代码。

3、DevEco Studio这个软件在使用过程中总是会遇到许多问题，有时候可能是SDK的问题，有时候可能是操作上的失误甚至是网络问题、代码错误等都会导致无法预览或代码无法运行····遇到问题时一定要沉着冷静，寻找解决问题的方法，写代码时仔细认真，使用软件时要耐心一点，多等待一会。