鸿蒙OS利用JAVA编写的布局实践练习_鸿蒙在ava代码中编写布局

---

JAVA UI框架

  应用的Ability在屏幕上将显示一个用户界面，该界面用来显示所有可被用户查看和交互的内容。应用中所有的用户界面元素都是由Component和ComponentContainer对象构成。Component是绘制在屏幕上的一个对象，用户能与之交互。ComponentContainer是一个用于容纳其他Component和ComponentContainer对象的容器。

  Java UI框架提供了一部分Component和ComponentContainer的具体子类，即创建用户界面（UI）的各类组件，包括一些常用的组件（比如：文本、按钮、图片、列表等）和常用的布局（比如：DirectionalLayout和DependentLayout）。用户可通过组件进行交互操作，并获得响应。所有的UI操作都应该在主线程进行设置。

  如上图所示，JAVA UI组件结构主要包含Component和ComponentContainer。

• Component：提供内容显示，是界面中所有组件的基类，开发者可以给Component设置事件处理回调来创建一个可交互的组件。Java
  UI框架提供了一些常用的界面元素，也可称之为组件，组件一般直接继承Component或它的子类，如Text、Image等。
• ComponentContainer：作为容器容纳Component或ComponentContainer对象，并对它们进行布局。Java UI框架提供了一些标准布局功能的容器，它们继承自ComponentContainer，一般以“Layout”结尾，如DirectionalLayout、DependentLayout等。

  每种布局都根据自身特点提供LayoutConfig供子Component设定布局属性和参数，通过指定布局属性可以对子Component在布局中的显示效果进行约束。例如：“width”、“height”是最基本的布局属性，它们指定了组件的大小。

利用JAVA代码实现一个简单的布局

  首先打开DevEco Studio创建一个新项目，这里采用wearable的java空模版，填写好项目名进入项目。.

  先观察项目的文件树，其中entry是程序的入口，我们进入src目录，打开main文件夹下的Java文件夹，因为此处我们是利用Java代码去实现一个UI界面，因此只要在这里面进行代码编写。

  可以看到Java的目录下存在着两个.java文件和一个slice文件夹，它们都是由程序自动创建的，其中MainAbility.java是页面信息，其中一般包含的是AbilitySlice的进入设置，也就是设置路由(setMainRoute(MainAbilitySlice.class.getName()))。clickAdd.java是跟项目名同名的一个文件，我的理解是初始化。因此我们主要的代码编写是在MainAbilitySlice.java，这是页面信息的布局文件。先看看MainAbilitySlice.java里的源码：

package com.example.csdndemo.slice;

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;

import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.DirectionalLayout.LayoutConfig;
import ohos.agp.components.Text;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;
import ohos.agp.utils.TextAlignment;

public class MainAbilitySlice extends AbilitySlice {
   
	// 声明一个布局，布局方式是按照水平或者垂直方向排布，能够方便地对齐布局内的组件
	// 也就是一行或者一列进行布局的布局方式
    private DirectionalLayout myLayout = new DirectionalLayout(this);

    @Override
    public void onStart(Intent intent) {
   
    	// 父类的onStart()方法
        super.onStart(intent);
        // 布局大小匹配父类，也就是与主窗口大小匹配
        LayoutConfig config = new 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25