HarmonyOS鸿蒙Next应用开发练习：设置文本内容大小，位置，颜色，监听器

HarmonyOS鸿蒙Next应用开发练习：设置文本内容大小，位置，颜色，监听器

Image

Image

MainAbility.java

package com.example.abilityui;

import com.example.abilityui.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.*;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;
import ohos.agp.utils.TextAlignment;

public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        initUIbyXML();
        // 这里结合了xml和java 进行界面布局
        // initUIbyJava();//这里调用的是java封装好的布局
    }

    private void initUIbyXML(){
        setUIContent(ResourceTable.Layout_Ability_ui);
        Text text = (Text)findComponentById(ResourceTable.Id_test_text);
        Button button = (Button) findComponentById(ResourceTable.Id_test_button);

        ShapeElement element = new ShapeElement();
        element.setCornerRadius(30);
        element.setRgbColor(new RgbColor(43,156,15));

        button.setClickedListener(new Component.ClickedListener() {
            private int a = 0;
            @Override
            public void onClick(Component component) {
                a++;
                text.setText("Clicked:"+a);
            }
        });
    }

    private void initUIbyJava(){
        // 定义一个容器对象，使用绝对定位来管理组件容器
        ComponentContainer container = new PositionLayout(this);

        container.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);
        container.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);

        // 创建一个文本框对象
        Text text = new Text(this);
        text.setText("Hello word!");
        text.setTop(100);
        text.setLeft(140);
        text.setWidth(200);
        text.setHeight(40);
        text.setTextColor(Color.RED);
        text.setTextSize(36);
        text.setTextAlignment(TextAlignment.CENTER);

        // 使用ShapeElement设置按钮的外观
        ShapeElement element = new ShapeElement();
        element.setRgbColor(new RgbColor(231,135,255));
        element.setCornerRadius(30);

        // 创建一个按钮对象
        Button button = new Button(this);
        button.setText("点我!");
        button.setTop(150);
        button.setLeft(130);
        button.setWidth(200);
        button.setHeight(40);
        button.setBackground(element);
        button.setClickedListener(new Component.ClickedListener() {
            private int a = 0;
            @Override
            public void onClick(Component component) {
                a++;
                text.setText("Clicked:"+a);
            }
        });

        // 将文本对象放到容器中去
        container.addComponent(text);
        container.addComponent(button);

        // 当前的容器委托来管理组件
        setUIContent(container);
    }
}

Ability_ui.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Component
        ohos:width="match_parent"
        ohos:height="70"/>

    <Text
        ohos:id="$+id:test_text"
        ohos:text="Hello world!"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:layout_alignment="center"
        ohos:top_margin="30"
        ohos:text_size="40"/>

    <Button
        ohos:id="$+id:test_button"
        ohos:text="点我!"
        ohos:width="200"
        ohos:height="50"
        ohos:layout_alignment="center"
        ohos:top_margin="30"
        ohos:background_element="#FF00FF00"
        ohos:text_size="30"/>
</DirectionalLayout>

更多关于HarmonyOS鸿蒙Next应用开发练习：设置文本内容大小，位置，颜色，监听器的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next应用开发中，设置文本内容的大小、位置、颜色以及监听器可以通过以下方式实现：

  1. 设置文本大小：使用Text组件的textSize属性，可以通过fp或px单位指定文本大小。例如：

    Text('Hello World')
  .textSize(20)

  2. 设置文本位置：通过Text组件的textAlign属性可以设置文本的对齐方式，如TextAlign.Start、TextAlign.Center、TextAlign.End。例如：

    Text('Hello World')
  .textAlign(TextAlign.Center)

  3. 设置文本颜色：使用Text组件的fontColor属性，可以通过Color类指定文本颜色。例如：

    Text('Hello World')
  .fontColor(Color.Red)

  4. 设置监听器：通过Text组件的onClick属性可以设置点击事件的监听器。例如：

    Text('Hello World')
  .onClick(() => {
    console.log('Text clicked');
  })

这些操作可以在ArkUI框架中通过声明式UI语法实现，适用于HarmonyOS鸿蒙Next应用开发。

更多关于HarmonyOS鸿蒙Next应用开发练习：设置文本内容大小，位置，颜色，监听器的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next应用开发中，设置文本内容的大小、位置、颜色及监听器可以通过以下步骤实现：

  1. 设置文本大小：使用Text组件的textSize属性，如textSize: 20。
  2. 设置文本位置：通过Text组件的layout属性或align属性调整位置，如align: Alignment.Center。
  3. 设置文本颜色：使用Text组件的textColor属性，如textColor: Color.Red。
  4. 设置监听器：通过onClick事件监听用户点击，如onClick: () { print("Text clicked"); }。

这些操作可以在Text组件的属性中直接配置，实现文本的样式和交互功能。

回到顶部