HarmonyOS APP组件分享(一)

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

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

本文转载自网络，原文链接：https://harmonyos.51cto.com/#zz
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！