获取示例源码
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展示，例如button的示例在waft-ui/src/pages/test-image目录下。这篇文章主要讲解image widget的使用。
Image使用
我们进入Image demo目录，waft-ui/src/pages/test-image。目录内容如下：
test-image % 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的布局文件
逻辑控制
index.ts文件包括了页面的逻辑控制：
{
"usingComponents": {
"x-nav-bar": "../assembly/nav-bar/nav-bar",
"x-image":"../assembly/image/image"
},
"state": {
}
}
效果展示
模拟器效果：
真机效果：
文章转载自：平头哥芯片开放社区 作者：晚空
