Flythings学习（二）控件相关

文章目录

1 前言
2 通用属性
- 2.1 控件ID值
- 2.2 控件位置
- 2.3 背景色
- 2.4 背景图
- 2.5 显示与隐藏
- 2.6 控件状态
- 2.7 蜂鸣器控制
3 文本类TextView
4 按键类 Button
- 4.1 系统按键
- 4.2 处理按钮长按事件
- 4.3 处理按键触摸事件
5 复选框CheckBox
6 单选组 RadioGroup
7 进度条，滑块
- 7.1 如何控制滑块的进度
8 指针仪表控件
9 列表控件
- 9.1 设置列表项的显示内容
- 9.2 设置列表子项的显示内容
10 编辑框
11 窗口
12 滑动窗口

1 前言

本系列笔记根据flythings官方文档进行学习，连接如下，相关下载在文档中的环境安装部分
https://developer.flythings.cn/zh-hans/

2 通用属性

2.1 控件ID值

ID值作为控件的唯一标识，每一个FTU文件里的控件ID值是不允许重名的，不同的ftu文件里的控件ID值允许重名；设置id后，编译完全会在activity目录下对应的头文件中生成相应的宏定义

在这里插入图片描述
所有控件都能使用

/**
 * 该接口定义于控件基类ZKBase中
 * 头文件位置： include/control/ZKBase.h
 *
 * 注意： 以下接口如未特殊说明，都表示定义在ZKBase类中
 * 所有控件直接或间接的继承了ZKBase类，所以，所有的控件都可以调用ZKBase类中public接口
 */
int getID() const;

/* 操作样例： 点击按钮控件，打印该控件ID值 */
static bool onButtonClick_Button1(ZKButton *pButton) {
    int id = pButton->getID();
    LOGD("onButtonClick_Button1 id %d\n", id);
    return false;
}

2.2 控件位置

在这里插入图片描述

// 设置位置
void setPosition(const LayoutPosition &position);
// 获取位置
const LayoutPosition& getPosition();

样例

/* 操作样例 */
// 点击按钮控件，设置该按钮位置
static bool onButtonClick_Button1(ZKButton *pButton) {
    // 左：0，上：0，宽：100，高：200
    LayoutPosition pos(0, 0, 100, 200);
    pButton->setPosition(pos);
    return false;
}

// 点击按钮控件，获取该按钮位置
static bool onButtonClick_Button2(ZKButton *pButton) {
    // pos的mLeft、mTop、mWidth、mHeight变量分别对应的就是坐标值
    LayoutPosition pos = pButton->getPosition();
    return false;
}

2.3 背景色

/**
 * Z6、Z11、A33平台接口定义
 * color为-1时，背景设置为透明；其他颜色值为0x RGB，颜色值不支持alpha
 */
void setBackgroundColor(int color);

/**
 * H500S、Z20、Z21及以后平台接口定义
 * color 颜色值为0x ARGB，支持alpha
 */
void setBackgroundColor(uint32_t color);


/* 操作样例： 点击按钮控件，设置背景颜色为红色 */
static bool onButtonClick_Button1(ZKButton *pButton) {
    pButton->setBackgroundColor(0xFFFF0000);
    return false;
}

2.4 背景图

在这里插入图片描述

/**
 * pPicPath参数可以有以下两种方式：
 * 1. 绝对路径，如："/mnt/extsd/pic/bg.png"
 * 2. 相对资源目录路径，只需把图片放到项目工程resources目录下，编译打包后，就可以使用了，如resources目录下有bg.png图片，只需设置"bg.png"即可
 */
void setBackgroundPic(const char *pPicPath);


/* 操作样例 */
mButton1Ptr->setBackgroundPic("/mnt/extsd/pic/bg.png"); // 设置绝对路径
mButton1Ptr->setBackgroundPic("bg.png");    // 设置resources目录下bg.png图片

2.5 显示与隐藏

void setVisible(bool isVisible);
bool isVisible() const;
/* 操作样例 */
mButton1Ptr->setVisible(true);  // 显示按钮控件
mButton1Ptr->setVisible(false); // 隐藏按钮控件

/**
 * 窗口控件还可以使用下面的接口，功能一样
 * 头文件位置： include/window/ZKWindow.h
 */
void showWnd();  // 显示窗口
void hideWnd();  // 隐藏窗口
bool isWndShow() const;  // 窗口是否显示

/* 操作样例 */
mWindow1Ptr->showWnd();
mWindow1Ptr->hideWnd();

2.6 控件状态

在这里插入图片描述

// 设置选中状态
void setSelected(bool isSelected);
bool isSelected() const;

/* 操作样例 */
mButton1Ptr->setSelected(true);
mButton1Ptr->setSelected(false);


/**
 * 无效状态作用说明：控件设置为无效状态情况下，触摸控件没有作用，即不响应按下抬起事件
 */
// 设置无效状态
void setInvalid(bool isInvalid);
bool isInvalid() const;

/* 操作样例 */
mButton1Ptr->setInvalid(true);
mButton1Ptr->setInvalid(false);

2.7 蜂鸣器控制

在这里插入图片描述

// 所有控件都支持beep接口，以下为操作样例
mButton1Ptr->beep();


// 全局控制蜂鸣器
#include "manager/ConfigManager.h"
// 接口参数说明： true 开启、false 关闭
CONFIGMANAGER->setBeepEnable(true);

3 文本类TextView

通过代码动态更新文本内容
比如通过点击一个按钮，更新文字内容

static bool onButtonClick_Button1(ZKButton *pButton) {
 mTextView1Ptr->setText("Hello World");
 return false;
}

/* 操作样例 */
mTextView1Ptr->setText(123); // TextView1控件将显示"123"字符串
mTextView1Ptr->setText('c'); // TextView1控件将显示'c'字符

修改文字颜色大小等，可以通过控件更改，也可以通过代码更改

   //将控件TextView1 设置为无效状态；如果属性表中`无效时颜色`属性不为空，则将其设置为指定的颜色，否则无变化。
   mTextView1Ptr->setInvalid(true);
   //将控件TextView1 设置为选中状态；如果属性表中`选中时颜色`属性不为空，则将其设置为指定的颜色，否则无变化。
    mTextView1Ptr->setSelected(true);
       //将控件TextView1 设置为按下状态；如果属性表中`按下时颜色`属性不为空，则将其设置为指定的颜色，否则无变化。
    mTextView1Ptr->setPressed(true);
      //将控件TextView1 设置为红色。
   mTextView1Ptr->setTextColor(0xFF0000);

4 按键类 Button

在这里插入图片描述
在Logic.cc中设计点击函数

static bool onButtonClick_Button1(ZKButton *pButton) {
 //LOGD(" ButtonClick Button1 !!!\n");
 return false;
}

4.1 系统按键

除了自己定义的ID值外，按键还保留了两个系统按键值：sys_back 和 sys_home ，从名字上我们大致可以知道它们的功能：返回键和 Home键；点击返回键，界面会回到上一界面，如果进入了多层级的界面，点击Home键可以直接回到主界面（启动界面）。我们只需在按键的属性框中把ID值设置为 sys_back 或 sys_home ，就可以实现相应的功能。
在这里插入图片描述

4.2 处理按钮长按事件

在这里插入图片描述
这两个默认值是-1，可以进行相应设置

设置属性后，编译，打开对应的Logic.cc文件，在文件顶部，声明class LongClickListenner并继承
ZKBase::ILongClickListener类，实现virtual void onLongClick(ZKBase *pBase)方法

namespace { // 加个匿名作用域，防止多个源文件定义相同类名，运行时冲突

 //实现长按监听接口
 class LongClickListener : public ZKBase::ILongClickListener {

          virtual void onLongClick(ZKBase *pBase) {  
                 LOGD("触发长按事件");
                 static int count = 0;

                 char buf[128] = {0};
                 snprintf(buf, sizeof(buf), "长按事件触发次数 %d", ++count);
                 //每次触发长按事件，修改按键的文字
                 mLongButtonPtr->setText(buf);
          }
 };

 }

实例化监听类，设置为静态类型

 static LongClickListener longButtonClickListener;

在onUI_init()函数中注册按键长按监听

 static void onUI_init(){

         //注册按键长按监听
         mLongButtonPtr->setLongClickListener(&longButtonClickListener);
 }

在onUI_quit()中取消监听

 static void onUI_quit() {
        //取消按键长按监听
        mLongButtonPtr->setLongClickListener(NULL);
 }

4.3 处理按键触摸事件

实现监听接口类，继承自ITouchListener

 namespace {    // 加个匿名作用域，防止多个源文件定义相同类名，运行时冲突

 // 实现触摸监听接口
 class TouchListener : public ZKBase::ITouchListener {
 public:
     virtual void onTouchEvent(ZKBase *pBase, const MotionEvent &ev) {
         switch (ev.mActionStatus) {
         case MotionEvent::E_ACTION_DOWN:
             mTouchButtonPtr->setText("按下");
             break;
         case MotionEvent::E_ACTION_UP:
             mTouchButtonPtr->setText("抬起");
             break;
         default:
             break;
         }
     }
 };

 }

实例化监听类，并声明为静态类型

 static TouchListener sTouchListener;

在 static void onUI_init() 函数中注册按键触摸监听

 static void onUI_init() {
     //注册按键触摸监听
     mTouchButtonPtr->setTouchListener(&sTouchListener);
 }

在static void onUI_quit()函数中取消按键触摸监听

 static void onUI_quit() {
     //取消按键触摸监听
     mTouchButtonPtr->setTouchListener(NULL);
 }

5 复选框CheckBox

在拖入复选框后，在对应的Logic.cc中会产生关联函数，当点击控件时，关联函数会被系统调用
当点击控件时，关联函数会被调用

static void onCheckedChanged_Checkbox1(ZKCheckBox* pCheckBox, bool isChecked) {
 if (isChecked) {
   //复选框 为 选中状态
   LOGD("选中");
 } else {
   //复选框 为  未选中状态
   LOGD("未选中");
 } 
}

pCheckBox是该控件
isChecked时是否选中状态

6 单选组 RadioGroup

多个选项只能选择一个选项，组中选项的ID能在Activity.h中看到
在这里插入图片描述
在logic.cc中会自动创建关联函数

 static void onCheckedChanged_RadioGroup1(ZKRadioGroup* pRadioGroup, int checkedID) {
   LOGD("选中项的ID = %d", checkedID);
   switch (checkedID) {
     case ID_MAIN_RadioButton1:
       LOGD("第一项被选中");
       break;
     case ID_MAIN_RadioButton2:
       LOGD("第二项被选中");
       break;
     case ID_MAIN_RadioButton3:
       LOGD("第三项被选中");
       break;
     default:
       break;
   }
 }

checkedID是被选中的选项的ID

7 进度条，滑块

在这里插入图片描述
要准四张图片资源，分别是
背景图
有效图
滑块
滑块按下

7.1 如何控制滑块的进度

添加ui后，编译会自动添加在对应的.cc文件中
当进度条改变时，会自动调用函数

static void onProgressChanged_XXXX(ZKSeekBar *pSeekBar, int progress) {
   //LOGD("XXXX滑块的进度值变化为 %d !\n", progress);
}

设置滑块当前进度

//将滑块进度设置为28
mSeekbarPtr->setProgress(28)

获得滑块的当前进度

int progress = mSeekbarPtr->getProgress();
LOGD("当前滑块的进度值为 %s", progress);

8 指针仪表控件

需要两个图片资源，背景图和指针图片

在这里插入图片描述
通过代码设置指针的旋转角度

//将指针调整到90度
mPointer1Ptr->setTargetAngle(90.0);

9 列表控件

需要插入两个东西，一个是列表，一个是列表子项
在这里插入图片描述
有三个函数，在第一章讲过
int getListItemCount_ListView1()：获取将要绘制列表的长度
例如: 要显示的数据有100条，那么就返回100。
void obtainListItemData_List1：具体设置列表每一项的显示内容具体例子参见后续文档以上两个函数共同控制着列表的显示内容。更具体的函数调用流程。
onListItemClick_List1：列表控件的点击事件当点击列表中的某一项时，系统会调用该函数，参数index 表示当前被点击列表项的索引值。

9.1 设置列表项的显示内容

列表项，指列表组中的一个列表项中的内容

static void obtainListItemData_ListView1(ZKListView *pListView,ZKListView::ZKListItem *pListItem, int index) {
 //pListItem指针表示列表项， 该指针只能在这个函数内当中使用
 char buf[32] = {0};
 //参数index表示 当前绘制的是列表的第几项，从0开始。
 //这里，我们将index值格式化到字符串中
 snprintf(buf, sizeof(buf), "第%d项", index);
 //将字符串作为文字显示到列表项区域
 pListItem->setText(buf);
 //如果你在ui文件中，已经配置好了 列表项 "选中时的图片“，
 //那么，通过以下这行代码设置列表项的选中状态，即可控制列表项显示对应状态的图片
 pListItem->setSelected(true);
}

9.2 设置列表子项的显示内容

列表项中的列表子项

static void obtainListItemData_ListView1(ZKListView *pListView,ZKListView::ZKListItem *pListItem, int index) {
 char buf[32] = {0};
 //参数index表示 当前绘制的是列表的第几项，从0开始。
 //这里，我们将index值格式化到字符串中
 snprintf(buf, sizeof(buf), "第%d项的第一个子项", index);
 //我们可以通过findSubItemByID()函数以及列表子项的ID，得到列表子项的指针
 //与pListItem指针相同，查找得到的列表子项指针也只能在这个函数内当中使用
 ZKListView::ZKListSubItem* subitem1 = pListItem->findSubItemByID(ID_MAIN_SubItem1);
 if (subitem1 != NULL) {
     //设置列表子项1的文字
     subitem1->setText(buf);
 }

 snprintf(buf, sizeof(buf), "第%d项的第二个子项", index);
 ZKListView::ZKListSubItem* subitem2 = pListItem->findSubItemByID(ID_MAIN_SubItem2);
 if (subitem2 != NULL) {
     //设置列表子项2的文字
     subitem2->setText(buf);
 }
}

10 编辑框

一个可供输入的编辑框
获得模拟键盘的输入内容

static void onEditTextChanged_XXXX(const std::string &text) {
      //LOGD("当前输入的内容为 %s \n", text.c_str());
}

// 获得字符串
const char* str = text.c_str();

// 字符串转换为数字


static void onEditTextChanged_EditText1(const std::string &text) {
int number = atoi(text.c_str());
LOGD("字符串转为数字 = %d", number);
}

static void onEditTextChanged_EditText1(const std::string &text) {
// atof函数可以将字符串转为对应的浮点数，比如 “3.14” 可以转为整形 3.14
//如果参数不规范，会造成转换失败，统一返回 数字 0
double f = atof(text.c_str());
LOGD("字符串转为浮点数 = %f", f);
}
```cpp

11 窗口

界面中可以出现多个窗口
窗口中可以添加其他组件并自定义大小和位置

一般来说，通过触摸滑动来上下翻页，但也有相应函数

// 切换到下一页，有动画
mPageWindow1Ptr->turnToNextPage(true);
// 切换到下一页，无动画
mPageWindow1Ptr->turnToNextPage(false);

// 切换到上一页，有动画
mPageWindow1Ptr->turnToPrevPage(true);
// 切换到上一页，无动画
mPageWindow1Ptr->turnToPrevPage(false);

监听翻刀了第几页

 namespace { // 加个匿名作用域，防止多个源文件定义相同类名，运行时冲突
 // 实现自己的监听接口
 class MyPageChangeListener : public ZKPageWindow::IPageChangeListener {
 public:
     virtual void onPageChange(ZKPageWindow *pPageWindow, int page) {
         LOGD("当前切换到第%d页", page);
     }
 };
 }
 // 定义监听对象
 static MyPageChangeListener sMyPageChangeListener;

 static void onUI_init() {
     mPageWindow1Ptr->setPageChangeListener(&sMyPageChangeListener);
 }

// 获取当前是第几页
int i = mPageWindow1Ptr->getCurrentPage();
LOGD("当前是第%d页", i);

滚动窗口类似于手机主界面上下或者左右滚动的界面效果
由一个滚动窗口、一个窗口和多个控件组成

12 滑动窗口

在这里插入图片描述
滑动窗口中的图标会自行进行排列，也可以手动调整间距等属性

代码操作

// 切换到上一页，有动画
mSlideWindow1Ptr->turnToPrevPage(true);
// 切换到上一页，无动画
mSlideWindow1Ptr->turnToPrevPage(false);

// 切换到下一页，有动画
mSlideWindow1Ptr->turnToNextPage(true);
// 切换到下一页，无动画
mSlideWindow1Ptr->turnToNextPage(false);

 namespace { // 加个匿名作用域，防止多个源文件定义相同类名，运行时冲突
 // 实现自己的监听接口
 class MySlidePageChangeListener : public ZKSlideWindow::ISlidePageChangeListener {
 public:
     virtual void onSlidePageChange(ZKSlideWindow *pSlideWindow, int page) {
         LOGD("当前切换到第%d页", page);
     }
 };
 }
 // 定义监听对象
 static MySlidePageChangeListener sMySlidePageChangeListener;

 static void onUI_init() {
     mSlidewindow1Ptr->setSlidePageChangeListener(&sMySlidePageChangeListener);
 }

监听后，可以自己设置点击或长按等相关操作