HarmonyOS APP组件分享(一)

作者：鸿蒙时代 2021-03-17 09:35:09系统 OpenHarmony 文章由鸿蒙社区产出，组件想要了解更多内容请前往：51CTO和华为官方战略合作共建的分享鸿蒙技术社区https://harmonyos.51cto.com

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

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

https://harmonyos.51cto.com

HarmonyOSAPP-Image体验与分享

一、各项效果展示

二、分享体验操作过程

这里敲的组件是一个image的案例

实现我们得导入一张图片，把这张图片导入到“entry > src > main > resources > base > media”中，分享如下图所示：

这里我们可以通过在布局里面使用Image标签进行图片的组件插入和样式的设置。

这里我们可以通过image_src导入想要的分享图片，这里要注意图片的组件规格和大小。

我们也可以通过alpha色泽图片的分享透明性

我们也可以通过scale_x,scale_y设置图片的缩放系数

我们这里也可以通过设置clip_alignment控制裁剪的位置

三、完整代码下载

https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_image_component

HarmonyOSAPP-TextField体验与分享

TextField提供了一种文本输入框。组件下面会通过一个案例给大家展示一下这个组件。分享

显示效果：

代码如下：

Slice文件中 
 
package com.example.jltftiyan3.slice; 
 
import com.example.jltftiyan3.ResourceTable; 
import ohos.aafwk.ability.AbilitySlice; 
import ohos.aafwk.content.Intent; 
import ohos.agp.components.Button; 
import ohos.agp.components.Component; 
import ohos.agp.components.Text; 
import ohos.agp.components.TextField; 
import ohos.agp.components.element.ShapeElement; 
 
public class MainAbilitySlice extends AbilitySlice {  
    @Override 
    public void onStart(Intent intent) {  
        super.onStart(intent); 
        super.setUIContent(ResourceTable.Layout_ability_main); 
 
    } 
 
    @Override 
    public void onActive() {  
        super.onActive(); 
    } 
 
    @Override 
    public void onForeground(Intent intent) {  
        super.onForeground(intent); 
    } 
} 

布局中的组件代码：

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:width="match_parent" 
    ohos:height="match_parent" 
    ohos:background_element="#FFC9C3C3" 
    ohos:orientation="vertical"> 
 
    <StackLayout 
        ohos:top_margin="60vp" 
        ohos:width="match_parent" 
        ohos:height="match_content" 
        ohos:layout_alignment="center"> 
        <TextField 
            ohos:id="$+id:name_textField" 
            ohos:width="1000px" 
            ohos:height="match_content" 
            ohos:multiple_lines="false" 
            ohos:left_padding="24vp" 
            ohos:right_padding="24vp" 
            ohos:top_padding="8vp" 
            ohos:bottom_padding="8vp" 
            ohos:min_height="44vp" 
            ohos:text_size="18fp" 
            ohos:layout_alignment="center" 
            ohos:text_alignment="center_vertical" 
            ohos:background_element="$graphic:jltfbackground_text_field" 
            ohos:hint="请输入账号" /> 
 
    </StackLayout> 
 
    <TextField 
        ohos:top_margin="40vp" 
        ohos:id="$+id:password_text_field" 
        ohos:width="1000px" 
        ohos:height="match_content" 
        ohos:multiple_lines="false" 
        ohos:left_padding="24vp" 
        ohos:right_padding="24vp" 
        ohos:top_padding="8vp" 
        ohos:bottom_padding="8vp" 
        ohos:min_height="44vp" 
        ohos:text_size="18fp" 
        ohos:layout_alignment="center" 
        ohos:text_alignment="center_vertical" 
        ohos:background_element="$graphic:jltfbackground_text_field" 
        ohos:hint="请输入密码" /> 
 
    <Button 
        ohos:top_margin="40vp" 
        ohos:id="$+id:ensure_button" 
        ohos:width="120vp" 
        ohos:height="35vp" 
        ohos:background_element="$graphic:jltfbackground_btn" 
        ohos:text="Log in" 
        ohos:text_size="20fp" 
        ohos:layout_alignment="horizontal_center"/> 
 
</DirectionalLayout> 

完整代码包地址：https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_TextField_component

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

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

https://harmonyos.51cto.com

 

责任编辑：jianghua 来源： 鸿蒙社区 鸿蒙HarmonyOS应用开发

(责任编辑：娱乐)