基于from组件的页面交互
一、实验目的
1、掌握基于form组件的页面结构文件
2、掌握基于from组件的页面交互文件
二、实验设备与器件
PC机、DevEco Studio工具
三、实验内容
1、在移动开发中，经常会碰到需要提交信息的场景，如登录页面时需要输入用户名和密码，评论时需要提交评论内容。Form（表单）容器组件提供了一种简便的方式来提交输入信息，支持容器内input元素的内容提交和重置。
下面编写一个投票的手机应用，统计大家对菊花和玫瑰两种花卉的看法。首先需要设计页面结构文件，基于form组件的页面结构文件代码如下：
index |
index.xml |
<form ousubmit='onSubmit' onreset='onReset'>
<label>菊花</label>
<input type='radio'name='radioGroup'value='ju'></input>
<label>玫瑰</label>
<input type='radio'name='radioGroup'value='rose'></input>
<text>你的评价</text>
<input type='text' name='user'></input>
<input type='submit'>提交</input>
<input type='reset'>重置</input>
</form> |
界面设计结果 |
 |
2、上图定义了一个form组件，该form组件中包含两个单选框供用户选择，分别对应“菊花”和“玫瑰”两个页签，选中“菊花”后radioGroup的取值为ju,否则为rose。另外，form组件还提供了一个input组件供用户输入对所选花卉的评价，可以通过user名称来访问。Form组件中还有两个按钮，一个是“提交”按钮，另一个是“重置”按钮，点击这两个按钮，分别会触发from组件的onsubmit和onreset函数，以调用JS文件中对应的回调函数。Form组件模拟器前端运行结果如下图：
index |
index.js |
export default {
onSubmit(result){
console.log(result.value.radio)
// console.log(result.value.user)
console.log("1111")
},
onReset(){
console.log('reset all value')
}
} |
界面设计结果 |
 |
3、上图中的onSubmit回调函数会输出用户选择的花卉偏好和输入花卉评价内容，onReset回调函数会将所有用户输入清空，并输入“rest all value”字符串。用户选中“菊花”后点击提交按钮后，from组件控制台输出结果如图：
index |
index.css |
.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;
}
@media screen and (device-type: tablet) and (orientation: landscape) {
.title {
font-size: 100px;
}
}
@media screen and (device-type: wearable) {
.title {
font-size: 28px;
color: #FFFFFF;
}
}
@media screen and (device-type: tv) {
.container {
background-image: url("/common/images/Wallpaper.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.title {
font-size: 100px;
color: #FFFFFF;
}
}
@media screen and (device-type: phone) and (orientation: landscape) {
.title {
font-size: 60px;
}
} |
界面设计结果 |
 |
