编辑语：
随着RISC-V生态的蓬勃发展，相关开源开发套件也开始逐渐丰富。为了帮助开发者快速了解、玩转新推出的RISC-V开发套件，OCC推出RISC-V生态开发套件解析系列内容，详细讲解生态开发套件的功能特点与上手教程。
紧接上文，我们继续为大家介绍Waft UI基础教学。本文是Waft教学的完结篇，将讲解Waft UI中Dialog的使用，以及扩展外部SD卡储存的方法。想解决存储空间不足的问题吗？本期内容为你详解。
01 Dialog使用
1.1 获取示例源码
git clone git@gitee.com:tsing-qiu/waft-ui.git
注意所有的组件示例都在一个git仓库中，如果之前有下载，则可以省去下载步骤。
1.2 硬件准备
控件的演示demo推荐在8寸屏上演示。使用8寸屏的教程参考：
1.3 ui demo整体说明
1.3.1 页面导航
文件路径：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": { "defaultTitle": "Waft UI" } }
每个组件会有一个单独的page展示，dialog的示例在waft-ui/src/pages/test-dialog目录下。这篇文章主要讲解dialog 的使用。
1.4 Dialog使用
我们进入dialog demo目录，waft-ui/src/pages/test-dialog。目录内容如下：
test-dialog % tree
.
├── index.acss
├── index.axml
├── index.json
└── index.ts
1.4.1 样式文件
看到我们熟悉的四个文件，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上使用的样式在这里定义。
1.4.2 布局文件
index.amxl是gui的布局文件
<view class="wrapper" style="background-color:lightblue;"> <view class="test"></view> <x-nav-bar showArrow="{{true}}" title="测试Toast"></x-nav-bar> <view class="content"> <x-button type="primary" text="按钮" click="clickToast1Btn"></x-button> <x-button type="secondary" text="显示toast2" click="clickToast2Btn"></x-button> <x-button text="显示遮罩层" click="clickOverlayBtn"></x-button> <x-button type="primary" text="显示dialog" click="clickDialogBtn"></x-button> <x-toast></x-toast> <x-overlay show="{{ showOverlay }}" click="clickOverlay"> <view style="height: 50rpx;width: 50rpx;background-color: white;"></view> </x-overlay> <x-dialog show="{{ showDialog }}" clickConfirm="clickConfirm" clickCancel="clickCancel" message="是否确认删除？" overlay="{{false}}"> <view slot="title">标题</view> </x-dialog> </view> </view>
这里比起之前的两个示例，控件都加了点击处理函数，例如“按钮”这个button，对应的点击处理是clickToast1Btn
<x-button type="primary" text="按钮" click="clickToast1Btn"></x-button>
1.5 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的状态。
1.5.1 逻辑控制
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}`) ); }); } }
1.6 效果展示
模拟器效果：
- toast效果1
- toast效果2
- dialog效果
02 扩展外部sd卡存储
在更新waft运行sdk时，经常会遇到存储空间不够的情况。下面介绍如何扩展sdcard，利用sdcard的存储空间
2.1 制作文件系统
执行如下命令：
mkfs.vfat /dev/mmcblk0p8
然后重启设备即可。
验证方法，adb shell登入，执行如下命令，直接输入df
df Filesystem 1K-blocks Used Available Use% Mounted on /dev/root 99884 86312 6404 93% / devtmpfs 247740 0 247740 0% /dev tmpfs 251932 44 251888 0% /tmp /dev/mmcblk0p1 8151 680 7471 8% /mnt/SDCARD /dev/by-name/UDISK 21777984 14592 21763392 0% /mnt/UDISK
可以看到mout到/mnt/UDISK的目录。
然后把so、waft_app push到/mnt/UDISK目录。
如果df看不到/mnt/UDISK节点，直接cd 到/mnt/UDISK，执行：
touch test.txt
如果能生成文件，说明成功扩展sdcard。
2.2 修改LD_LIBRARY_PATH
执行如下命令：
vi /etc/profile
增加一行
export LD_LIBRARY_PATH="/mnt/UDISK"
2.3 运行
/mnt/UDISK/waft_app /waftapps/app_widgets.aot
