51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
短视频免费课程课程排行直播课软考学堂
全部课程厂商认证IT技术25年5月软考PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
账号设置 退出

HarmonyOS Java通用组件

作者：奶盖
开发 前端 OpenHarmony
本篇Codelab旨在让开发者了解HarmonyOS应用开发常用布局和常用组件的使用方法，体验从工程创建到代码、布局的编写，再到编译构建、部署和运行的全过程。

[[406632]]

想了解更多内容，请访问：

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

https://harmonyos.51cto.com

1. 介绍

本篇Codelab目的

本篇Codelab旨在让开发者了解HarmonyOS应用开发常用布局和常用组件的使用方法，体验从工程创建到代码、布局的编写，再到编译构建、部署和运行的全过程。

您将会学到什么

  • 如何创建一个HarmonyOS Project并添加页面布局
  • 如何使用DirectionalLayout、DependentLayout、StackLayout、TableLayout等常用布局
  • 如何使用TabList、ListContainer、DatePicker、RadioContainer、Checkbox等常用组件

硬件要求

  • 操作系统：Windows10 64位
  • 内存：8G及以上
  • 硬盘：100G及以上
  • 分辨率：1280*800像素及以上

软件要求

  • 安装DevEco Studio，详情请参考DevEco Studio下载。
  • 设置Huawei DevEco Studio开发环境，Huawei DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境
  1. 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作
  2. 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境

说明

如需要在手机中运行程序，则需要提前生成秘钥和申请证书，如使用模拟器可忽略

  • 生成秘钥和申请证书，详情请参考准备签名文件

技能要求

  1. Java基础开发能力
  2. XML布局文件编写能力

2. 下载Codelab起步应用

  • 获取Codelab起步应用ComponentCodelab，可从gitee源码或github源码下载
  • 打开HUAWEI DevEco Studio，点击File > Open选择步骤1中下载的ComponentCodelab
  • 点击Build > Build App(s)/Hap(s)>**Build Debug Hap(s)**构建hap包
  • 点击**Run> Run ‘entry’**运行hap包，可看到运行效果如下：
HarmonyOS JAVA通用组件-鸿蒙HarmonyOS技术社区

说明

此应用在模拟器或者真机上都可以运行。如果在真机上运行，则需要先在工程的File > Project Structure>Modules>Signing Configs中配置签名和证书信息。

3. 体验TabList和Tab组件

Tablist可以实现多个页签栏的切换，Tab为某个页签。子页签通常放在内容区上方，展示不同的分类。页签名称应该简洁明了，清晰描述分类的内容。TabList和Tab组件的使用方法详见常用组件开发指导。

编写布局文件

在src/main/resources/base/layout目录下新建布局文件tab_list.xml，此布局文件中主要使用Tablist组件，并设置其样式。

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <DirectionalLayout  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"  
  4.     ohos:width="match_parent"  
  5.     ohos:height="match_parent"  
  6.     ohos:top_margin="15vp"  
  7.     ohos:orientation="vertical">  
  8.     <TabList  
  9.         ohos:id="$+id:tab_list"  
  10.         ohos:top_margin="10vp"  
  11.         ohos:tab_margin="24vp"  
  12.         ohos:tab_length="140vp"  
  13.         ohos:text_size="20fp"  
  14.         ohos:height="36vp"  
  15.         ohos:width="match_parent"  
  16.         ohos:layout_alignment="center"  
  17.         ohos:orientation="horizontal"  
  18.         ohos:text_alignment="center"  
  19.         ohos:normal_text_color="#999999"  
  20.         ohos:selected_text_color="#afaafa"  
  21.         ohos:selected_tab_indicator_color="#afaafa"  
  22.         ohos:selected_tab_indicator_height="2vp"/>  
  23.     <Text  
  24.         ohos:id="$+id:tab_content"  
  25.         ohos:width="match_parent"  
  26.         ohos:height="match_parent"  
  27.         ohos:text_alignment="center"  
  28.         ohos:background_element="#70dbdb"  
  29.         ohos:text_color="#2e2e2e"  
  30.         ohos:text_size="16fp"/>  
  31. </DirectionalLayout> 

编写AbilitySlice文件

在src/main/java/com/huawei/codelab/slice目录下新建TabListSlice.java文件，继承AbilitySlice。

定义成员变量，加载布局：

  1. private TabList tabList;  
  2. private Text tabContent;  
  3.   
  4. @Override  
  5. public void onStart(Intent intent) {  
  6.     super.onStart(intent);  
  7.     super.setUIContent(ResourceTable.Layout_tab_list);  
  8.     initComponent();  
  9.     addTabSelectedListener();  
  10. } 

初始化组件：

  1. private void initComponent() {  
  2.     tabContent = (Text) findComponentById(ResourceTable.Id_tab_content);  
  3.     tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);  
  4.     initTab();  
  5. }  
  6.   
  7. private void initTab() {  
  8.     if (tabList.getTabCount() == 0) {  
  9.         tabList.addTab(createTab("Image"));  
  10.         tabList.addTab(createTab("Video"));  
  11.         tabList.addTab(createTab("Audio"));  
  12.         tabList.setFixedMode(true);  
  13.         tabList.getTabAt(0).select();  
  14.         tabContent.setText("Select the " + tabList.getTabAt(0).getText());  
  15.     }  
  16. }  
  17.   
  18. private TabList.Tab createTab(String text) {  
  19.     TabList.Tab tab = tabList.new Tab(this);  
  20.     tab.setText(text);  
  21.     tab.setMinWidth(64);  
  22.     tab.setPadding(12, 0, 12, 0);  
  23.     return tab;  
  24. } 

绑定点击事件：

  1. private void addTabSelectedListener() {  
  2.     tabList.addTabSelectedListener(new TabList.TabSelectedListener() {  
  3.         @Override  
  4.         public void onSelected(TabList.Tab tab) {  
  5.             tabContent.setText("Select the " + tab.getText());  
  6.         }  
  7.   
  8.         @Override  
  9.         public void onUnselected(TabList.Tab tab) {  
  10.         }  
  11.   
  12.         @Override  
  13.         public void onReselected(TabList.Tab tab) {  
  14.         }  
  15.     });  
  16. } 

关联主页跳转

在src/main/java/com/huawei/codelab/slice/MainAbilitySlice.java的onClick方法中增加关联跳转。

  1. @Override  
  2. public void onClick(Component component) {  
  3.     String className = "";  
  4.     switch (component.getId()) {  
  5.         case ResourceTable.Id_tab_list:  
  6.             className = "com.huawei.codelab.slice.TabListSlice";  
  7.             break;  
  8.         default:  
  9.             break;  
  10.     }  
  11.     abilitySliceJump(className);  
  12. } 

运行程序

点击**Run> Run ‘entry’**运行hap包，进入到程序主页，点击主页的TabList and Tab即可看到TabList页面，点击页面上方不同的Tab，页面内容将同步变化。效果如下所示

4. 体验ListContainer组件

ListContainer是用来呈现连续、多行数据的组件，包含一系列相同类型的列表项。ListContainer组件的使用方法详见常用组件开发指导。在本章节，我们将利用ListContainer组件编写一个新闻首页界面，上方的新闻类别和中间的新闻列表都将使用ListContainer组件来实现。

编写布局文件

在src/main/resources/base/layout目录下新建布局文件news_list_layout.xml作为新闻列表主界面，并设置其样式。

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <DirectionalLayout  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"  
  4.     ohos:height="match_parent"  
  5.     ohos:width="match_parent"  
  6.     ohos:orientation="vertical">  
  7.     <ListContainer  
  8.         ohos:id="$+id:selector_list"  
  9.         ohos:height="36vp"  
  10.         ohos:width="match_parent"  
  11.         ohos:top_padding="8vp"  
  12.         ohos:orientation="horizontal"/>  
  13.     <Component  
  14.         ohos:height="1vp"  
  15.         ohos:width="match_parent"  
  16.         ohos:background_element="#70dbdb"/>  
  17.     <ListContainer  
  18.         ohos:id="$+id:news_container"  
  19.         ohos:height="match_parent"  
  20.         ohos:width="match_parent"/>  
  21. </DirectionalLayout> 

在src/main/resources/base/layout目录下新建布局文件item_news_type_layout.xml作为上方的新闻类别的item详情布局。

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <DirectionalLayout  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"  
  4.     ohos:height="40vp"  
  5.     ohos:width="match_content">  
  6.     <Text  
  7.         ohos:id="$+id:news_type_text"  
  8.         ohos:height="match_content"  
  9.         ohos:width="match_content"  
  10.         ohos:text_alignment="center"  
  11.         ohos:left_padding="20vp"  
  12.         ohos:right_padding="20vp"  
  13.         ohos:text_color="#55000000"  
  14.         ohos:text_size="16fp"/>  
  15. </DirectionalLayout> 

在src/main/resources/base/layout目录下新建布局文件item_news_layout.xml作为中间的新闻列表的item详情布局。

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <DirectionalLayout  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"  
  4.     ohos:height="110vp"  
  5.     ohos:width="match_parent"  
  6.     ohos:orientation="vertical">  
  7.     <DirectionalLayout  
  8.         ohos:height="109vp"  
  9.         ohos:width="match_parent"  
  10.         ohos:orientation="horizontal"  
  11.         ohos:padding="10vp">  
  12.         <Text  
  13.             ohos:id="$+id:item_news_title"  
  14.             ohos:height="match_content"  
  15.             ohos:width="0vp"  
  16.             ohos:max_text_lines="3"  
  17.             ohos:multiple_lines="true"  
  18.             ohos:right_padding="20vp"  
  19.             ohos:text_size="18vp"  
  20.             ohos:weight="2"/>  
  21.         <Image  
  22.             ohos:id="$+id:item_news_image"  
  23.             ohos:height="match_content"  
  24.             ohos:width="0vp"  
  25.             ohos:image_src="$media:news_image"  
  26.             ohos:weight="1"/>  
  27.     </DirectionalLayout>  
  28.     <Component  
  29.         ohos:height="1vp"  
  30.         ohos:width="match_parent"  
  31.         ohos:background_element="#70dbdb"/>  
  32. </DirectionalLayout> 

编写Provider文件

在src/main/java/com/huawei/codelab/provider目录下新建NewsTypeProvider.java文件，构造新闻类别的Provider。

  1. public class NewsTypeProvider extends BaseItemProvider {  
  2.     private String[] newsTypeList;  
  3.     private Context context;  
  4.   
  5.     public NewsTypeProvider(String[] listBasicInfo, Context context) {  
  6.         this.newsTypeList = listBasicInfo;  
  7.         this.context = context;  
  8.     }  
  9.   
  10.     @Override  
  11.     public int getCount() {  
  12.         return newsTypeList == null ? 0 : newsTypeList.length;  
  13.     }  
  14.   
  15.     @Override  
  16.     public Object getItem(int position) {  
  17.         return Optional.of(this.newsTypeList[position]);  
  18.     }  
  19.   
  20.     @Override  
  21.     public long getItemId(int position) {  
  22.         return position;  
  23.     }  
  24.   
  25.     @Override  
  26.     public Component getComponent(int position, Component componentP, ComponentContainer componentContainer) {  
  27.         ViewHolder viewHolder = null;  
  28.         Component component = componentP;  
  29.         if (component == null) {  
  30.             component = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_item_news_type_layout, null, false);  
  31.             viewHolder = new ViewHolder();  
  32.             Component componentText = component.findComponentById(ResourceTable.Id_news_type_text);  
  33.             if (componentText instanceof Text) {  
  34.                 viewHolder.title = (Text) componentText;  
  35.             }  
  36.             component.setTag(viewHolder);  
  37.         } else {  
  38.             if (component.getTag() instanceof ViewHolder) {  
  39.                 viewHolder = (ViewHolder) component.getTag();  
  40.             }  
  41.         }  
  42.         if (viewHolder != null) {  
  43.             viewHolder.title.setText(newsTypeList[position]);  
  44.         }  
  45.         return component;  
  46.     }  
  47.   
  48.     private static class ViewHolder {  
  49.         Text title;  
  50.     }  
  51. } 

在src/main/java/com/huawei/codelab/provider目录下新建NewsListProvider.java文件，构造新闻列表的Provider。

  1. public class NewsListProvider extends BaseItemProvider {  
  2.     private List<NewsInfo> newsInfoList;  
  3.     private Context context;  
  4.   
  5.     public NewsListProvider(List<NewsInfo> listBasicInfo, Context context) {  
  6.         this.newsInfoList = listBasicInfo;  
  7.         this.context = context;  
  8.     }  
  9.   
  10.     @Override  
  11.     public int getCount() {  
  12.         return newsInfoList == null ? 0 : newsInfoList.size();  
  13.     }  
  14.   
  15.     @Override  
  16.     public Object getItem(int position) {  
  17.         return Optional.of(this.newsInfoList.get(position));  
  18.     }  
  19.   
  20.     @Override  
  21.     public long getItemId(int position) {  
  22.         return position;  
  23.     }  
  24.   
  25.     @Override  
  26.     public Component getComponent(int position, Component componentP, ComponentContainer componentContainer) {  
  27.         ViewHolder viewHolder = null;  
  28.         Component component = componentP;  
  29.         if (component == null) {  
  30.             component = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_item_news_layout, null, false);  
  31.             viewHolder = new ViewHolder();  
  32.             Component componentTitle = component.findComponentById(ResourceTable.Id_item_news_title);  
  33.             Component componentImage = component.findComponentById(ResourceTable.Id_item_news_image);  
  34.             if (componentTitle instanceof Text) {  
  35.                 viewHolder.title = (Text) componentTitle;  
  36.             }  
  37.             if (componentImage instanceof Image) {  
  38.                 viewHolder.image = (Image) componentImage;  
  39.             }  
  40.             component.setTag(viewHolder);  
  41.         } else {  
  42.             if (component.getTag() instanceof ViewHolder) {  
  43.                 viewHolder = (ViewHolder) component.getTag();  
  44.             }  
  45.         }  
  46.         if (viewHolder != null) {  
  47.             viewHolder.title.setText(newsInfoList.get(position).getTitle());  
  48.             viewHolder.image.setScaleMode(Image.ScaleMode.STRETCH);  
  49.         }  
  50.         return component;  
  51.     }  
  52.   
  53.     private static class ViewHolder {  
  54.         Text title;  
  55.         Image image;  
  56.     }  
  57. } 

编写AbilitySlice文件

在src/main/java/com/huawei/codelab/slice目录下新建ListContainerSlice.java文件，继承AbilitySlice。

定义成员变量，加载布局：

  1. private static final float FOCUS_TEXT_SIZE = 1.2f;  
  2. private static final float UNFOCUS_TEXT_SIZE = 1.0f;  
  3. private Text selectText;  
  4. private ListContainer newsListContainer;  
  5. private ListContainer selectorListContainer;  
  6. private List<NewsInfo> totalNews;  
  7. private List<NewsInfo> selectNews;  
  8. private NewsTypeProvider newsTypeProvider;  
  9. private NewsListProvider newsListProvider;  
  10.   
  11. @Override  
  12. public void onStart(Intent intent) {  
  13.     super.onStart(intent);  
  14.     super.setUIContent(ResourceTable.Layout_news_list_layout);  
  15.     initView();  
  16.     initProvider();  
  17.     setListContainer();  
  18.     initListener();  
  19. } 

初始化组件：

  1. private void initView() {  
  2.     selectorListContainer = (ListContainer) findComponentById(ResourceTable.Id_selector_list);  
  3.     newsListContainer = (ListContainer) findComponentById(ResourceTable.Id_news_container);  
  4. } 

使用POJO类封装数据源中与每个列表项对应的数据：

  1. public class NewsInfo {  
  2.     private String title;  
  3.     private String type;  
  4.   
  5.     public String getTitle() {  
  6.         return title;  
  7.     }  
  8.   
  9.     public void setTitle(String title) {  
  10.         this.title = title;  
  11.     }  
  12.   
  13.     public String getType() {  
  14.         return type;  
  15.     }  
  16.   
  17.     public void setType(String type) {  
  18.         this.type = type;  
  19.     }  
  20. } 

初始化Provider：

  1. private void initProvider() {  
  2.     String[] listNames = new String[]{"All", "Health", "Finance", "Technology", "Sport", "Internet", "Game"};  
  3.     newsTypeProvider = new NewsTypeProvider(listNames, this);  
  4.     newsTypeProvider.notifyDataChanged();  
  5.   
  6.     String[] newsTypes = new String[]{"Health", "Finance", "Finance", "Technology", "Sport", "Health", "Internet", "Game", "Game", "Internet"};  
  7.     String[] newsTitles = new String[]{  
  8.         "Best Enterprise Wi-Fi Network Award of the Wireless Broadband Alliance 2020",  
  9.         "Openness and Cooperation Facilitate Industry Upgrade",  
  10.         "High-voltage super-fast charging is an inevitable trend",  
  11.         "Ten Future Trends of Digital Energy",  
  12.         "Ascend Helps Industry, Learning, and Research Promote AI Industry Development in the National AI Contest",  
  13.         "Enterprise data centers are moving towards autonomous driving network",  
  14.         "One optical fiber lights up a green smart room",  
  15.         "Trust technology, embrace openness, and share the world prosperity brought by technology",  
  16.         "Intelligent Twins Won the Leading Technology Achievement Award at the 7th World Internet Conference",  
  17.         "Maximizing the Value of Wireless Networks and Ushering in the Golden Decade of 5G"  
  18.     };  
  19.     totalNews = new ArrayList<>();  
  20.     selectNews = new ArrayList<>();  
  21.     for (int i = 0; i < newsTypes.length; i++) {  
  22.         NewsInfo newsInfo = new NewsInfo();  
  23.         newsInfo.setTitle(newsTitles[i]);  
  24.         newsInfo.setType(newsTypes[i]);  
  25.         totalNews.add(newsInfo);  
  26.     }  
  27.     selectNews.addAll(totalNews);  
  28.     newsListProvider = new NewsListProvider(selectNews, this);  
  29.     newsListProvider.notifyDataChanged();  
  30. } 

将Provider应用到ListContainer：

  1. private void  setListContainer() {  
  2.     selectorListContainer.setItemProvider(newsTypeProvider);  
  3.     newsListContainer.setItemProvider(newsListProvider);  
  4. } 

为ListContainer绑定点击事件：

  1. private void initListener() {  
  2.     selectorListContainer.setItemClickedListener((listContainer, component, position, listener) -> {  
  3.         setCategorizationFocus(false);  
  4.         Component newsTypeText = component.findComponentById(ResourceTable.Id_news_type_text);  
  5.         if (newsTypeText instanceof Text) {  
  6.             selectText = (Text) newsTypeText;  
  7.         }  
  8.         setCategorizationFocus(true);  
  9.         selectNews.clear();  
  10.         if (position == 0) {  
  11.             selectNews.addAll(totalNews);  
  12.         } else {  
  13.             String newsType = selectText.getText();  
  14.             for (NewsInfo newsData : totalNews) {  
  15.                 if (newsType.equals(newsData.getType())) {  
  16.                     selectNews.add(newsData);  
  17.                 }  
  18.             }  
  19.         }  
  20.         updateListView();  
  21.     });  
  22.     selectorListContainer.setSelected(true);  
  23.     selectorListContainer.setSelectedItemIndex(0);  
  24. }  
  25.   
  26. private void setCategorizationFocus(boolean isFocus) {  
  27.     if (selectText == null) {  
  28.         return;  
  29.     }  
  30.     if (isFocus) {  
  31.         selectText.setTextColor(new Color(Color.getIntColor("#afaafa")));  
  32.         selectText.setScaleX(FOCUS_TEXT_SIZE);  
  33.         selectText.setScaleY(FOCUS_TEXT_SIZE);  
  34.     } else {  
  35.         selectText.setTextColor(new Color(Color.getIntColor("#999999")));  
  36.         selectText.setScaleX(UNFOCUS_TEXT_SIZE);  
  37.         selectText.setScaleY(UNFOCUS_TEXT_SIZE);  
  38.     }  
  39. }  
  40.   
  41. private void updateListView() {  
  42.     newsListProvider.notifyDataChanged();  
  43.     newsListContainer.invalidate();  
  44.     newsListContainer.scrollToCenter(0);  
  45. } 

关联主页跳转

在src/main/java/com/huawei/codelab/slice/MainAbilitySlice.java的onClick方法中增加关联跳转。

  1. @Override  
  2. public void onClick(Component component) {  
  3.     String className = "";  
  4.     switch (component.getId()) {  
  5.         case ResourceTable.Id_list_container:  
  6.             className = "com.huawei.codelab.slice.ListContainerSlice";  
  7.             break;  
  8.         default:  
  9.             break;  
  10.     }  
  11.     abilitySliceJump(className);  
  12. } 

运行程序

点击**Run> Run ‘entry’**运行hap包，进入到程序主页，点击主页的ListContainer即可看到新闻列表页面，点击页面上方不同的新闻类型，新闻列表会随之变化，效果如下所示：

5. 体验RadioContainer组件

RadioContainer是RadioButton的容器，在其包裹下的RadioButton保证只有一个被选项。RadioContainer组件的使用方法详见常用组件开发指导。在本章节，我们将利用RadioContainer组件编写一道单选题。

编写布局文件

在src/main/resources/base/layout目录下新建布局文件radio_container.xml。

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <DirectionalLayout  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"  
  4.     ohos:height="match_parent"  
  5.     ohos:width="match_parent"  
  6.     ohos:alignment="horizontal_center"  
  7.     ohos:orientation="vertical"  
  8.     ohos:left_padding="32vp">  
  9.     <Text  
  10.         ohos:height="match_content"  
  11.         ohos:width="match_parent"  
  12.         ohos:top_margin="32vp"  
  13.         ohos:text="Question:Which of the following options belong to fruit?"  
  14.         ohos:text_size="20fp"  
  15.         ohos:layout_alignment="left"  
  16.         ohos:multiple_lines="true"/>  
  17.     <DirectionalLayout  
  18.         ohos:height="match_content"  
  19.         ohos:width="match_parent"  
  20.         ohos:orientation="horizontal"  
  21.         ohos:top_margin="8vp">  
  22.         <Text  
  23.             ohos:height="match_content"  
  24.             ohos:width="match_content"  
  25.             ohos:text="Your Answer:"  
  26.             ohos:text_size="20fp"/>  
  27.         <Text  
  28.             ohos:id="$+id:answer"  
  29.             ohos:height="match_content"  
  30.             ohos:width="match_content"  
  31.             ohos:text_size="20fp"  
  32.             ohos:left_margin="18vp"  
  33.             ohos:text="[]"  
  34.             ohos:text_color="#FF3333"/>  
  35.     </DirectionalLayout>  
  36.     <RadioContainer  
  37.         ohos:id="$+id:radio_container"  
  38.         ohos:height="match_content"  
  39.         ohos:width="200vp"  
  40.         ohos:layout_alignment="left"  
  41.         ohos:orientation="vertical"  
  42.         ohos:top_margin="16vp"  
  43.         ohos:left_margin="4vp">  
  44.         <RadioButton  
  45.             ohos:id="$+id:radio_button_1"  
  46.             ohos:height="40vp"  
  47.             ohos:width="match_content"  
  48.             ohos:text="A.Apple"  
  49.             ohos:text_size="20fp"  
  50.             ohos:text_color_on="#FF3333"/>  
  51.         <RadioButton  
  52.             ohos:id="$+id:radio_button_2"  
  53.             ohos:height="40vp"  
  54.             ohos:width="match_content"  
  55.             ohos:text="B.Potato"  
  56.             ohos:text_size="20fp"  
  57.             ohos:text_color_on="#FF3333"/>  
  58.         <RadioButton  
  59.             ohos:id="$+id:radio_button_3"  
  60.             ohos:height="40vp"  
  61.             ohos:width="match_content"  
  62.             ohos:text="C.Pumpkin"  
  63.             ohos:text_size="20fp"  
  64.             ohos:text_color_on="#FF3333"/>  
  65.         <RadioButton  
  66.             ohos:id="$+id:radio_button_4"  
  67.             ohos:height="40vp"  
  68.             ohos:width="match_content"  
  69.             ohos:text="D.Vegetables"  
  70.             ohos:text_size="20fp"  
  71.             ohos:text_color_on="#FF3333"/>  
  72.     </RadioContainer>  
  73. </DirectionalLayout> 

编写AbilitySlice文件

在src/main/java/com/huawei/codelab/slice目录下新建RadioContainerSlice.java文件，继承AbilitySlice。

加载布局：

  1. @Override  
  2. public void onStart(Intent intent) {  
  3.     super.onStart(intent);  
  4.     super.setUIContent(ResourceTable.Layout_radio_container);  
  5.     initComponent();  
  6. } 

通过以下方法，定义RadioButton的背景：

  1. private StateElement getStateElement() {  
  2.     ShapeElement elementButtonOn = new ShapeElement();  
  3.     elementButtonOn.setRgbColor(RgbPalette.RED);  
  4.     elementButtonOn.setShape(ShapeElement.OVAL);  
  5.   
  6.     ShapeElement elementButtonOff = new ShapeElement();  
  7.     elementButtonOff.setRgbColor(RgbPalette.DARK_GRAY);  
  8.     elementButtonOff.setShape(ShapeElement.OVAL);  
  9.   
  10.     StateElement checkElement = new StateElement();  
  11.     checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, elementButtonOn);  
  12.     checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, elementButtonOff);  
  13.     return checkElement;  
  14. } 

初始化组件并设置响应RadioContainer状态改变的事件，显示单选结果：

  1. private void initComponent() {  
  2.     Text answer = (Text) findComponentById(ResourceTable.Id_answer);  
  3.     RadioContainer container = (RadioContainer)findComponentById(ResourceTable.Id_radio_container);  
  4.     int count = container.getChildCount();  
  5.     for (int i = 0; i < count; i++) {  
  6.         ((RadioButton) container.getComponentAt(i)).setButtonElement(getStateElement());  
  7.     }  
  8.     container.setMarkChangedListener((radioContainer1, index) -> {  
  9.         answer.setText(String.format("[%c]", (char)('A'+index)));  
  10.     });  
  11. } 

关联主页跳转

在src/main/java/com/huawei/codelab/slice/MainAbilitySlice.java的onClick方法中增加关联跳转。

  1. @Override  
  2. public void onClick(Component component) {  
  3.     String className = "";  
  4.     switch (component.getId()) {  
  5.         case ResourceTable.Id_radio_container:  
  6.             className = "com.huawei.codelab.slice.RadioContainerSlice";  
  7.             break;  
  8.         default:  
  9.             break;  
  10.     }  
  11.     abilitySliceJump(className);  
  12. } 

运行程序

点击**Run> Run ‘entry’**运行hap包，进入到程序主页，点击主页的RadioContainer即可看到单选题页面，点击不同的选项，单选结果将同步刷新。效果如下所示：

6. 体验Checkbox组件

Checkbox可以实现选中和取消选中的功能。Checkbox组件的使用方法详见常用组件开发指导。在本章节，我们将利用Checkbox组件编写一道多选题。

编写布局文件

在src/main/resources/base/layout目录下新建布局文件checkbox.xml。

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <DirectionalLayout  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"  
  4.     ohos:height="match_parent"  
  5.     ohos:width="match_parent"  
  6.     ohos:alignment="horizontal_center"  
  7.     ohos:orientation="vertical"  
  8.     ohos:left_padding="32vp">  
  9.     <Text  
  10.         ohos:height="match_content"  
  11.         ohos:width="match_parent"  
  12.         ohos:top_margin="32vp"  
  13.         ohos:text="Question:Which of the following options belong to fruit?"  
  14.         ohos:text_size="20fp"  
  15.         ohos:layout_alignment="left"  
  16.         ohos:multiple_lines="true"/>  
  17.     <DirectionalLayout  
  18.         ohos:height="match_content"  
  19.         ohos:width="match_parent"  
  20.         ohos:orientation="horizontal"  
  21.         ohos:top_margin="8vp">  
  22.         <Text  
  23.             ohos:height="match_content"  
  24.             ohos:width="match_content"  
  25.             ohos:text="Your Answer:"  
  26.             ohos:text_size="20fp"/>  
  27.         <Text  
  28.             ohos:id="$+id:answer"  
  29.             ohos:height="match_content"  
  30.             ohos:width="match_content"  
  31.             ohos:text_size="20fp"  
  32.             ohos:left_margin="18vp"  
  33.             ohos:text="[]"  
  34.             ohos:text_color="#FF3333"/>  
  35.     </DirectionalLayout>  
  36.     <RadioContainer  
  37.         ohos:id="$+id:radio_container"  
  38.         ohos:height="match_content"  
  39.         ohos:width="200vp"  
  40.         ohos:layout_alignment="left"  
  41.         ohos:orientation="vertical"  
  42.         ohos:top_margin="16vp"  
  43.         ohos:left_margin="4vp">  
  44.         <RadioButton  
  45.             ohos:id="$+id:radio_button_1"  
  46.             ohos:height="40vp"  
  47.             ohos:width="match_content"  
  48.             ohos:text="A.Apple"  
  49.             ohos:text_size="20fp"  
  50.             ohos:text_color_on="#FF3333"/>  
  51.         <RadioButton  
  52.             ohos:id="$+id:radio_button_2"  
  53.             ohos:height="40vp"  
  54.             ohos:width="match_content"  
  55.             ohos:text="B.Potato"  
  56.             ohos:text_size="20fp"  
  57.             ohos:text_color_on="#FF3333"/>  
  58.         <RadioButton  
  59.             ohos:id="$+id:radio_button_3"  
  60.             ohos:height="40vp"  
  61.             ohos:width="match_content"  
  62.             ohos:text="C.Pumpkin"  
  63.             ohos:text_size="20fp"  
  64.             ohos:text_color_on="#FF3333"/>  
  65.         <RadioButton  
  66.             ohos:id="$+id:radio_button_4"  
  67.             ohos:height="40vp"  
  68.             ohos:width="match_content"  
  69.             ohos:text="D.Vegetables"  
  70.             ohos:text_size="20fp"  
  71.             ohos:text_color_on="#FF3333"/>  
  72.     </RadioContainer>  
  73. </DirectionalLayout> 

编写AbilitySlice文件

在src/main/java/com/huawei/codelab/slice目录下新建CheckboxSlice.java文件，继承AbilitySlice。

定义成员变量，加载布局：

  1. @Override  
  2. public void onStart(Intent intent) {  
  3.     super.onStart(intent);  
  4.     super.setUIContent(ResourceTable.Layout_radio_container);  
  5.     initComponent();  
  6. } 

通过以下方法设置Checkbox的背景：

  1. private StateElement getStateElement() {  
  2.     ShapeElement elementButtonOn = new ShapeElement();  
  3.     elementButtonOn.setRgbColor(RgbPalette.RED);  
  4.     elementButtonOn.setShape(ShapeElement.OVAL);  
  5.   
  6.     ShapeElement elementButtonOff = new ShapeElement();  
  7.     elementButtonOff.setRgbColor(RgbPalette.DARK_GRAY);  
  8.     elementButtonOff.setShape(ShapeElement.OVAL);  
  9.   
  10.     StateElement checkElement = new StateElement();  
  11.     checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, elementButtonOn);  
  12.     checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, elementButtonOff);  
  13.     return checkElement;  
  14. } 

通过以下方法订阅Checkbox状态变化：

  1. private StateElement getStateElement() {  
  2.     ShapeElement elementButtonOn = new ShapeElement();  
  3.     elementButtonOn.setRgbColor(RgbPalette.RED);  
  4.     elementButtonOn.setShape(ShapeElement.OVAL);  
  5.   
  6.     ShapeElement elementButtonOff = new ShapeElement();  
  7.     elementButtonOff.setRgbColor(RgbPalette.DARK_GRAY);  
  8.     elementButtonOff.setShape(ShapeElement.OVAL);  
  9.   
  10.     StateElement checkElement = new StateElement();  
  11.     checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, elementButtonOn);  
  12.     checkElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, elementButtonOff);  
  13.     return checkElement;  
  14. } 

初始化Checkbox并设置订阅事件：

  1. private void initComponent() {  
  2.     Text answer = (Text) findComponentById(ResourceTable.Id_answer);  
  3.     RadioContainer container = (RadioContainer)findComponentById(ResourceTable.Id_radio_container);  
  4.     int count = container.getChildCount();  
  5.     for (int i = 0; i < count; i++) {  
  6.         ((RadioButton) container.getComponentAt(i)).setButtonElement(getStateElement());  
  7.     }  
  8.     container.setMarkChangedListener((radioContainer1, index) -> {  
  9.         answer.setText(String.format("[%c]", (char)('A'+index)));  
  10.     });  
  11. } 

关联主页跳转

在src/main/java/com/huawei/codelab/slice/MainAbilitySlice.java的onClick方法中增加关联跳转。

  1. @Override  
  2. public void onClick(Component component) {  
  3.     String className = "";  
  4.     switch (component.getId()) {  
  5.         case ResourceTable.Id_checkbox:  
  6.             className = "com.huawei.codelab.slice.CheckboxSlice";  
  7.             break;  
  8.         default:  
  9.             break;  
  10.     }  
  11.     abilitySliceJump(className);  
  12. } 

运行程序

点击**Run> Run ‘entry’**运行hap包，进入到程序主页，点击主页的Checkbox即可看到多选题页面，点击不同的选项，多选结果将同步刷新。效果如下所示：

7. 体验DatePicker组件

DatePicker主要供用户选择日期。DatePicker组件的使用方法详见常用组件开发指导。在本章节，我们将利用DatePicker组件编写一个日期选择小程序。

编写布局文件

在src/main/resources/base/layout目录下新建布局文件data_picker.xml。

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <DirectionalLayout  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"  
  4.     ohos:height="match_parent"  
  5.     ohos:width="match_parent"  
  6.     ohos:orientation="vertical"  
  7.     ohos:left_padding="32vp">  
  8.     <Text  
  9.         ohos:height="match_content"  
  10.         ohos:width="match_parent"  
  11.         ohos:top_margin="32vp"  
  12.         ohos:text="Question:Which of the following are fruits?"  
  13.         ohos:text_size="20fp"  
  14.         ohos:layout_alignment="left"  
  15.         ohos:multiple_lines="true"/>  
  16.     <DirectionalLayout  
  17.         ohos:height="match_content"  
  18.         ohos:width="match_parent"  
  19.         ohos:orientation="horizontal"  
  20.         ohos:top_margin="8vp">  
  21.         <Text  
  22.             ohos:height="match_content"  
  23.             ohos:width="match_content"  
  24.             ohos:text="Your Answer:"  
  25.             ohos:text_size="20fp"/>  
  26.         <Text  
  27.             ohos:id="$+id:text_answer"  
  28.             ohos:height="match_content"  
  29.             ohos:width="match_content"  
  30.             ohos:text_size="20fp"  
  31.             ohos:left_margin="18vp"  
  32.             ohos:text="[]"  
  33.             ohos:text_color="#FF3333"/>  
  34.     </DirectionalLayout>  
  35.     <Checkbox  
  36.         ohos:id="$+id:checkbox_1"  
  37.         ohos:top_margin="20vp"  
  38.         ohos:height="match_content"  
  39.         ohos:width="match_content"  
  40.         ohos:text="A Apples"  
  41.         ohos:text_size="20fp"  
  42.         ohos:text_color_on="#FF3333"  
  43.         ohos:text_color_off="#000000"/>  
  44.     <Checkbox  
  45.         ohos:id="$+id:checkbox_2"  
  46.         ohos:top_margin="20vp"  
  47.         ohos:height="match_content"  
  48.         ohos:width="match_content"  
  49.         ohos:text="B Bananas"  
  50.         ohos:text_size="20fp"  
  51.         ohos:text_color_on="#FF3333"  
  52.         ohos:text_color_off="#000000"/>  
  53.     <Checkbox  
  54.         ohos:id="$+id:checkbox_3"  
  55.         ohos:top_margin="20vp"  
  56.         ohos:height="match_content"  
  57.         ohos:width="match_content"  
  58.         ohos:text="C Strawberries"  
  59.         ohos:text_size="20fp"  
  60.         ohos:text_color_on="#FF3333"  
  61.         ohos:text_color_off="#000000" />  
  62.     <Checkbox  
  63.         ohos:id="$+id:checkbox_4"  
  64.         ohos:top_margin="20vp"  
  65.         ohos:height="match_content"  
  66.         ohos:width="match_content"  
  67.         ohos:text="D Potatoes"  
  68.         ohos:text_size="20fp"  
  69.         ohos:text_color_on="#FF3333"  
  70.         ohos:text_color_off="black" />  
  71. </DirectionalLayout> 

编写AbilitySlice文件

在src/main/java/com/huawei/codelab/slice目录下新建DatePickerSlice.java文件，继承AbilitySlice。

定义成员变量，加载布局：

  1. private Text answer;  
  2. private Set<String> selectedSet = new HashSet<>();  
  3.   
  4. @Override  
  5. public void onStart(Intent intent) {  
  6.     super.onStart(intent);  
  7.     super.setUIContent(ResourceTable.Layout_checkbox);  
  8.     answer = (Text) findComponentById(ResourceTable.Id_text_answer);  
  9.     initCheckbox();  
  10. } 

初始化组件：

  1. private void initComponent() {  
  2.     datePicker = (DatePicker) findComponentById(ResourceTable.Id_date_pick);  
  3.     textDate = (Text) findComponentById(ResourceTable.Id_text_date);  
  4. } 

显示初始日期：

  1. private void initDate() {  
  2.     int day = datePicker.getDayOfMonth();  
  3.     int month = datePicker.getMonth();  
  4.     int year = datePicker.getYear();  
  5.     textDate.setText(String.format("%02d/%02d/%4d", day, month, year));  
  6. } 

为DatePicker设置订阅事件：

  1. private void setValueChangedListener(){  
  2.     datePicker.setValueChangedListener(  
  3.         new DatePicker.ValueChangedListener() {  
  4.             @Override  
  5.             public void onValueChanged(DatePicker picker, int year, int monthOfYear, int dayOfMonth) {  
  6.                 textDate.setText(String.format("%02d/%02d/%4d", dayOfMonth, monthOfYear, year));  
  7.             }  
  8.         }  
  9.     );  
  10. } 

关联主页跳转

在src/main/java/com/huawei/codelab/slice/MainAbilitySlice.java的onClick方法中增加关联跳转。

  1. @Override  
  2. public void onClick(Component component) {  
  3.     String className = "";  
  4.     switch (component.getId()) {  
  5.         case ResourceTable.Id_date_picker:  
  6.             className = "com.huawei.codelab.slice.DatePickerSlice";  
  7.             break;  
  8.         default:  
  9.             break;  
  10.     }  
  11.     abilitySliceJump(className);  
  12. } 

运行程序

点击**Run> Run ‘entry’**运行hap包，进入到程序主页，点击主页的DatePicker即可看到日期选择页面，默认显示当前日期;滑动年/月/日，下面显示的日期将同步刷新。效果如下所示：

8. 体验DirectionalLayout布局

DirectionalLayout是Java UI中的一种重要组件布局，用于将一组组件(Component)按照水平或者垂直方向排布，能够方便地对齐布局内的组件。DirectionalLayout布局的使用方法详见常用布局开发指导。在此章节，我们将利用DirectionalLayout布局编写一个中秋灯谜列表。

编写布局文件

在src/main/resources/base/layout目录下新建布局文件directional_layout.xml。

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <DirectionalLayout  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"  
  4.     ohos:width="match_parent"  
  5.     ohos:height="match_parent"  
  6.     ohos:top_margin="13fp"  
  7.     ohos:orientation="vertical">  
  8.     <Text  
  9.         ohos:width="match_content"  
  10.         ohos:height="match_content"  
  11.         ohos:text="Lantern riddles of Mid Autumn Festival"  
  12.         ohos:text_alignment="center"  
  13.         ohos:multiple_lines="true"  
  14.         ohos:layout_alignment="center"  
  15.         ohos:top_margin="20vp"  
  16.         ohos:text_size="23vp"/>  
  17.     <Text  
  18.         ohos:width="match_parent"  
  19.         ohos:height="match_content"  
  20.         ohos:text="1.what man cannot live in a house?"  
  21.         ohos:multiple_lines="true"  
  22.         ohos:left_margin="20vp"  
  23.         ohos:top_margin="20vp"  
  24.         ohos:text_size="18vp"/>  
  25.     <Text  
  26.         ohos:width="match_parent"  
  27.         ohos:height="match_content"  
  28.         ohos:text="2.What never asks questions but gets a lot of answers?"  
  29.         ohos:multiple_lines="true"  
  30.         ohos:left_margin="20vp"  
  31.         ohos:top_margin="20vp"  
  32.         ohos:text_size="18vp"/>  
  33.     <Text  
  34.         ohos:width="match_parent"  
  35.         ohos:height="match_content"  
  36.         ohos:text="3.A mouse has a large pocket．What is it?"  
  37.         ohos:multiple_lines="true"  
  38.         ohos:left_margin="20vp"  
  39.         ohos:top_margin="20vp"  
  40.         ohos:text_size="18vp"/>  
  41.     <Text  
  42.         ohos:width="match_parent"  
  43.         ohos:height="match_content"  
  44.         ohos:text="4.What can hear you without ears and can answer you without a mouth?"  
  45.         ohos:multiple_lines="true"  
  46.         ohos:left_margin="20vp"  
  47.         ohos:top_margin="20vp"  
  48.         ohos:text_size="18vp"/>  
  49.     <Text  
  50.         ohos:width="match_parent"  
  51.         ohos:height="match_content"  
  52.         ohos:text="5.What is higher without a head than with a head?"  
  53.         ohos:multiple_lines="true"  
  54.         ohos:left_margin="20vp"  
  55.         ohos:top_margin="20vp"  
  56.         ohos:text_size="18vp"/>  
  57.     <Text  
  58.         ohos:width="match_parent"  
  59.         ohos:height="match_content"  
  60.         ohos:text="6.What is dark but made by light?"  
  61.         ohos:multiple_lines="true"  
  62.         ohos:left_margin="20vp"  
  63.         ohos:top_margin="20vp"  
  64.         ohos:text_size="18vp"/>  
  65.     <Text  
  66.         ohos:width="match_parent"  
  67.         ohos:height="match_content"  
  68.         ohos:text="7.What person tried to make you smile most of the time?"  
  69.         ohos:multiple_lines="true"  
  70.         ohos:left_margin="20vp"  
  71.         ohos:top_margin="20vp"  
  72.         ohos:text_size="18vp"/>  
  73.     <Text  
  74.         ohos:width="match_parent"  
  75.         ohos:height="match_content"  
  76.         ohos:text="8.You have it．You read it．There're some pictures in it?"  
  77.         ohos:multiple_lines="true"  
  78.         ohos:left_margin="20vp"  
  79.         ohos:top_margin="20vp"  
  80.         ohos:text_size="18vp"/>  
  81.     <Text  
  82.         ohos:width="match_parent"  
  83.         ohos:height="match_content"  
  84.         ohos:text="9.What animal has a head like a cat, eyes like a cat, a tail like a cat, but isn't a cat? "  
  85.         ohos:multiple_lines="true"  
  86.         ohos:left_margin="20vp"  
  87.         ohos:top_margin="20vp"  
  88.         ohos:text_size="18vp"/>  
  89.     <Text  
  90.         ohos:width="match_parent"  
  91.         ohos:height="match_content"  
  92.         ohos:text="10.What has hands but no feet, a face but no eyes, tells but not talk?"  
  93.         ohos:multiple_lines="true"  
  94.         ohos:left_margin="20vp"  
  95.         ohos:top_margin="20vp"  
  96.         ohos:text_size="18vp"/>  
  97. </DirectionalLayout> 

编写AbilitySlice文件

在src/main/java/com/huawei/codelab/slice目录下新建DirectionalLayoutSlice.java文件，继承AbilitySlice。

加载布局：

  1. @Override  
  2. public void onStart(Intent intent) {  
  3.     super.onStart(intent);  
  4.     super.setUIContent(ResourceTable.Layout_directional_layout);  
  5. } 

关联主页跳转

在src/main/java/com/huawei/codelab/slice/MainAbilitySlice.java的onClick方法中增加关联跳转。

  1. @Override  
  2. public void onClick(Component component) {  
  3.     String className = "";  
  4.     switch (component.getId()) {  
  5.         case ResourceTable.Id_directional_layout:  
  6.             className = "com.huawei.codelab.slice.DirectionalLayoutSlice";  
  7.             break;  
  8.         default:  
  9.             break;  
  10.     }  
  11.     abilitySliceJump(className);  
  12. } 

运行程序

点击**Run> Run ‘entry’**运行hap包，进入到程序主页，点击主页的DirectionalLayout即可看到中秋灯谜页面。效果如下所示：

HarmonyOS JAVA通用组件-鸿蒙HarmonyOS技术社区

9. 体验DependentLayout布局

DependentLayout是Java UI系统里的一种常见布局。与DirectionalLayout相比，拥有更多的排布方式，每个组件可以指定相对于其他同级元素的位置，或者指定相对于父组件的位置。DependentLayout布局的使用方法可详见常用布局开发指导。在本章节，我们将利用DirectionalLayout和DependentLayout布局编写一个新闻详情页面。

编写布局文件

在src/main/resources/base/layout目录下新建布局文件dependent_layout.xml。

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <DependentLayout  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"  
  4.     ohos:id="$+id:parent_layout"  
  5.     ohos:height="match_parent"  
  6.     ohos:width="match_parent">  
  7.     <ScrollView  
  8.         ohos:height="match_parent"  
  9.         ohos:width="match_parent">  
  10.         <DirectionalLayout  
  11.             ohos:height="match_content"  
  12.             ohos:width="match_parent"  
  13.             ohos:bottom_padding="70vp"  
  14.             ohos:orientation="vertical">  
  15.             <DirectionalLayout  
  16.                 ohos:height="match_content"  
  17.                 ohos:width="match_parent"  
  18.                 ohos:alignment="vertical_center"  
  19.                 ohos:orientation="horizontal"  
  20.                 ohos:background_element="#FFFFFF">  
  21.                 <Text  
  22.                     ohos:id="$+id:title_icon"  
  23.                     ohos:height="match_content"  
  24.                     ohos:width="match_content"  
  25.                     ohos:text="NewsDemo"  
  26.                     ohos:left_margin="20vp"  
  27.                     ohos:text_size="20fp"  
  28.                     ohos:weight="1"/>  
  29.                 <Text  
  30.                     ohos:id="$+id:read_num"  
  31.                     ohos:height="match_content"  
  32.                     ohos:width="match_content"  
  33.                     ohos:right_margin="10vp"  
  34.                     ohos:text="reads：10"  
  35.                     ohos:text_size="10fp"/>  
  36.                 <Text  
  37.                     ohos:id="$+id:likes_num"  
  38.                     ohos:height="match_content"  
  39.                     ohos:width="match_content"  
  40.                     ohos:right_margin="20vp"  
  41.                     ohos:text="likes：9"  
  42.                     ohos:text_size="10fp"/>  
  43.             </DirectionalLayout>  
  44.             <Text  
  45.                 ohos:id="$+id:title_text"  
  46.                 ohos:height="match_content"  
  47.                 ohos:width="match_parent"  
  48.                 ohos:left_margin="20vp"  
  49.                 ohos:max_text_lines="4"  
  50.                 ohos:multiple_lines="true"  
  51.                 ohos:right_margin="20vp"  
  52.                 ohos:text="Ten Future Trends of Digital Energy"  
  53.                 ohos:text_color="#000000"  
  54.                 ohos:text_size="18fp"  
  55.                 ohos:top_margin="10vp"/>  
  56.             <Text  
  57.                 ohos:id="$+id:title_content"  
  58.                 ohos:height="match_content"  
  59.                 ohos:width="match_parent"  
  60.                 ohos:left_margin="20vp"  
  61.                 ohos:multiple_lines="true"  
  62.                 ohos:right_margin="20vp"  
  63.                 ohos:text="Energy digitalization is an inevitable trend. Innovative integration of digital and energy technologies enables end-to-end visual, manageable, and controllable intelligent management of energy infrastructure, improving energy efficiency."  
  64.                 ohos:text_alignment="center_horizontal"  
  65.                 ohos:text_color="#708090"  
  66.                 ohos:text_size="16fp"  
  67.                 ohos:top_margin="5vp"/>  
  68.             <DirectionalLayout  
  69.                 ohos:height="match_content"  
  70.                 ohos:width="match_parent"  
  71.                 ohos:orientation="horizontal">  
  72.                 <Image  
  73.                     ohos:id="$+id:image_content1"  
  74.                     ohos:height="100vp"  
  75.                     ohos:width="0vp"  
  76.                     ohos:image_src="$media:news_image_left"  
  77.                     ohos:layout_alignment="center"  
  78.                     ohos:left_margin="20vp"  
  79.                     ohos:right_margin="2vp"  
  80.                     ohos:top_margin="10vp"  
  81.                     ohos:weight="1"/>  
  82.                 <Image  
  83.                     ohos:id="$+id:image_content2"  
  84.                     ohos:height="100vp"  
  85.                     ohos:width="0vp"  
  86.                     ohos:image_src="$media:news_image"  
  87.                     ohos:layout_alignment="center"  
  88.                     ohos:left_margin="10vp"  
  89.                     ohos:right_margin="2vp"  
  90.                     ohos:top_margin="10vp"  
  91.                     ohos:weight="1"/>  
  92.                 <Image  
  93.                     ohos:id="$+id:image_content3"  
  94.                     ohos:height="100vp"  
  95.                     ohos:width="0vp"  
  96.                     ohos:image_src="$media:news_image_right"  
  97.                     ohos:layout_alignment="center"  
  98.                     ohos:left_margin="2vp"  
  99.                     ohos:right_margin="20vp"  
  100.                     ohos:top_margin="10vp"  
  101.                     ohos:weight="1"/>  
  102.             </DirectionalLayout>  
  103.         </DirectionalLayout>  
  104.     </ScrollView>  
  105.     <Component  
  106.         ohos:height="0.5vp"  
  107.         ohos:width="match_parent"  
  108.         ohos:above="$+id:bottom_layout"  
  109.         ohos:background_element="#EAEAEC"/>  
  110.     <DirectionalLayout  
  111.         ohos:id="$+id:bottom_layout"  
  112.         ohos:height="50vp"  
  113.         ohos:width="match_parent"  
  114.         ohos:align_parent_bottom="true"  
  115.         ohos:alignment="vertical_center"  
  116.         ohos:background_element="#ffffff"  
  117.         ohos:left_padding="20vp"  
  118.         ohos:orientation="horizontal"  
  119.         ohos:right_padding="20vp">  
  120.         <TextField  
  121.             ohos:height="30vp"  
  122.             ohos:width="160vp"  
  123.             ohos:background_element="$graphic:corner_bg_comment"  
  124.             ohos:hint="Enter a comment."  
  125.             ohos:left_padding="5vp"  
  126.             ohos:right_padding="10vp"  
  127.             ohos:text_alignment="vertical_center"  
  128.             ohos:text_size="15vp"/>  
  129.         <Image  
  130.             ohos:height="20vp"  
  131.             ohos:width="20vp"  
  132.             ohos:scale_mode="stretch"  
  133.             ohos:image_src="$media:message_icon"  
  134.             ohos:left_margin="20vp"/>  
  135.         <Image  
  136.             ohos:height="20vp"  
  137.             ohos:width="20vp"  
  138.             ohos:scale_mode="stretch"  
  139.             ohos:image_src="$media:collect_icon"  
  140.             ohos:left_margin="20vp"/>  
  141.         <Image  
  142.             ohos:height="20vp"  
  143.             ohos:width="20vp"  
  144.             ohos:scale_mode="stretch"  
  145.             ohos:image_src="$media:like_icon"  
  146.             ohos:left_margin="20vp"/>  
  147.         <Image  
  148.             ohos:height="20vp"  
  149.             ohos:width="20vp"  
  150.             ohos:scale_mode="stretch"  
  151.             ohos:image_src="$media:share_icon"  
  152.             ohos:left_margin="20vp"/>  
  153.     </DirectionalLayout>  
  154. </DependentLayout> 

编写AbilitySlice文件

在src/main/java/com/huawei/codelab/slice目录下新建DependentLayoutSlice.java文件，继承AbilitySlice。

加载布局：

  1. @Override  
  2. public void onStart(Intent intent) {  
  3.     super.onStart(intent);  
  4.     super.setUIContent(ResourceTable.Layout_dependent_layout);  
  5. } 

关联主页跳转

在src/main/java/com/huawei/codelab/slice/MainAbilitySlice.java的onClick方法中增加关联跳转。

  1. @Override  
  2. public void onClick(Component component) {  
  3.     String className = "";  
  4.     switch (component.getId()) {  
  5.         case ResourceTable.Id_dependent_layout:  
  6.             className = "com.huawei.codelab.slice.DependentLayoutSlice";  
  7.             break;  
  8.         default:  
  9.             break;  
  10.     }  
  11.     abilitySliceJump(className);  
  12. } 

运行程序

点击**Run> Run ‘entry’**运行hap包，进入到程序主页，点击主页的DependentLayout即可看到新闻详情页面，效果如下所示：

HarmonyOS JAVA通用组件-鸿蒙HarmonyOS技术社区

10. 体验StackLayout布局

StackLayout直接在屏幕上开辟出一块空白的区域，添加到这个布局中的视图都是以层叠的方式显示，而它会把这些视图默认放到这块区域的左上角，第一个添加到布局中的视图显示在最底层，最后一个被放在最顶层。上一层的视图会覆盖下一层的视图。StackLayout布局的使用方法详见常用布局开发指导。

编写布局文件

在src/main/resources/base/layout目录下新建布局文件stack_layout.xml。

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <StackLayout  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"  
  4.     ohos:id="$+id:stack_layout"  
  5.     ohos:height="match_parent"  
  6.     ohos:width="match_parent">  
  7.     <Text  
  8.         ohos:id="$+id:text_blue"  
  9.         ohos:text_alignment="bottom|horizontal_center"  
  10.         ohos:text_size="24fp"  
  11.         ohos:text="Layer1"  
  12.         ohos:height="400vp"  
  13.         ohos:width="match_parent"  
  14.         ohos:background_element="#70dbdb" />  
  15.     <Text  
  16.         ohos:id="$+id:text_light_purple"  
  17.         ohos:text_alignment="bottom|horizontal_center"  
  18.         ohos:text_size="24fp"  
  19.         ohos:text="Layer2"  
  20.         ohos:height="300vp"  
  21.         ohos:width="300vp"  
  22.         ohos:background_element="#EED2EE" />  
  23.     <Text  
  24.         ohos:id="$+id:text_green"  
  25.         ohos:text_alignment="center"  
  26.         ohos:text_size="24fp"  
  27.         ohos:text="Layer3"  
  28.         ohos:height="200vp"  
  29.         ohos:width="200vp"  
  30.         ohos:background_element="#B4EEB4" />  
  31. </StackLayout> 

编写AbilitySlice文件

在src/main/java/com/huawei/codelab/slice目录下新建StackLayoutSlice.java文件，继承AbilitySlice。

加载布局：

  1. @Override  
  2. public void onStart(Intent intent) {  
  3.     super.onStart(intent);  
  4.     super.setUIContent(ResourceTable.Layout_stack_layout);  
  5. } 

关联主页跳转

在src/main/java/com/huawei/codelab/slice/MainAbilitySlice.java的onClick方法中增加关联跳转。

  1. @Override  
  2. public void onClick(Component component) {  
  3.     String className = "";  
  4.     switch (component.getId()) {  
  5.         case ResourceTable.Id_stack_layout:  
  6.             className = "com.huawei.codelab.slice.StackLayoutSlice";  
  7.             break;  
  8.         default:  
  9.             break;  
  10.     }  
  11.     abilitySliceJump(className);  
  12. } 

运行程序

点击**Run> Run ‘entry’**运行hap包，进入到程序主页，点击主页的StackLayout即可看到页面效果如下：

HarmonyOS JAVA通用组件-鸿蒙HarmonyOS技术社区

11. 体验TableLayout布局

TableLayout使用表格的方式划分子组件。TableLayout布局的使用方法详见常用组件开发指导。在本章节，我们将利用TableLayout布局编写一个拨号盘。

编写布局文件

在src/main/resources/base/layout目录下新建布局文件table_layout.xml。

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <DirectionalLayout  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"  
  4.     ohos:width="match_parent"  
  5.     ohos:height="match_parent"  
  6.     ohos:background_element="#EDEDED"  
  7.     ohos:layout_alignment="center"  
  8.     ohos:orientation="vertical">  
  9.     <Text  
  10.         ohos:id="$+id:info"  
  11.         ohos:width="match_content"  
  12.         ohos:height="30vp"  
  13.         ohos:text_size="20fp"  
  14.         ohos:top_margin="20vp"  
  15.         ohos:text=""  
  16.         ohos:text_alignment="center"  
  17.         ohos:layout_alignment="horizontal_center"/>  
  18.     <TableLayout  
  19.         ohos:id="$+id:table"  
  20.         ohos:width="700"  
  21.         ohos:height="match_content"  
  22.         ohos:orientation="horizontal"  
  23.         ohos:layout_alignment="horizontal_center"  
  24.         ohos:top_margin="10"  
  25.         ohos:column_count="3">  
  26.         <Button  
  27.             ohos:width="50vp"  
  28.             ohos:height="50vp"  
  29.             ohos:text_size="15fp"  
  30.             ohos:left_margin="20vp"  
  31.             ohos:top_margin="15vp"  
  32.             ohos:background_element="$graphic:circle_button_element"  
  33.             ohos:text="1"  
  34.             ohos:text_alignment="center"/>  
  35.         <Button  
  36.             ohos:width="50vp"  
  37.             ohos:height="50vp"  
  38.             ohos:text_size="15fp"  
  39.             ohos:left_margin="20vp"  
  40.             ohos:top_margin="15vp"  
  41.             ohos:background_element="$graphic:circle_button_element"  
  42.             ohos:text="2"  
  43.             ohos:text_alignment="center"/>  
  44.         <Button  
  45.             ohos:width="50vp"  
  46.             ohos:height="50vp"  
  47.             ohos:text_size="15fp"  
  48.             ohos:left_margin="20vp"  
  49.             ohos:top_margin="15vp"  
  50.             ohos:background_element="$graphic:circle_button_element"  
  51.             ohos:text="3"  
  52.             ohos:text_alignment="center"/>  
  53.         <Button  
  54.             ohos:width="50vp"  
  55.             ohos:height="50vp"  
  56.             ohos:text_size="15fp"  
  57.             ohos:left_margin="20vp"  
  58.             ohos:top_margin="15vp"  
  59.             ohos:background_element="$graphic:circle_button_element"  
  60.             ohos:text="4"  
  61.             ohos:text_alignment="center"/>  
  62.         <Button  
  63.             ohos:width="50vp"  
  64.             ohos:height="50vp"  
  65.             ohos:text_size="15fp"  
  66.             ohos:left_margin="20vp"  
  67.             ohos:top_margin="15vp"  
  68.             ohos:background_element="$graphic:circle_button_element"  
  69.             ohos:text="5"  
  70.             ohos:text_alignment="center"/>  
  71.         <Button  
  72.             ohos:width="50vp"  
  73.             ohos:height="50vp"  
  74.             ohos:text_size="15fp"  
  75.             ohos:left_margin="20vp"  
  76.             ohos:top_margin="15vp"  
  77.             ohos:background_element="$graphic:circle_button_element"  
  78.             ohos:text="6"  
  79.             ohos:text_alignment="center"/>  
  80.         <Button  
  81.             ohos:width="50vp"  
  82.             ohos:height="50vp"  
  83.             ohos:text_size="15fp"  
  84.             ohos:left_margin="20vp"  
  85.             ohos:top_margin="15vp"  
  86.             ohos:background_element="$graphic:circle_button_element"  
  87.             ohos:text="7"  
  88.             ohos:text_alignment="center"/>  
  89.         <Button  
  90.             ohos:width="50vp"  
  91.             ohos:height="50vp"  
  92.             ohos:text_size="15fp"  
  93.             ohos:left_margin="20vp"  
  94.             ohos:top_margin="15vp"  
  95.             ohos:background_element="$graphic:circle_button_element"  
  96.             ohos:text="8"  
  97.             ohos:text_alignment="center"/>  
  98.         <Button  
  99.             ohos:width="50vp"  
  100.             ohos:height="50vp"  
  101.             ohos:text_size="15fp"  
  102.             ohos:left_margin="20vp"  
  103.             ohos:top_margin="15vp"  
  104.             ohos:background_element="$graphic:circle_button_element"  
  105.             ohos:text="9"  
  106.             ohos:text_alignment="center"/>  
  107.         <Button  
  108.             ohos:width="50vp"  
  109.             ohos:height="50vp"  
  110.             ohos:text_size="15fp"  
  111.             ohos:left_margin="20vp"  
  112.             ohos:top_margin="15vp"  
  113.             ohos:background_element="$graphic:circle_button_element"  
  114.             ohos:text="*"  
  115.             ohos:text_alignment="center"/>  
  116.         <Button  
  117.             ohos:width="50vp"  
  118.             ohos:height="50vp"  
  119.             ohos:text_size="15fp"  
  120.             ohos:left_margin="20vp"  
  121.             ohos:top_margin="15vp"  
  122.             ohos:background_element="$graphic:circle_button_element"  
  123.             ohos:text="0"  
  124.             ohos:text_alignment="center"/>  
  125.         <Button  
  126.             ohos:width="50vp"  
  127.             ohos:height="50vp"  
  128.             ohos:text_size="15fp"  
  129.             ohos:left_margin="20vp"  
  130.             ohos:top_margin="15vp"  
  131.             ohos:background_element="$graphic:circle_button_element"  
  132.             ohos:text="#"  
  133.             ohos:text_alignment="center"/>  
  134.     </TableLayout>  
  135.     <DirectionalLayout  
  136.         ohos:width="match_content"  
  137.         ohos:height="match_content"  
  138.         ohos:top_margin="20vp"  
  139.         ohos:layout_alignment="horizontal_center"  
  140.         ohos:orientation="horizontal">  
  141.         <Button  
  142.             ohos:id="$+id:call"  
  143.             ohos:width="60vp"  
  144.             ohos:height="35vp"  
  145.             ohos:text_size="15fp"  
  146.             ohos:text="CALL"  
  147.             ohos:background_element="$graphic:button_element"  
  148.             ohos:text_alignment="center"/>  
  149.         <Button  
  150.             ohos:id="$+id:clear"  
  151.             ohos:width="60vp"  
  152.             ohos:height="35vp"  
  153.             ohos:text_size="15fp"  
  154.             ohos:text="CLEAR"  
  155.             ohos:background_element="$graphic:button_element"  
  156.             ohos:left_margin="10vp"  
  157.             ohos:text_alignment="center"/>  
  158.     </DirectionalLayout>  
  159. </DirectionalLayout> 

编写AbilitySlice文件

在src/main/java/com/huawei/codelab/slice目录下新建TableLayoutSlice.java文件，继承AbilitySlice。

定义成员变量，加载布局：

  1. private Text info;  
  2. private Button call;  
  3. private Button clear;  
  4.   
  5. @Override  
  6. public void onStart(Intent intent) {  
  7.     super.onStart(intent);  
  8.     super.setUIContent(ResourceTable.Layout_table_layout);  
  9.     initComponent();  
  10.     setClickedListener();  
  11. } 

初始化组件：

  1. private void initComponent() {  
  2.     info = (Text)findComponentById(ResourceTable.Id_info);  
  3.     call = (Button)findComponentById(ResourceTable.Id_call);  
  4.     clear = (Button)findComponentById(ResourceTable.Id_clear);  
  5. } 

设置点击事件：

  1. private void setClickedListener() {  
  2.     call.setClickedListener(new Component.ClickedListener() {  
  3.         @Override  
  4.         public void onClick(Component component) {  
  5.             String toastInfo = info.getText();  
  6.             if (toastInfo == null || toastInfo.isEmpty()) {  
  7.                 toastInfo = "Please enter the number!";  
  8.             } else {  
  9.                 toastInfo = "Call " + info.getText();  
  10.             }  
  11.             new ToastDialog(getContext())  
  12.                     .setText(toastInfo)  
  13.                     .setAlignment(LayoutAlignment.CENTER)  
  14.                     .setOffset(0,180)  
  15.                     .show();  
  16.         }  
  17.     });  
  18.   
  19.     clear.setClickedListener(new Component.ClickedListener() {  
  20.         @Override  
  21.         public void onClick(Component component) {  
  22.             info.setText("");  
  23.         }  
  24.     });  
  25.   
  26.     TableLayout table = (TableLayout)findComponentById(ResourceTable.Id_table);  
  27.     int childNum = table.getChildCount();  
  28.     for (int index = 0; index < childNum; index++) {  
  29.         Button child = (Button)(table.getComponentAt(index));  
  30.         child.setClickedListener(new Component.ClickedListener() {  
  31.             @Override  
  32.             public void onClick(Component component) {  
  33.                 if (component instanceof Button) {  
  34.                     Button button = (Button)component;  
  35.                     info.setText(info.getText() + button.getText());  
  36.                 }  
  37.             }  
  38.         });  
  39.     }  
  40. } 

关联主页跳转

在src/main/java/com/huawei/codelab/slice/MainAbilitySlice.java的onClick方法中增加关联跳转。

  1. @Override  
  2. public void onClick(Component component) {  
  3.     String className = "";  
  4.     switch (component.getId()) {  
  5.         case ResourceTable.Id_table_layout:  
  6.             className = "com.huawei.codelab.slice.TableLayoutSlice";  
  7.             break;  
  8.         default:  
  9.             break;  
  10.     }  
  11.     abilitySliceJump(className);  
  12. } 

运行程序

点击**Run> Run ‘entry’**运行hap包，进入到程序主页，点击主页的TableLayout即可看到拨号盘页面。点击拨号盘上的按钮，拨号盘上方会显示输入的号码;点击拨号盘下方的CLEAR按钮，拨号盘上方显示内容将清空。效果如下所示：

点击下方的CALL按钮，将弹出ToastDialog，效果如下所示：

说明

此篇Codelab中的所有代码仅供demo演示参考使用。

12. 恭喜您

您已经成功完成了HarmonyOS Project开发常用布局和组件的体验，并学到了：

  • 如何创建一个手机HarmonyOS Project并添加页面布局
  • 如何使用DirectionalLayout、DependentLayout、StackLayout、TableLayout等常用布局
  • 如何使用TabList、ListContainer、DatePicker、RadioContainer、Checkbox等常用组件

如何在此篇Codelab的框架基础上实现一个组件或者布局?相信您的心中已有答案，快来试一试吧!

想了解更多内容，请访问：

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

https://harmonyos.51cto.com

 

责任编辑：jianghua 来源： 鸿蒙社区
鸿蒙HarmonyOS应用
相关推荐
基于JS通用组件的鸿蒙购物应用开发
文章由鸿蒙社区产出，想要了解更多内容请前往：51CTO和华为官方战略合作共建的鸿蒙技术社区https:harmonyos.51cto.com

2021-04-23 16:08:08

鸿蒙HarmonyOS应用
通用Java文件上传和下载组件的设计与实现
不少人在实现上传或下载功能时总是不知不觉间与程序的业务逻辑纠缠在一起，因此，当其他地方要用到这些功能时则无可避免地CopyPase，然后再进行修改。这样丑陋不堪的做法导致非常容易出错不说，更大的问题是严重浪费时间不断做重复类似的工作……

2012-03-27 11:08:23

Java
详解WinForm通用速选组件的构建
在这里我们要讨论的是WinForm通用速选组件的构建，希望对大家了解WinForm组件有所帮助。

2009-11-30 08:38:35

WinForm
使用 Vue Demi 构建通用的 Vue 组件库
在本文中，我们通过考虑其功能、工作原理以及如何开始使用它来了解VueDemi。VueDemi是一个很棒的包，具有很多潜力和实用性。我强烈建议在创建下一个Vue库时使用它。

2022-02-08 15:55:00

Vue组件库Vue Demi
手写网关上高性能通用熔断组件！
在冰河的知识星球除了目前正在热更的高性能网关外，还有其他7个项目，像高性能熔断组件、分布式IM即时通讯系统、Sekill分布式秒杀系统、手写RPC、简易商城系统等等，这些项目的需求、方案、架构、落地等均来自互联网真实业务场景，让你真正学到互联网大厂的业务与技术落地方案，并将其有效转化为自己的知识储备。

2024-10-05 00:00:05

高性能分布式IM
OpenHarmony eTS通用日志组件，写日志快一点
在开发的过程中总要通过日志输出来完成一些调试工作，所以写日志是避免不了的，日志记录的功能并不复杂，却是必要的、重复的，每个页面要引入日志工具类。

2022-05-10 10:53:55

日志组件鸿蒙
通用社区登录组件技术分享(开源)上篇:OAuth授权登录
最近，想为秋色园增加一个：新浪微博登录：为此花了点时间研究了新浪微博的API。由于微博精灵系列软件并没有使用微博API，所以虽然开了一年多新浪微博应用软件，却从没研究相关的API，所以和OAuth授权一直没能擦上边。

2012-11-07 10:01:52

组件技术OAuth授权登陆
通用社区登陆组件技术分享中篇:OAuth登陆组件流程
本文主要讲解了第三方社区账号登陆的授权流程，OAuth2组件的下载及web.config配置以及OAuth2组件的5行代码编写流程。详细请看下文

2012-11-07 10:09:11

组件技术OAuth授权登陆
如何通过vue实现一款简单通用的翻页组件
翻到某个列表的某一页之后，点击某一项到编辑页，编辑完成后希望能够返回到跳转之前的那一页。这个需求如果仅仅用上面的pager组件，实现起来就不是很方便。也许有人会说结合vuex可以，但是这样的话需要在state中记录下跳转前的页码。假如有很多个翻页列表，就需要记录多个，这显然并不优雅。

2016-09-19 13:44:54

vue翻页组件Web
HarmonyOS 通用的应用引导功能
手机APP的引导页是一个常见的功能，今天和大家一起分享在鸿蒙系统的撸引导页代码的经验。引导的内容文字不宜太长，适当加入一些图案可以方便用户理解。开始咱们今天的主题，如何实现应用的引导功能吧!

2021-08-26 15:41:40

鸿蒙HarmonyOS应用
Java实现通用组合算法
Java是一种简单的，面向对象的，分布式的，解释型的，健壮安全的，结构中立的，可移植的，性能优异、多线程的动态语言。通用组合算法是经典数据结构算法。本文介绍的是通用组合算法用Java来实现，一起来看。

2011-04-20 10:58:34

Java
鸿蒙-Java UI组件和布局Demo代码
文章由鸿蒙社区产出，想要了解更多内容请前往：51CTO和华为官方战略合作共建的鸿蒙技术社区https:harmonyos.51cto.comzz

2021-01-20 13:50:36

鸿蒙HarmonyOS应用开发
HarmonyOS中建议的通用间隔参数
文章由鸿蒙社区产出，想要了解更多内容请前往：51CTO和华为官方战略合作共建的鸿蒙技术社区https:harmonyos.51cto.com

2021-06-03 09:36:38

鸿蒙HarmonyOS应用
鸿蒙开源三方组件--HttpClient组件 Kalle
Kalle是一个HttpClient，它遵循Http标准协议，支持同步请求和异步请求。支持GET、HEAD、OPTIONS、TRACE、POST、PUT、PATCH、DELETE请求方法。

2021-08-02 14:54:50

鸿蒙HarmonyOS应用
Django之路 如何开发通用且万能的的权限框架组件
我是51CTO学院讲师Alex(李杰)，在51CTO学院“4.20IT充电节”(4月1920日)到来之际，和大家分享一下Django之路。

2017-04-18 10:36:19

权限框架组件Django
HarmonyOS ArkUI-eTS通用事件监听
本篇给大家带来ArkUIeTS通用事件监听的相关知识，希望对你有所帮助！

2022-02-23 15:36:46

ArkUI-eTS事件监听鸿蒙
鸿蒙HarmonyOS组件的分布式适配和应用畅想
文章由鸿蒙社区产出，想要了解更多内容请前往：51CTO和华为官方战略合作共建的鸿蒙技术社区https:harmonyos.51cto.comzz

2021-01-21 09:45:36

鸿蒙HarmonyOS分布式
鸿蒙JS自定义组件—长按膨胀按钮组件
常见的长按事件onlongpress不能设定长按的时间，除此之外，绑定了长按事件的按钮在完成长按操作前后并没有明显的样式变化，用户无法从中得到长按操作进行的反馈，在有此类需求的场景时是无法满足的。

2022-10-25 15:12:24

自定义组件鸿蒙
鸿蒙第三方组件-图片裁剪组件
文章由鸿蒙社区产出，想要了解更多内容请前往：51CTO和华为官方战略合作共建的鸿蒙技术社区https:harmonyos.51cto.com

2021-03-03 09:42:26

鸿蒙HarmonyOS图片裁剪
鸿蒙JS自定义组件—局部放大图片组件
主要通过Canvas组件的drawImage方法实现图片显示。该方法需要输入9个参数，分别是图片对象，原图的X轴裁剪起点，原图的Y轴裁剪起点，裁剪的宽度，裁剪的高度，画布X轴画图的起点，画布Y轴画图的起点，画布的宽度，画布的高度。

2022-10-26 15:54:46

canvas组件鸿蒙
点赞
收藏

51CTO技术栈公众号

业务
速览
在线客服