#跟着坚果学鸿蒙#开发说明

HarmonyOS提供了Ability和AbilitySlice两个基础类。有界面的Ability绑定了系统的Window进行UI展示，且具有生命周期。AbilitySlice主要用于承载Ability的具体逻辑实现和界面UI，是应用显示、运行和跳转的最小单元。AbilitySlice通

过setUIContent()为界面设置布局。

组件需要进行组合，并添加到界面的布局中。在Java UI框架中，提供了两种编写布局的方式：

⚫ 在代码中创建布局：用代码创建Component和ComponentContainer对象，为这些对象设置合适的布局参数和属性值，并将 Component添加到ComponentContainer中，从而创建出完整界面。

⚫ 在XML中声明UI布局：按层级结构来描述Component和ComponentContainer的关系，给组件节点设定合适的布局参数和属性值，代码中可直接加载生成此布局。

这两种方式创建出的布局没有本质差别，在XML中声明布局，在加载后同样可在代码中对该布局进行修改。

组件分类

根据组件的功能，可以将组件分为布局类、显示类、交互类三类：

框架提供的组件使应用界面开发更加便利，这些组件的具体功能说明及属性设置详见API参考。

代码创建布局

开发如下图所示界面，需要添加一个Text组件和Button组件。由于两个组件从上到下依次居中排列，可以选择使用竖向的DirectionalLayout布局来放置组件。

代码创建布局需要分别创建组件和布局，并将它们进行组织关联。

创建组件 1. 声明组件

Button button = new Button(context); // 参数 context表示 AbilitySlice的 Context对象 

设置组件大小

button.setWidth(ComponentContainer.LayoutConfig.MATCH_CONTENT); button.setHeight(ComponentContainer.LayoutConfig.MATCH_CONTENT); 

设置组件属性及 ID

button.setText("My name is Button."); button.setTextSize(25); button.setId(ID_BUTTON); 

创建布局并使用

1. 声明布局

DirectionalLayout directionalLayout = new DirectionalLayout(context); 

设置布局大小

directionalLayout.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT); 

directionalLayout.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT); 

设置布局属性及 ID

directionalLayout.setOrientation(Component.VERTICAL); 

将组件添加到布局中（视布局需要对组件设置布局属性进行约束）

directionalLayout.addComponent(button); 

将布局添加到组件树中

setUIContent(directionalLayout);

完整代码示例：

@Override public void onStart(Intent intent) {     super.onStart(intent);     // 步骤 1 声明布局     DirectionalLayout directionalLayout = new DirectionalLayout(context);     // 步骤 2 设置布局大小 directionalLayout.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT); directionalLayout.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT); // 步骤 3 设置布局属性及 ID（ID视需要设置即可）     directionalLayout.setOrientation(Component.VERTICAL);     directionalLayout.setPadding(32, 32, 32, 32);       Text text = new Text(context);     text.setText("My name is Text.");     text.setTextSize(50);     text.setId(100);     // 步骤 4.1 为组件添加对应布局的布局属性  DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(LayoutConfig.MATCH_CONTENT,  LayoutConfig.MATCH_CONTENT);     layoutConfig.alignment = LayoutAlignment.HORIZONTAL_CENTER;     text.setLayoutConfig(layoutConfig);       // 步骤 4.2 将 Text添加到布局中     directionalLayout.addComponent(text);       // 类似的添加一个 Button  Button button = new Button(context);     layoutConfig.setMargins(0, 50, 0, 0);     button.setLayoutConfig(layoutConfig);     button.setText("My name is Button.");     button.setTextSize(50); button.setId(100);     ShapeElement background = new ShapeElement();     background.setRgbColor(new RgbColor(0, 125, 255));     background.setCornerRadius(25);     button.setBackground(background);     button.setPadding(10, 10, 10, 10);     button.setClickedListener(new Component.ClickedListener() {         @Override// 在组件中增加对点击事件的检测         public void onClick(Component Component) {             // 此处添加按钮被点击需要执行的操作         }     }); directionalLayout.addComponent(button);       // 步骤 5 将布局作为根布局添加到视图树中     super.setUIContent(directionalLayout); } 

根据以上步骤创建组件和布局后的界面显示效果如图 1所示。其中，代码示例中为组件设置了一个按键回调，在按键被按下后，应用会执行自定义的操作。

在代码示例中，可以看到设置组件大小的方法有两种：

⚫ 通过 setWidth/setHeight直接设置宽高。

⚫ 通过 setLayoutConfig方法设置布局属性来设定宽高。

这两种方法的区别是后者还可以增加更多的布局属性设置，例如：使用

“alignment”设置水平居中的约束。另外，这两种方法设置的宽高以最后设置的作为最终结果。它们的取值一致，可以是以下取值：

⚫ 具体以像素为单位的数值。

⚫ MATCH_PARENT：表示组件大小将扩展为父组件允许的最大值，它将占据父组件方向上的剩余大小。

⚫ MATCH_CONTENT：表示组件大小与它内容占据的大小范围相适应。