获取示例源码
git clone
git@gitee.com:tsing-qiu/waft-ui.git
注意所有的组件示例都在一个git仓库中，如果之前有下载，则可以省去下载步骤。
硬件准备
ui demo整体说明
页面导航
文件路径：waft-ui/src/app.json
{
"pages": [
"pages/home/index",
"pages/test-dialog/index",
"pages/test-list/index",
"pages/test-loading/index",
"pages/test-swiper/index",
"pages/test-video/index",
"pages/test-picker/index",
"pages/test-slider/index",
"pages/test-button/index",
"pages/test-navbar/index",
"pages/test-tabs/index",
"pages/test-image/index"
],
"default": "pages/home/index",
"window": {
"default
title": "Waft UI"
}
}
每个组件会有一个单独的page展示，dialog的示例在waft-ui/src/pages/test-dialog目录下。这篇文章主要讲解dialog 的使用。
Dialog使用
我们进入dialog demo目录，waft-ui/src/pages/test-dialog。目录内容如下：
test-dialog % tree
.
├── index.acss
├── index.axml
├── index.json
└── index.ts
样式文件
看到我们熟悉的四个文件，index.acss对应的是css样式文件，
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
background-color: #eeeeee;
}
.content{
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding-top: 30rpx;
}
ui上使用的样式在这里定义。
布局文件
index.amxl是gui的布局文件
标题
这里比起之前的两个示例，控件都加了点击处理函数，例如“按钮”这个button，对应的点击处理是clickToast1Btn
json数据
index.json
{
"usingComponents": {
"x-nav-bar": "../assembly/nav-bar/nav-bar",
"x-switch": "../assembly/switch/switch",
"x-button": "../assembly/button/button",
"x-slider": "../assembly/slider/slider",
"x-toast": "../assembly/toast/toast",
"x-overlay": "../assembly/overlay/overlay",
"x-card": "../assembly/card/card",
"x-dialog":"../assembly/dialog/dialog"
},
"state": {
"showToast1": false,
"showToast2": false,
"showOverlay": false,
"showDialog": false
}
}
index.json主要申明了组件的变量，已经在逻辑页面用到state变量，这些变量通过setState改变，进而改变ui的状态。
逻辑控制
index.ts文件包括了页面的逻辑控制：
import { Page, Props } from "waft";
import { JSON, JSONObject } from "waft-json";
import { Toast, ToastOptions } from "../../../assembly/toast/toast";
export class ComponentTest extends Page {
constructor(props: Props) {
super(props);
this.addEventListener("clickToast1Btn", (e, target): void => {
// 未测试多个toast同时调用的问题
let toastOptions = new ToastOptions();
toastOptions.message = "测试Toast1";
toastOptions.type = "fail";
// toastOptions.iconURL = "https://gw.alicdn.com/imgextra/i1/O1CN01evbrT81s2JRO3tkra_!!6000000005708-2-tps-200-200.png"
Toast.show(toastOptions);
});
this.addEventListener("clickToast2Btn", (e, target): void => {
let toastOptions = new ToastOptions();
toastOptions.message = "测试Toast2";
toastOptions.type = "info";
toastOptions.duration = 5000;
toastOptions.position = "middle";
Toast.show(toastOptions);
});
this.addEventListener("clickOverlayBtn", (e, target): void => {
(target as ComponentTest).setState(
JSON.parseObject(`{"showOverlay":true}`)
);
console.log("====打开遮罩");
});
this.addEventListener("clickOverlay", (e, target): void => {
(target as ComponentTest).setState(
JSON.parseObject(`{"showOverlay":false}`)
);
console.log("====关闭遮罩");
});
this.addEventListener("clickDialogBtn", (e, target): void => {
console.log("dadsada");
(target as ComponentTest).setState(
JSON.parseObject(`{"showDialog":true}`)
);
});
this.addEventListener("clickConfirm", (e, target): void => {
console.log("****关闭弹窗****");
(target as ComponentTest).setState(
JSON.parseObject(`{"showDialog":false}`)
);
});
this.addEventListener("clickCancel", (e, target): void => {
console.log("****关闭弹窗****");
(target as ComponentTest).setState(
JSON.parseObject(`{"showDialog":false}`)
);
});
}
}
效果展示
模拟器效果：
文章转载自：平头哥芯片开放社区 作者：晚空
