鸿蒙开发板3516遥控3861智能小车系列(一)C++开发界面应用

 想了解更多内容,请访问:

在南山等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站设计、网站建设、外贸网站建设 网站设计制作按需制作,公司网站建设,企业网站建设,成都品牌网站建设,成都全网营销,外贸网站制作,南山网站建设费用合理。

和华为官方合作共建的鸿蒙技术社区

https://harmonyos./#zz

老规矩先上该应用的演示视频:https://harmonyos./show/3006

首先立flag:用3516做一款独一无二的遥控器,然后用这款遥控器去尽情的操纵3861这款智能小车。第一呢,肯定不能做的太粗糙了,打工人也要有点儿追求的。第二呢,围绕着源码,发现一些更多的好东西,比如这次C++界面开发中大多数API,官方是暂未给出的,这就需要是我去摸索源码。其中最重要的一点,我想看看能否在3516和3861组成局域网之后,能否利用分布式软总线能力去调用(当然,这个可能会吹牛,毕竟钊哥说他目前还没调通)。

flag立完了,这个能不能实现.....我尽力吧!

首先呢,大家得搭好3516的环境,我最近之所以鸽了这么长时间没有发文章。也有一部分这个原因,因为我本身用的系统是ubuntu20.04,然后在其上搭windows虚拟机来烧系统以及刷应用。我在这个过程中是“编代码3分钟,刷系统3天”,这里我也分享一下我遇到的坑,如果大家也有我这种环境配置的话,希望可以帮助到大家。最开始的时候,我是用的virtualBox虚拟机来搭的windows,这个windows来玩3861的时候别提多顺畅了,当我以为3516也会一样顺畅的时候,我发现我错了,装上3516的驱动后,我的windows开始了无限自动重启模式,我在尝试着修复无果后,一度想着放弃....但是作为一名合格的码农,怎么能随便放弃呢!然后抱着试试看的态度,我装了一个vmware,没想到啊,真是“山重水复疑无路,柳暗花明又一村”。3516的环境就这样被搭好了!好了,说了这么长时间的废话:总结来说就是如果你的本体是linux,那么你在装window的时候虚拟机要选用vmware,不要用virtualBox(PS:我这里本体用了linux,不是装叉,因为工作的原因导致我毕业之后没就用过window,慢慢也就习惯了linux了)

然后呢,具体搭建环境的过程,社区置顶处有文章介绍,在window为本体,linux做虚拟机的情况下,难度还是要小很多的,所以各位大佬也不用太担心这个过程。

好的,作为这个系列的第一篇,也就是实现这个目标的第一步:我先在3516上做一个遥控器的应用,当然这个应用不追求什么完美,但至少也得能看得过去,所以我自认为我做的还是很认真的,演示视频链接见开头,好不好看,大家可以留言评论一拨儿。

下面进入正题,我们来看C++的应用界面开发:

1.harmonyos的设备开发的图形图像子系统

首先发出来官网该方面资料介绍的链接:https://device.harmonyos.com/cn/docs/develop/subsystems/oem_subsys_graphic_des-0000001051677150#ZH-CN_TOPIC_0000001051770388__section73736284117

HarmonyOS图形系统,提供基础UI组件和容器类组件,包括button、image、label、list、animator、scroll view、swipe view、font、clock、chart、canvas、slider、layout等。

不过呢,目前官网给出的示例还是十分有限的,如果想要按自己的想法去构思应用的话,很明显这些官方的介绍还是远远不够的,下面我给出这部分源码的代码位置:

其中绝大多数的头文件在:foundation/graphic/lite/interfaces/kits/ui/

其实foundation/graphic/就存放了源码中的图形模块,各位大佬可以尽情去相关模块源码中遨游,然后能给我点儿指导也是极好的。

在这里我们先整理一下,目前已经开放的,包括源码中已经有的图形模块可以分为两部分一部分是容器类组件,一部分是普通组件,其中容器类组件有如下图:

普通类组件如下图:

容器类组件:

另外据我目前已有的探索结论是:一个主界面有一个RootView,使用GetWindowRootView来获得,大家可以把它看成一个界面中最大的容器类组件,然后大家就是把界面相关的容器类组件,普通类组件往上堆就可以。当然别的多界面的实现方式应该不同。

2.开始正式该应用的实现过程:

如上图:大家可以看到这个整个界面的布局:其中左上角的小箭头是退出应用的,然后它的右边是一行文字动画,接着往下是两个label来显示当前遥控器的模式和小车的状态,紧接着是两个按钮。接下来是整个SWIPE容器组件,可以滑动来实现界面的切换。

下面就按照这个顺序来介绍:其中重点是小箭头的功能的实现和SWIPE容器组件的实现,别的么,其实不值一提。

2.1 退出应用功能的实现

PS:这个功能的实现,完全没有介绍,完全是自己看着源码琢磨出来的,并且我还发现了源码中这块儿写的有BUG,源码中会有点击不中的情况。

2.1.1 先拿代码把这个图标画出来:

 
 
 
 
  1. static const char* const BACK_ICON_PATH = "/controlCar/assets/entry/resources/base/media/ic_back.png";
  2. static char g_backIconAbsolutePath[MAX_PATH_LENGTH] = {0};
  3. const char* pathHeader = GetSrcPath();
  4. if(sprintf_s(g_backIconAbsolutePath,MAX_PATH_LENGTH,"%s%s",pathHeader,BACK_ICON_PATH) < 0){
  5.     printf("GalleryAbilitySlice::OnStart | g_backIconAbsolutePath error");
  6.     return;
  7. }
  8.     backIcon = new UIImageView();
  9.     backIcon->SetPosition(0, 0);
  10.     backIcon->SetSrc(g_backIconAbsolutePath);
  11.     backIcon->SetTouchable(true);
  12.     backIcon->Resize(40,40);

 2.1.2 实现退出功能

 
 
 
 
  1. auto onClick = [this] (UIView& view, const Event& event) -> bool {
  2.      TerminateAbility();
  3.      return true;
  4.  };
  5.  backIconListener = new EventListener(onClick, nullptr);
  6.  backIcon->SetOnClickListener(backIconListener);

 2.2 字幕滚动

是不是觉得很难,刚开始我也觉得是,然并卵,太TM简单了,只需要调用SetLineBreakMode这个API就可以了,下面是这个组件的实现代码。

 
 
 
 
  1. label_title = new UILabel();
  2.    label_title->SetPosition(280,0);
  3.    label_title->Resize(500,40);
  4.    label_title->SetTextColor(Color::Red());
  5.    label_title->SetText("欢迎各位大佬使用本智能小车遥控器,希望各位大佬能玩的开心!");
  6.    label_title->SetFont("SourceHanSansSC-Regular.otf",30);
  7.    label_title->SetLineBreakMode(UILabel::LINE_BREAK_MARQUEE);

 2.3 显示的两个label和两个button按钮

这个嘛,太简单了,就不解释了,直接来最简单的设置就可以了,见下面代码

 
 
 
 
  1. //设置显示遥控器模式状态label
  2.    label_remote_state = new UILabel();
  3.    label_remote_state->SetPosition(10,40);
  4.    label_remote_state->Resize(300,40);
  5.    label_remote_state->SetTextColor(Color::Green());
  6.    label_remote_state->SetText("当前模式:基础模式");
  7.    label_remote_state->SetFont("SourceHanSansSC-Regular.otf",20);
  8.    //设置label
  9.    label = new UILabel();
  10.    label->SetPosition(300,40);
  11.    label->SetStyle(STYLE_BACKGROUND_COLOR,Color::Gray().full);
  12.    label->Resize(350,40);
  13.    label->SetText("当前小车连接状态:正在检测中...");
  14.    label->SetTextColor(Color::Green());
  15.    label->SetFont("SourceHanSansSC-Regular.otf", 20);
  16.    //设置连接小车按钮
  17.    bt_connect = new UILabelButton();
  18.    bt_connect->SetPosition(700,40,100,40);
  19.    bt_connect->SetTextColor(Color::Green());
  20.    bt_connect->SetText("连接小车");
  21.    //设置断开连接按钮
  22.    bt_disconnect = new UILabelButton();
  23.    bt_disconnect->SetPosition(850,40,100,40);
  24.    bt_disconnect->SetTextColor(Color::Green());
  25.    bt_disconnect->SetText("断开连接");

 2.3 整个SWIPE容器组件的实现

没错,这部分是整个应用实现的最困难处,文档中介绍基本等于没有,整个SWIPE容器实现的技术难点:应该是两点:

  • - 1.设置滑动回调类
  • - 2.在SWIPE使用了GridLayout来实现整个遥控器按钮的设计。

2.3.1 先看如何利用GridLayout来实现遥控器按钮的实现

 
 
 
 
  1. gridlayout = new GridLayout();
  2.  gridlayout->SetPosition(0,0,900,400);
  3.  gridlayout->SetRows(3);
  4.  gridlayout->SetCols(5);
  5.  gridlayout->SetLayoutDirection(LAYOUT_HOR);
  6.  bt_left_one = new UILabelButton();
  7.  bt_left_one->SetPosition(0,0,100,100);
  8.  bt_left_one->SetVisible(false);
  9.  bt_left_up = new UILabelButton();
  10.  bt_left_up->SetPosition(0,0,100,100);
  11.  bt_left_up->SetImageSrc(g_left_upAbsolutePath,g_left_upAbsolutePath);
  12.  bt_left_up->SetImagePosition(0,0);
  13.  bt_left_up->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::White().full,UIButton::RELEASED);
  14.  bt_left_up->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::RELEASED);
  15.  bt_left_up->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::Red().full,UIButton::UIButton::PRESSED);
  16.  bt_left_up->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::UIButton::PRESSED);
  17.  bt_up = new UILabelButton();
  18.  bt_up->SetPosition(0,0,100,100);
  19.  bt_up->SetImageSrc(g_upAbsolutePath,g_upAbsolutePath);
  20.  bt_up->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::White().full,UIButton::RELEASED);
  21.  bt_up->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::RELEASED);
  22.  bt_up->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::Red().full,UIButton::UIButton::PRESSED);
  23.  bt_up->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::UIButton::PRESSED);
  24.  bt_right_up = new UILabelButton();
  25.  bt_right_up->SetPosition(0,0,100,100);
  26.  bt_right_up->SetImageSrc(g_right_upAbsolutePath,g_right_upAbsolutePath);
  27.  bt_right_up->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::White().full,UIButton::RELEASED);
  28.  bt_right_up->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::RELEASED);
  29.  bt_right_up->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::Red().full,UIButton::UIButton::PRESSED);
  30.  bt_right_up->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::UIButton::PRESSED);
  31.  bt_right_one = new UILabelButton();
  32.  bt_right_one->SetPosition(0,0,100,100);
  33.  bt_right_one->SetVisible(false);
  34.  bt_left_two = new UILabelButton();
  35.  bt_left_two->SetPosition(0,0,100,100);
  36.  bt_left_two->SetVisible(false);
  37.  bt_left = new UILabelButton();
  38.  bt_left->SetPosition(0,0,100,100);
  39.  bt_left->SetImageSrc(g_leftAbsolutePath,g_leftAbsolutePath);
  40.  bt_left->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::White().full,UIButton::RELEASED);
  41.  bt_left->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::RELEASED);
  42.  bt_left->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::Red().full,UIButton::UIButton::PRESSED);
  43.  bt_left->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::UIButton::PRESSED);
  44.  bt_stop = new UILabelButton();
  45.  bt_stop->SetPosition(0,0,100,100);
  46.  bt_stop->SetStyle(STYLE_BORDER_RADIUS,0);
  47.  bt_stop->SetImageSrc(g_stopAbsolutePath,g_stopAbsolutePath);
  48.  bt_stop->SetStyle(STYLE_BACKGROUND_COLOR,Color::White().full);
  49.  bt_right = new UILabelButton();
  50.  bt_right->SetPosition(0,0,100,100);
  51.  bt_right->SetImageSrc(g_rightAbsolutePath,g_rightAbsolutePath);
  52.  bt_right->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::White().full,UIButton::RELEASED);
  53.  bt_right->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::RELEASED);
  54.  bt_right->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::Red().full,UIButton::UIButton::PRESSED);
  55.  bt_right->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::UIButton::PRESSED);
  56.  bt_right_two = new UILabelButton();
  57.  bt_right_two->SetPosition(0,0,100,100);
  58.  bt_right_two->SetVisible(false);
  59.  bt_left_three = new UILabelButton();
  60.  bt_left_three->SetPosition(0,0,100,100);
  61.  bt_left_three->SetVisible(false);
  62.  bt_left_down = new UILabelButton();
  63.  bt_left_down->SetPosition(0,0,100,100);
  64.  bt_left_down->SetImageSrc(g_left_downAbsolutePath,g_left_downAbsolutePath);
  65.  bt_left_down->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::White().full,UIButton::RELEASED);
  66.  bt_left_down->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::RELEASED);
  67.  bt_left_down->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::Red().full,UIButton::UIButton::PRESSED);
  68.  bt_left_down->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::UIButton::PRESSED);
  69.  bt_down = new UILabelButton();
  70.  bt_down->SetPosition(0,0,100,100);
  71.  bt_down->SetImageSrc(g_downAbsolutePath,g_downAbsolutePath);
  72.  bt_down->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::White().full,UIButton::RELEASED);
  73.  bt_down->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::RELEASED);
  74.  bt_down->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::Red().full,UIButton::UIButton::PRESSED);
  75.  bt_down->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::UIButton::PRESSED);
  76.  bt_right_down = new UILabelButton();
  77.  bt_right_down->SetPosition(0,0,100,100);
  78.  bt_right_down->SetImageSrc(g_right_downAbsolutePath,g_right_downAbsolutePath);
  79.  bt_right_down->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::White().full,UIButton::RELEASED);
  80.  bt_right_down->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::RELEASED);
  81.  bt_right_down->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::Red().full,UIButton::UIButton::PRESSED);
  82.  bt_right_down->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::UIButton::PRESSED);
  83.  bt_right_three = new UILabelButton();
  84.  bt_right_three->SetPosition(0,0,100,100);
  85.  bt_right_three->SetVisible(false);
  86.  gridlayout->Add(bt_left_one);
  87.  gridlayout->Add(bt_left_up);
  88.  gridlayout->Add(bt_up);
  89.  gridlayout->Add(bt_right_up);
  90.  gridlayout->Add(bt_right_one);
  91.  gridlayout->Add(bt_left_two);
  92.  gridlayout->Add(bt_left);
  93.  gridlayout->Add(bt_stop);
  94.  gridlayout->Add(bt_right);
  95.  gridlayout->Add(bt_right_two);
  96.  gridlayout->Add(bt_left_three);
  97.  gridlayout->Add(bt_left_down);
  98.  gridlayout->Add(bt_down);
  99.  gridlayout->Add(bt_right_down);
  100.  gridlayout->Add(bt_right_three);
  101.  gridlayout->LayoutChildren();  

 大家可以看到这里我其实写了一个很挫的代码,为了布局而用了15个按钮,然后把左右两边给隐藏掉,其实写完之后,回顾的时候,才发现根本不需要这么做,根据现有的布局代码完全可以直接实现。这里我想提一下就是为了实现按钮的点击效果我在源码中找了好久,才测试出了一个比较好用的API:SetStyleForState

2.3.2 设置滑动回调类

首先这个类的原型是:void SetOnSwipeListener(OnSwipeListener& onSwipeListener)

由于之前C++只是拿QT写过一些界面,只接触传函数的,第一次接触这种传类的,所以一开始还是很蒙蔽的。

下面来看具体实现的细节:

 
 
 
 
  1. class mySwipeListener : public UISwipeView::OnSwipeListener{
  2. public: 
  3.     mySwipeListener(UISwipeView* swipe,UILabel* label):
  4.     swipe_(swipe),label_(label){};
  5.     ~mySwipeListener() {};
  6.     virtual void OnSwipe(UISwipeView &view) override
  7.     {
  8.         char buf[10] = {0};
  9.         // sprintf_s(buf,sizeof(buf),".%d.",swipe_->GetCurrentPage() + 1);
  10.         switch(swipe_->GetCurrentPage())
  11.         {
  12.             case 0:label_->SetText("当前模式:基础模式");break;
  13.             case 1:label_->SetText("当前模式:第二种模式");break;
  14.             case 2:label_->SetText("当前模式:第三种模式");break;
  15.             default:
  16.                 label_->SetText("Error");
  17.         }
  18.     }
  19. private:
  20.     UISwipeView* swipe_ { nullptr };
  21.     UILabel* label_ { nullptr };
  22. };
  23.     swipeListener = new mySwipeListener(swipe,label_remote_state);
  24.     swipe->SetOnSwipeListener(swipeListener);

 大家可以看到这种实现是:先继承参数中的那个类实现一个类,在类中去实现它的纯虚函数,这个函数刚好是我们需要实现业务逻辑的。

3.总结

源码部分就说完了,我在附件中会上传完整的源码包和hap包。目前搞这块儿确实资料很少,不过有源码,有什么需要就去源码中去搞.....

这里我算是做了第一步:在3516上写了一个遥控器,接下来就得去思考如何去连接3861智能小车车了。未完待续......

©著作权归作者和HarmonyOS技术社区共同所有,如需转载,请注明出处,否则将追究法律责任。

想了解更多内容,请访问:

和华为官方合作共建的鸿蒙技术社区

https://harmonyos./#zz

网页题目:鸿蒙开发板3516遥控3861智能小车系列(一)C++开发界面应用
URL地址:http://www.csdahua.cn/qtweb/news21/514421.html

网站建设、网络推广公司-快上网,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 快上网