自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

鴻蒙開發(fā)板3516遙控3861智能小車系列(一)C++開發(fā)界面應(yīng)用

作者：Mr_qzk
開發(fā)
文章由鴻蒙社區(qū)產(chǎn)出，想要了解更多內(nèi)容請前往：51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)https://harmonyos.51cto.com/#zz

[[379806]]

 想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#zz

老規(guī)矩先上該應(yīng)用的演示視頻：https://harmonyos.51cto.com/show/3006

首先立flag：用3516做一款獨一無二的遙控器，然后用這款遙控器去盡情的操縱3861這款智能小車。第一呢，肯定不能做的太粗糙了，打工人也要有點兒追求的。第二呢，圍繞著源碼，發(fā)現(xiàn)一些更多的好東西，比如這次C++界面開發(fā)中大多數(shù)API，官方是暫未給出的，這就需要是我去摸索源碼。其中最重要的一點，我想看看能否在3516和3861組成局域網(wǎng)之后，能否利用分布式軟總線能力去調(diào)用(當(dāng)然，這個可能會吹牛，畢竟釗哥說他目前還沒調(diào)通)。

flag立完了，這個能不能實現(xiàn).....我盡力吧！

首先呢，大家得搭好3516的環(huán)境，我最近之所以鴿了這么長時間沒有發(fā)文章。也有一部分這個原因，因為我本身用的系統(tǒng)是ubuntu20.04，然后在其上搭windows虛擬機來燒系統(tǒng)以及刷應(yīng)用。我在這個過程中是“編代碼3分鐘，刷系統(tǒng)3天”，這里我也分享一下我遇到的坑，如果大家也有我這種環(huán)境配置的話，希望可以幫助到大家。最開始的時候，我是用的virtualBox虛擬機來搭的windows，這個windows來玩3861的時候別提多順暢了，當(dāng)我以為3516也會一樣順暢的時候，我發(fā)現(xiàn)我錯了，裝上3516的驅(qū)動后，我的windows開始了無限自動重啟模式，我在嘗試著修復(fù)無果后，一度想著放棄....但是作為一名合格的碼農(nóng)，怎么能隨便放棄呢!然后抱著試試看的態(tài)度，我裝了一個vmware，沒想到啊，真是“山重水復(fù)疑無路，柳暗花明又一村”。3516的環(huán)境就這樣被搭好了!好了，說了這么長時間的廢話：總結(jié)來說就是如果你的本體是linux，那么你在裝window的時候虛擬機要選用vmware，不要用virtualBox(PS:我這里本體用了linux，不是裝叉，因為工作的原因?qū)е挛耶厴I(yè)之后沒就用過window,慢慢也就習(xí)慣了linux了)

然后呢，具體搭建環(huán)境的過程，社區(qū)置頂處有文章介紹，在window為本體，linux做虛擬機的情況下，難度還是要小很多的，所以各位大佬也不用太擔(dān)心這個過程。

好的，作為這個系列的第一篇，也就是實現(xiàn)這個目標(biāo)的第一步：我先在3516上做一個遙控器的應(yīng)用，當(dāng)然這個應(yīng)用不追求什么完美，但至少也得能看得過去，所以我自認(rèn)為我做的還是很認(rèn)真的，演示視頻鏈接見開頭，好不好看，大家可以留言評論一撥兒。

下面進(jìn)入正題，我們來看C++的應(yīng)用界面開發(fā)：

1.harmonyos的設(shè)備開發(fā)的圖形圖像子系統(tǒng)

首先發(fā)出來官網(wǎng)該方面資料介紹的鏈接：https://device.harmonyos.com/cn/docs/develop/subsystems/oem_subsys_graphic_des-0000001051677150#ZH-CN_TOPIC_0000001051770388__section73736284117

HarmonyOS圖形系統(tǒng)，提供基礎(chǔ)UI組件和容器類組件，包括button、image、label、list、animator、scroll view、swipe view、font、clock、chart、canvas、slider、layout等。

不過呢，目前官網(wǎng)給出的示例還是十分有限的，如果想要按自己的想法去構(gòu)思應(yīng)用的話，很明顯這些官方的介紹還是遠(yuǎn)遠(yuǎn)不夠的，下面我給出這部分源碼的代碼位置：

其中絕大多數(shù)的頭文件在：foundation/graphic/lite/interfaces/kits/ui/

其實foundation/graphic/就存放了源碼中的圖形模塊，各位大佬可以盡情去相關(guān)模塊源碼中遨游，然后能給我點兒指導(dǎo)也是極好的。

在這里我們先整理一下，目前已經(jīng)開放的，包括源碼中已經(jīng)有的圖形模塊可以分為兩部分一部分是容器類組件，一部分是普通組件，其中容器類組件有如下圖：

普通類組件如下圖：

容器類組件：


另外據(jù)我目前已有的探索結(jié)論是：一個主界面有一個RootView，使用GetWindowRootView來獲得，大家可以把它看成一個界面中最大的容器類組件，然后大家就是把界面相關(guān)的容器類組件，普通類組件往上堆就可以。當(dāng)然別的多界面的實現(xiàn)方式應(yīng)該不同。

2.開始正式該應(yīng)用的實現(xiàn)過程：


如上圖：大家可以看到這個整個界面的布局：其中左上角的小箭頭是退出應(yīng)用的，然后它的右邊是一行文字動畫，接著往下是兩個label來顯示當(dāng)前遙控器的模式和小車的狀態(tài)，緊接著是兩個按鈕。接下來是整個SWIPE容器組件，可以滑動來實現(xiàn)界面的切換。

下面就按照這個順序來介紹：其中重點是小箭頭的功能的實現(xiàn)和SWIPE容器組件的實現(xiàn)，別的么，其實不值一提。

2.1 退出應(yīng)用功能的實現(xiàn)

PS：這個功能的實現(xiàn)，完全沒有介紹，完全是自己看著源碼琢磨出來的，并且我還發(fā)現(xiàn)了源碼中這塊兒寫的有BUG，源碼中會有點擊不中的情況。

2.1.1 先拿代碼把這個圖標(biāo)畫出來：

  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 實現(xiàn)退出功能

  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簡單了,只需要調(diào)用SetLineBreakMode這個API就可以了，下面是這個組件的實現(xiàn)代碼。

  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按鈕

這個嘛，太簡單了，就不解釋了，直接來最簡單的設(shè)置就可以了，見下面代碼

  1. //設(shè)置顯示遙控器模式狀態(tài)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("當(dāng)前模式：基礎(chǔ)模式"); 
  7.    label_remote_state->SetFont("SourceHanSansSC-Regular.otf",20); 
  8.  
  9.    //設(shè)置label 
  10.    label = new UILabel(); 
  11.    label->SetPosition(300,40); 
  12.    label->SetStyle(STYLE_BACKGROUND_COLOR,Color::Gray().full); 
  13.    label->Resize(350,40); 
  14.    label->SetText("當(dāng)前小車連接狀態(tài)：正在檢測中..."); 
  15.    label->SetTextColor(Color::Green()); 
  16.    label->SetFont("SourceHanSansSC-Regular.otf", 20); 
  17.  
  18.    //設(shè)置連接小車按鈕 
  19.    bt_connect = new UILabelButton(); 
  20.    bt_connect->SetPosition(700,40,100,40); 
  21.    bt_connect->SetTextColor(Color::Green()); 
  22.    bt_connect->SetText("連接小車"); 
  23.  
  24.    //設(shè)置斷開連接按鈕 
  25.    bt_disconnect = new UILabelButton(); 
  26.    bt_disconnect->SetPosition(850,40,100,40); 
  27.    bt_disconnect->SetTextColor(Color::Green()); 
  28.    bt_disconnect->SetText("斷開連接"); 

 2.3 整個SWIPE容器組件的實現(xiàn)

沒錯，這部分是整個應(yīng)用實現(xiàn)的最困難處，文檔中介紹基本等于沒有，整個SWIPE容器實現(xiàn)的技術(shù)難點：應(yīng)該是兩點：

  • - 1.設(shè)置滑動回調(diào)類
  • - 2.在SWIPE使用了GridLayout來實現(xiàn)整個遙控器按鈕的設(shè)計。

2.3.1 先看如何利用GridLayout來實現(xiàn)遙控器按鈕的實現(xiàn)

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

 大家可以看到這里我其實寫了一個很挫的代碼，為了布局而用了15個按鈕，然后把左右兩邊給隱藏掉，其實寫完之后，回顧的時候，才發(fā)現(xiàn)根本不需要這么做，根據(jù)現(xiàn)有的布局代碼完全可以直接實現(xiàn)。這里我想提一下就是為了實現(xiàn)按鈕的點擊效果我在源碼中找了好久，才測試出了一個比較好用的API：SetStyleForState

2.3.2 設(shè)置滑動回調(diào)類

首先這個類的原型是：void SetOnSwipeListener(OnSwipeListener& onSwipeListener)

由于之前C++只是拿QT寫過一些界面，只接觸傳函數(shù)的，第一次接觸這種傳類的，所以一開始還是很蒙蔽的。

下面來看具體實現(xiàn)的細(xì)節(jié)：

  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("當(dāng)前模式：基礎(chǔ)模式");break; 
  13.             case 1:label_->SetText("當(dāng)前模式：第二種模式");break; 
  14.             case 2:label_->SetText("當(dāng)前模式：第三種模式");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); 

 大家可以看到這種實現(xiàn)是：先繼承參數(shù)中的那個類實現(xiàn)一個類，在類中去實現(xiàn)它的純虛函數(shù)，這個函數(shù)剛好是我們需要實現(xiàn)業(yè)務(wù)邏輯的。

3.總結(jié)

源碼部分就說完了，我在附件中會上傳完整的源碼包和hap包。目前搞這塊兒確實資料很少，不過有源碼，有什么需要就去源碼中去搞.....

這里我算是做了第一步：在3516上寫了一個遙控器，接下來就得去思考如何去連接3861智能小車車了。未完待續(xù)......

©著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請注明出處，否則將追究法律責(zé)任。

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#zz

 

責(zé)任編輯：jianghua 來源： 鴻蒙社區(qū)
鴻蒙HarmonyOS應(yīng)用開發(fā)
相關(guān)推薦

2021-12-15 15:28:18

鴻蒙HarmonyOS應(yīng)用

2022-06-28 14:30:29

camera組件照片回傳

2021-12-30 16:12:07

鴻蒙HarmonyOS應(yīng)用

2020-12-17 10:02:16

鴻蒙Hi3861開發(fā)板

2020-12-29 09:59:01

鴻蒙HarmonyOS智能家居

2021-12-29 16:13:03

鴻蒙HarmonyOS應(yīng)用

2021-05-25 14:47:43

鴻蒙HarmonyOS應(yīng)用

2021-08-17 14:40:43

鴻蒙HarmonyOS應(yīng)用

2022-10-25 14:51:11

設(shè)備開發(fā)鴻蒙

2020-10-30 17:12:05

Hi3861

2021-06-25 09:28:46

鴻蒙HarmonyOS應(yīng)用

2020-12-15 11:57:49

Hi3861 HarmonyOS開發(fā)板

2020-12-16 10:05:48

鴻蒙開發(fā)板Onenet平臺

2020-11-06 10:15:16

HiBurn

2020-10-30 09:48:03

Hi3861開發(fā)板get請求

2020-10-14 09:37:03

HiBurn鴻蒙.bin文件

2021-12-20 21:01:52

鴻蒙HarmonyOS應(yīng)用

2022-01-05 20:27:45

鴻蒙HarmonyOS應(yīng)用

2021-09-16 10:03:39

鴻蒙HarmonyOS應(yīng)用

2021-06-25 15:32:13

鴻蒙HarmonyOS應(yīng)用
點贊
收藏

51CTO技術(shù)棧公眾號