编辑语：
随着RISC-V生态的蓬勃发展，相关开源开发套件也开始逐渐丰富。为了帮助开发者快速了解、玩转新推出的RISC-V开发套件，OCC推出RISC-V生态开发套件解析系列内容，详细讲解生态开发套件的功能特点与上手教程。
关于Waft应用方式，相信各位开发者通过学习Waft基础，已经对其有了初步了解。基于前几期的介绍，本期我们将为大家带来了Waft UI的基础教学，本文主要讲解的是Waft UI中Bottun和Image的使用。想感受Waft UI在Sipeed LicheeRV 86开发板上的运行效果吗？学习本期内容，赶快上手体验吧。
01 前期准备
1.获取示例源码
git clone git@gitee.com:tsing-qiu/waft-ui.git
2.硬件准备
控件的演示demo推荐在8寸屏上演示。使用8寸屏的教程参考：
3.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": { "defaultTitle": "Waft UI" } }
每个组件会有一个单独的page展示，例如button的示例在waft-ui/src/pages/test-button目录下。这篇文章主要讲解button widget和image widget的使用。
02 Button使用
我们进入button demo目录，waft-ui/src/pages/test-button。目录内容如下：
test-button % tree
.
├── index.acss
├── index.axml
├── index.json
└── index.ts
1.样试文件
看到我们熟悉的四个文件，index.acss对应的是css样式文件，ui上使用的样式在这里定义。
.wrapper { max-width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color: #eeeeee; } .title { color: #2b3852; font-size: 26rpx; margin: 5rpx 0; } .flex { display: flex; flex-direction: row; justify-content: flex-start; align-content: flex-start; flex-wrap: wrap; } .dot { width: 10rpx; }
2.布局文件
index.amxl是gui的布局文件
<view class="wrapper"> <x-nav-bar showArrow="{{true}}" title="Button"></x-nav-bar> <view style="flex: 1; padding-top: 30rpx; display: flex;flex-direction: column;"> <view class="title">按钮类型</view> <view class="flex"> <x-button text="按钮"></x-button><view class="dot"></view> <x-button type="tip" text="按钮"></x-button><view class="dot"></view> <x-button type="primary" text="按钮"></x-button><view class="dot"></view> <x-button type="secondary" text="按钮"></x-button><view class="dot"></view> </view> <view class="title">禁用状态</view> <view class="flex"> <x-button text="按钮" disabled="{{true}}"></x-button><view class="dot"></view> <x-button type="primary" text="按钮" disabled="{{true}}"></x-button><view class="dot"></view> <x-button type="secondary" text="按钮" disabled="{{true}}"></x-button><view class="dot"></view> </view> <view class="title">按钮大小</view> <view class="flex"> <x-button text="按钮" size="small"></x-button><view class="dot"></view> <x-button text="按钮"></x-button><view class="dot"></view> <x-button text="按钮" size="large"></x-button><view class="dot"></view> </view> <view class="title">带图标</view> <view class="flex"> <x-button text="按钮" iconURL="https://gw.alicdn.com/imgextra/i1/O1CN0192HvCz1vntR4jzNJ9_!!6000000006218-2-tps-20-20.png"></x-button><view class="dot"></view> </view> <view class="title">自定义颜色</view> <view class="flex"> <x-button text="按钮" bgColor="#ff976a" borderColor="#ff976a" textColor="#ffffff"></x-button><view class="dot"></view> </view> </view> </view>
3.逻辑控制
index.ts文件包括了页面的逻辑控制：
import { Page, Props, history, Event} from 'waft'; import { JSON, JSONObject } from "waft-json"; export class TestList extends Page { constructor(props: Props) { super(props); } }
4.效果展示
在waft-ui目录执行npm start，拉起cli，编译
.build --aot=true --aotTarget=riscv64
使用模拟器查看
.simulator --width=800 --height=480 --wasm=build/app.wasm
demo中涵盖了button的各种样式，包括禁用状态、button带图标，自定义颜色等，开发者可以参考布局文件学习使用。
当然，还可以把build/目录下的app.aot推送到真机上运行。
03 Image使用
我们进入Image demo目录，waft-ui/src/pages/test-image。目录内容如下：
test-image % tree
.
├── index.acss
├── index.axml
├── index.json
└── index.ts
1.样式文件
看到我们熟悉的四个文件，index.acss对应的是css样式文件，ui上使用的样式在这里定义。
.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; }
2.布局文件
index.amxl是gui的布局文件
<view class="wrapper"> <x-nav-bar showArrow="{{true}}" title="测试图片"></x-nav-bar> <view class="content"> <x-image full="{{ true }}" width="400rpx" height="400rpx" src="https://gw.alicdn.com/imgextra/i1/O1CN01dudMzQ1eY0BV29999_!!6000000003882-2-tps-1920-1080.png"></x-image> </view> </view>
3.逻辑控制
index.ts文件包括了页面的逻辑控制：
{ "usingComponents": { "x-nav-bar": "../assembly/nav-bar/nav-bar", "x-image":"../assembly/image/image" }, "state": { } }
4.效果展示
模拟器效果：
真机效果：
04 下期预告
本期内容就先介绍到这里，下期我们为大家推荐Waft UI教学的下半部分，即Dialog的使用和拓展外部SD卡储存。欢迎大家持续关注RISC-V生态开发套件系列内容。
