建站
咨詢
售后
建站咨詢
新聞中心
想了解更多內(nèi)容，請(qǐng)?jiān)L問：
在南山等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都全網(wǎng)營銷,外貿(mào)網(wǎng)站制作,南山網(wǎng)站建設(shè)費(fèi)用合理。
和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos./#zz
老規(guī)矩先上該應(yīng)用的演示視頻：https://harmonyos./show/3006
首先立flag：用3516做一款獨(dú)一無二的遙控器，然后用這款遙控器去盡情的操縱3861這款智能小車。第一呢，肯定不能做的太粗糙了，打工人也要有點(diǎn)兒追求的。第二呢，圍繞著源碼，發(fā)現(xiàn)一些更多的好東西，比如這次C++界面開發(fā)中大多數(shù)API，官方是暫未給出的，這就需要是我去摸索源碼。其中最重要的一點(diǎn)，我想看看能否在3516和3861組成局域網(wǎng)之后，能否利用分布式軟總線能力去調(diào)用(當(dāng)然，這個(gè)可能會(huì)吹牛，畢竟釗哥說他目前還沒調(diào)通)。
flag立完了，這個(gè)能不能實(shí)現(xiàn).....我盡力吧！
首先呢，大家得搭好3516的環(huán)境，我最近之所以鴿了這么長(zhǎng)時(shí)間沒有發(fā)文章。也有一部分這個(gè)原因，因?yàn)槲冶旧碛玫南到y(tǒng)是ubuntu20.04，然后在其上搭windows虛擬機(jī)來燒系統(tǒng)以及刷應(yīng)用。我在這個(gè)過程中是“編代碼3分鐘，刷系統(tǒng)3天”，這里我也分享一下我遇到的坑，如果大家也有我這種環(huán)境配置的話，希望可以幫助到大家。最開始的時(shí)候，我是用的virtualBox虛擬機(jī)來搭的windows，這個(gè)windows來玩3861的時(shí)候別提多順暢了，當(dāng)我以為3516也會(huì)一樣順暢的時(shí)候，我發(fā)現(xiàn)我錯(cuò)了，裝上3516的驅(qū)動(dòng)后，我的windows開始了無限自動(dòng)重啟模式，我在嘗試著修復(fù)無果后，一度想著放棄....但是作為一名合格的碼農(nóng)，怎么能隨便放棄呢!然后抱著試試看的態(tài)度，我裝了一個(gè)vmware，沒想到啊，真是“山重水復(fù)疑無路，柳暗花明又一村”。3516的環(huán)境就這樣被搭好了!好了，說了這么長(zhǎng)時(shí)間的廢話：總結(jié)來說就是如果你的本體是linux，那么你在裝window的時(shí)候虛擬機(jī)要選用vmware，不要用virtualBox(PS:我這里本體用了linux，不是裝叉，因?yàn)楣ぷ鞯脑驅(qū)е挛耶厴I(yè)之后沒就用過window,慢慢也就習(xí)慣了linux了)
然后呢，具體搭建環(huán)境的過程，社區(qū)置頂處有文章介紹，在window為本體，linux做虛擬機(jī)的情況下，難度還是要小很多的，所以各位大佬也不用太擔(dān)心這個(gè)過程。
好的，作為這個(gè)系列的第一篇，也就是實(shí)現(xiàn)這個(gè)目標(biāo)的第一步：我先在3516上做一個(gè)遙控器的應(yīng)用，當(dāng)然這個(gè)應(yīng)用不追求什么完美，但至少也得能看得過去，所以我自認(rèn)為我做的還是很認(rèn)真的，演示視頻鏈接見開頭，好不好看，大家可以留言評(píng)論一撥兒。
下面進(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/
其實(shí)foundation/graphic/就存放了源碼中的圖形模塊，各位大佬可以盡情去相關(guān)模塊源碼中遨游，然后能給我點(diǎn)兒指導(dǎo)也是極好的。
在這里我們先整理一下，目前已經(jīng)開放的，包括源碼中已經(jīng)有的圖形模塊可以分為兩部分一部分是容器類組件，一部分是普通組件，其中容器類組件有如下圖：
普通類組件如下圖：
容器類組件：
另外據(jù)我目前已有的探索結(jié)論是：一個(gè)主界面有一個(gè)RootView，使用GetWindowRootView來獲得，大家可以把它看成一個(gè)界面中最大的容器類組件，然后大家就是把界面相關(guān)的容器類組件，普通類組件往上堆就可以。當(dāng)然別的多界面的實(shí)現(xiàn)方式應(yīng)該不同。
2.開始正式該應(yīng)用的實(shí)現(xiàn)過程：
如上圖：大家可以看到這個(gè)整個(gè)界面的布局：其中左上角的小箭頭是退出應(yīng)用的，然后它的右邊是一行文字動(dòng)畫，接著往下是兩個(gè)label來顯示當(dāng)前遙控器的模式和小車的狀態(tài)，緊接著是兩個(gè)按鈕。接下來是整個(gè)SWIPE容器組件，可以滑動(dòng)來實(shí)現(xiàn)界面的切換。
下面就按照這個(gè)順序來介紹：其中重點(diǎn)是小箭頭的功能的實(shí)現(xiàn)和SWIPE容器組件的實(shí)現(xiàn)，別的么，其實(shí)不值一提。
2.1 退出應(yīng)用功能的實(shí)現(xiàn)
PS：這個(gè)功能的實(shí)現(xiàn)，完全沒有介紹，完全是自己看著源碼琢磨出來的，并且我還發(fā)現(xiàn)了源碼中這塊兒寫的有BUG，源碼中會(huì)有點(diǎn)擊不中的情況。
2.1.1 先拿代碼把這個(gè)圖標(biāo)畫出來：
- static const char* const BACK_ICON_PATH = "/controlCar/assets/entry/resources/base/media/ic_back.png";
- static char g_backIconAbsolutePath[MAX_PATH_LENGTH] = {0};
- const char* pathHeader = GetSrcPath();
- if(sprintf_s(g_backIconAbsolutePath,MAX_PATH_LENGTH,"%s%s",pathHeader,BACK_ICON_PATH) < 0){
- printf("GalleryAbilitySlice::OnStart | g_backIconAbsolutePath error");
- return;
- }
- backIcon = new UIImageView();
- backIcon->SetPosition(0, 0);
- backIcon->SetSrc(g_backIconAbsolutePath);
- backIcon->SetTouchable(true);
- backIcon->Resize(40,40);
2.1.2 實(shí)現(xiàn)退出功能
- auto onClick = [this] (UIView& view, const Event& event) -> bool {
- TerminateAbility();
- return true;
- };
- backIconListener = new EventListener(onClick, nullptr);
- backIcon->SetOnClickListener(backIconListener);
2.2 字幕滾動(dòng)
是不是覺得很難，剛開始我也覺得是，然并卵，太TM簡(jiǎn)單了,只需要調(diào)用SetLineBreakMode這個(gè)API就可以了，下面是這個(gè)組件的實(shí)現(xiàn)代碼。
- label_title = new UILabel();
- label_title->SetPosition(280,0);
- label_title->Resize(500,40);
- label_title->SetTextColor(Color::Red());
- label_title->SetText("歡迎各位大佬使用本智能小車遙控器，希望各位大佬能玩的開心！");
- label_title->SetFont("SourceHanSansSC-Regular.otf",30);
- label_title->SetLineBreakMode(UILabel::LINE_BREAK_MARQUEE);
2.3 顯示的兩個(gè)label和兩個(gè)button按鈕
這個(gè)嘛，太簡(jiǎn)單了，就不解釋了，直接來最簡(jiǎn)單的設(shè)置就可以了，見下面代碼
- //設(shè)置顯示遙控器模式狀態(tài)label
- label_remote_state = new UILabel();
- label_remote_state->SetPosition(10,40);
- label_remote_state->Resize(300,40);
- label_remote_state->SetTextColor(Color::Green());
- label_remote_state->SetText("當(dāng)前模式：基礎(chǔ)模式");
- label_remote_state->SetFont("SourceHanSansSC-Regular.otf",20);
- //設(shè)置label
- label = new UILabel();
- label->SetPosition(300,40);
- label->SetStyle(STYLE_BACKGROUND_COLOR,Color::Gray().full);
- label->Resize(350,40);
- label->SetText("當(dāng)前小車連接狀態(tài)：正在檢測(cè)中...");
- label->SetTextColor(Color::Green());
- label->SetFont("SourceHanSansSC-Regular.otf", 20);
- //設(shè)置連接小車按鈕
- bt_connect = new UILabelButton();
- bt_connect->SetPosition(700,40,100,40);
- bt_connect->SetTextColor(Color::Green());
- bt_connect->SetText("連接小車");
- //設(shè)置斷開連接按鈕
- bt_disconnect = new UILabelButton();
- bt_disconnect->SetPosition(850,40,100,40);
- bt_disconnect->SetTextColor(Color::Green());
- bt_disconnect->SetText("斷開連接");
2.3 整個(gè)SWIPE容器組件的實(shí)現(xiàn)
沒錯(cuò)，這部分是整個(gè)應(yīng)用實(shí)現(xiàn)的最困難處，文檔中介紹基本等于沒有，整個(gè)SWIPE容器實(shí)現(xiàn)的技術(shù)難點(diǎn)：應(yīng)該是兩點(diǎn)：
- - 1.設(shè)置滑動(dòng)回調(diào)類
- - 2.在SWIPE使用了GridLayout來實(shí)現(xiàn)整個(gè)遙控器按鈕的設(shè)計(jì)。
2.3.1 先看如何利用GridLayout來實(shí)現(xiàn)遙控器按鈕的實(shí)現(xiàn)
- gridlayout = new GridLayout();
- gridlayout->SetPosition(0,0,900,400);
- gridlayout->SetRows(3);
- gridlayout->SetCols(5);
- gridlayout->SetLayoutDirection(LAYOUT_HOR);
- bt_left_one = new UILabelButton();
- bt_left_one->SetPosition(0,0,100,100);
- bt_left_one->SetVisible(false);
- bt_left_up = new UILabelButton();
- bt_left_up->SetPosition(0,0,100,100);
- bt_left_up->SetImageSrc(g_left_upAbsolutePath,g_left_upAbsolutePath);
- bt_left_up->SetImagePosition(0,0);
- bt_left_up->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::White().full,UIButton::RELEASED);
- bt_left_up->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::RELEASED);
- bt_left_up->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::Red().full,UIButton::UIButton::PRESSED);
- bt_left_up->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::UIButton::PRESSED);
- bt_up = new UILabelButton();
- bt_up->SetPosition(0,0,100,100);
- bt_up->SetImageSrc(g_upAbsolutePath,g_upAbsolutePath);
- bt_up->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::White().full,UIButton::RELEASED);
- bt_up->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::RELEASED);
- bt_up->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::Red().full,UIButton::UIButton::PRESSED);
- bt_up->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::UIButton::PRESSED);
- bt_right_up = new UILabelButton();
- bt_right_up->SetPosition(0,0,100,100);
- bt_right_up->SetImageSrc(g_right_upAbsolutePath,g_right_upAbsolutePath);
- bt_right_up->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::White().full,UIButton::RELEASED);
- bt_right_up->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::RELEASED);
- bt_right_up->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::Red().full,UIButton::UIButton::PRESSED);
- bt_right_up->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::UIButton::PRESSED);
- bt_right_one = new UILabelButton();
- bt_right_one->SetPosition(0,0,100,100);
- bt_right_one->SetVisible(false);
- bt_left_two = new UILabelButton();
- bt_left_two->SetPosition(0,0,100,100);
- bt_left_two->SetVisible(false);
- bt_left = new UILabelButton();
- bt_left->SetPosition(0,0,100,100);
- bt_left->SetImageSrc(g_leftAbsolutePath,g_leftAbsolutePath);
- bt_left->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::White().full,UIButton::RELEASED);
- bt_left->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::RELEASED);
- bt_left->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::Red().full,UIButton::UIButton::PRESSED);
- bt_left->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::UIButton::PRESSED);
- bt_stop = new UILabelButton();
- bt_stop->SetPosition(0,0,100,100);
- bt_stop->SetStyle(STYLE_BORDER_RADIUS,0);
- bt_stop->SetImageSrc(g_stopAbsolutePath,g_stopAbsolutePath);
- bt_stop->SetStyle(STYLE_BACKGROUND_COLOR,Color::White().full);
- bt_right = new UILabelButton();
- bt_right->SetPosition(0,0,100,100);
- bt_right->SetImageSrc(g_rightAbsolutePath,g_rightAbsolutePath);
- bt_right->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::White().full,UIButton::RELEASED);
- bt_right->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::RELEASED);
- bt_right->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::Red().full,UIButton::UIButton::PRESSED);
- bt_right->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::UIButton::PRESSED);
- bt_right_two = new UILabelButton();
- bt_right_two->SetPosition(0,0,100,100);
- bt_right_two->SetVisible(false);
- bt_left_three = new UILabelButton();
- bt_left_three->SetPosition(0,0,100,100);
- bt_left_three->SetVisible(false);
- bt_left_down = new UILabelButton();
- bt_left_down->SetPosition(0,0,100,100);
- bt_left_down->SetImageSrc(g_left_downAbsolutePath,g_left_downAbsolutePath);
- bt_left_down->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::White().full,UIButton::RELEASED);
- bt_left_down->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::RELEASED);
- bt_left_down->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::Red().full,UIButton::UIButton::PRESSED);
- bt_left_down->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::UIButton::PRESSED);
- bt_down = new UILabelButton();
- bt_down->SetPosition(0,0,100,100);
- bt_down->SetImageSrc(g_downAbsolutePath,g_downAbsolutePath);
- bt_down->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::White().full,UIButton::RELEASED);
- bt_down->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::RELEASED);
- bt_down->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::Red().full,UIButton::UIButton::PRESSED);
- bt_down->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::UIButton::PRESSED);
- bt_right_down = new UILabelButton();
- bt_right_down->SetPosition(0,0,100,100);
- bt_right_down->SetImageSrc(g_right_downAbsolutePath,g_right_downAbsolutePath);
- bt_right_down->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::White().full,UIButton::RELEASED);
- bt_right_down->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::RELEASED);
- bt_right_down->SetStyleForState(STYLE_BACKGROUND_COLOR,Color::Red().full,UIButton::UIButton::PRESSED);
- bt_right_down->SetStyleForState(STYLE_BORDER_RADIUS,0,UIButton::UIButton::PRESSED);
- bt_right_three = new UILabelButton();
- bt_right_three->SetPosition(0,0,100,100);
- bt_right_three->SetVisible(false);
- gridlayout->Add(bt_left_one);
- gridlayout->Add(bt_left_up);
- gridlayout->Add(bt_up);
- gridlayout->Add(bt_right_up);
- gridlayout->Add(bt_right_one);
- gridlayout->Add(bt_left_two);
- gridlayout->Add(bt_left);
- gridlayout->Add(bt_stop);
- gridlayout->Add(bt_right);
- gridlayout->Add(bt_right_two);
- gridlayout->Add(bt_left_three);
- gridlayout->Add(bt_left_down);
- gridlayout->Add(bt_down);
- gridlayout->Add(bt_right_down);
- gridlayout->Add(bt_right_three);
- gridlayout->LayoutChildren();
大家可以看到這里我其實(shí)寫了一個(gè)很挫的代碼，為了布局而用了15個(gè)按鈕，然后把左右兩邊給隱藏掉，其實(shí)寫完之后，回顧的時(shí)候，才發(fā)現(xiàn)根本不需要這么做，根據(jù)現(xiàn)有的布局代碼完全可以直接實(shí)現(xiàn)。這里我想提一下就是為了實(shí)現(xiàn)按鈕的點(diǎn)擊效果我在源碼中找了好久，才測(cè)試出了一個(gè)比較好用的API：SetStyleForState
2.3.2 設(shè)置滑動(dòng)回調(diào)類
首先這個(gè)類的原型是：void SetOnSwipeListener(OnSwipeListener& onSwipeListener)
由于之前C++只是拿QT寫過一些界面，只接觸傳函數(shù)的，第一次接觸這種傳類的，所以一開始還是很蒙蔽的。
下面來看具體實(shí)現(xiàn)的細(xì)節(jié)：
- class mySwipeListener : public UISwipeView::OnSwipeListener{
- public:
- mySwipeListener(UISwipeView* swipe,UILabel* label):
- swipe_(swipe),label_(label){};
- ~mySwipeListener() {};
- virtual void OnSwipe(UISwipeView &view) override
- {
- char buf[10] = {0};
- // sprintf_s(buf,sizeof(buf),".%d.",swipe_->GetCurrentPage() + 1);
- switch(swipe_->GetCurrentPage())
- {
- case 0:label_->SetText("當(dāng)前模式：基礎(chǔ)模式");break;
- case 1:label_->SetText("當(dāng)前模式：第二種模式");break;
- case 2:label_->SetText("當(dāng)前模式：第三種模式");break;
- default:
- label_->SetText("Error");
- }
- }
- private:
- UISwipeView* swipe_ { nullptr };
- UILabel* label_ { nullptr };
- };
- swipeListener = new mySwipeListener(swipe,label_remote_state);
- swipe->SetOnSwipeListener(swipeListener);
大家可以看到這種實(shí)現(xiàn)是：先繼承參數(shù)中的那個(gè)類實(shí)現(xiàn)一個(gè)類，在類中去實(shí)現(xiàn)它的純虛函數(shù)，這個(gè)函數(shù)剛好是我們需要實(shí)現(xiàn)業(yè)務(wù)邏輯的。
3.總結(jié)
源碼部分就說完了，我在附件中會(huì)上傳完整的源碼包和hap包。目前搞這塊兒確實(shí)資料很少，不過有源碼，有什么需要就去源碼中去搞.....
這里我算是做了第一步：在3516上寫了一個(gè)遙控器，接下來就得去思考如何去連接3861智能小車車了。未完待續(xù)......
?著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請(qǐng)注明出處，否則將追究法律責(zé)任。
想了解更多內(nèi)容，請(qǐng)?jiān)L問：
和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos./#zz
網(wǎng)頁題目：鴻蒙開發(fā)板3516遙控3861智能小車系列(一)C++開發(fā)界面應(yīng)用
文章網(wǎng)址：http://www.dlmjj.cn/article/dhdieig.html
