2024年HarmonyOS鸿蒙最新鸿蒙HarmonyOS APP开发入门3——组件（八 输入框组件 ）(1)，HarmonyOS鸿蒙初级面试

于 2024-05-14 06:38:38 发布
阅读量473 收藏 5
点赞数 5
分类专栏： 程序员 文章标签： 鸿蒙 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84871699/article/details/138833585
版权

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！


img
img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

<TextField
 ...
 ohos:multiple\_lines="true"/>
设置TextField不可用状态

通过TextField的Enable属性来控制文本框是否可用，当设置成false后，文本框输入功能不可用。

textField.setEnabled(false);
响应焦点变化
textField.setFocusChangedListener((component, isFocused) -> {
    
    if (isFocused) { 
        // 获取到焦点
        ...
    } else { 
        // 失去焦点
        ...
    }
});
设置基线
<TextField
 ...
 ohos:basement="#ff0000" />

设置基线的效果

img

实践运用

实践1

当点击登录按钮，将会出现错误提示，同时将会改变TextField的状态。

演示TextField错误提示效果
点击放大

  • ability_text_field.xml代码示例：
<?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="#FF000000"
 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="600vp"
 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="vertical\_center"
 ohos:background\_element="$graphic:background\_text\_field"
 ohos:hint="Enter phone number or email" />

        <Text
 ohos:visibility="hide"
 ohos:id="$+id:error\_tip\_text"
 ohos:width="match\_content"
 ohos:height="match\_content"
 ohos:top\_padding="8vp"
 ohos:bottom\_padding="8vp"
 ohos:right\_margin="20vp"
 ohos:text="Incorrect account or password"
 ohos:text\_size="18fp"
 ohos:text\_color="red"
 ohos:layout\_alignment="right"/>
    </StackLayout>

    <TextField
 ohos:top\_margin="40vp"
 ohos:id="$+id:password\_text\_field"
 ohos:width="600vp"
 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="vertical\_center"
 ohos:background\_element="$graphic:background\_text\_field"
 ohos:hint="Enter password" />

    <Button
 ohos:top\_margin="40vp"
 ohos:id="$+id:ensure\_button"
 ohos:width="120vp"
 ohos:height="35vp"
 ohos:background\_element="$graphic:background\_btn"
 ohos:text="Log in"
 ohos:text\_size="20fp"
 ohos:layout\_alignment="horizontal\_center"/>

</DirectionalLayout>

background_text_field.xml代码示例：

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
 ohos:shape="rectangle">
    <corners
 ohos:radius="40"/>
    <solid
 ohos:color="white"/>
    <stroke
 ohos:color="black"
 ohos:width="6"/>
</shape>

background_btn.xml代码示例：

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
 ohos:shape="rectangle">
    <corners
 ohos:radius="35"/>
    <solid
 ohos:color="white"/>
</shape>
  • Java代码示例：
// 当点击登录，改变相应组件的样式
Button button = (Button) findComponentById(ResourceTable.Id\_ensure\_button);
button.setClickedListener((component -> {
    // 显示错误提示的Text
    Text text = (Text) findComponentById(ResourceTable.Id\_error\_tip\_text);
    text.setVisibility(Component.VISIBLE);

    // 显示TextField错误状态下的样式
    ShapeElement errorElement = new ShapeElement(this, ResourceTable.Graphic\_background\_text\_field\_error);
    TextField textField = (TextField) findComponentById(ResourceTable.Id\_name\_textField);
    textField.setBackground(errorElement);

    // TextField失去焦点
    textField.clearFocus();
}));

其中background_text_field_error.xml代码示例：

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
 ohos:shape="rectangle">
    <corners
 ohos:radius="40"/>
    <solid
 ohos:color="gray"/>
    <stroke
 ohos:color="#E74C3C"
 ohos:width="6"/>
</shape>
实践2

获取文本输入框中的内容并进行吐司提示

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:background\_element="#F2F2F2" 
 ohos:orientation="vertical" >
    <TextField 
 ohos:id="$+id:text"
 ohos:height="50vp" 
 ohos:width="319vp"
 ohos:background\_element="#FFFFFF" 
 ohos:hint="请输入信息" 
 ohos:hint\_color="#999999" 
 ohos:layout\_alignment="horizontal\_center" 
 ohos:text\_alignment="center" 
 ohos:text\_size="17fp" 
 ohos:top\_margin="100vp"/>
    <Button 
 ohos:id="$+id:but" 
 ohos:height="47vp" 
 ohos:width="319vp" 
 ohos:background\_element="#21a8FD" 
 ohos:layout\_alignment="center" 
 ohos:text="获取信息" 
 ohos:text\_alignment="center" 
 ohos:text\_color="#FEFEFE" 
 ohos:text\_size="24vp" 
 ohos:top\_margin="77vp"/> 
</DirectionalLayout>

Java代码

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { 
    
    TextField tf; Button but; @Override
	public void onStart(Intent intent) { 
        super.onStart(intent); 
        super.setUIContent(ResourceTable.Layout\_ability\_main); 
        //1.找到文本输入框组件对象 
        tf = (TextField) findComponentById(ResourceTable.Id\_text); 
        //找到按钮组件对象
	    but = (Button) findComponentById(ResourceTable.Id\_but); 
        //2.给按钮绑定一个点击事件 //当点击了按钮之后，就要获取文本输入框中的内容
		but.setClickedListener(this); 
    }
    @Override
	public void onActive() { 
        super.onActive(); 
    }
    @Override
	public void onForeground(Intent intent) { 
        super.onForeground(intent); 
    }
    @Override
	public void onClick(Component component) { 
        //当点击了按钮之后，获取文本输入框中的内容 
        String message = tf.getText(); 
        //利用一个吐司将信息弹出 
        ToastDialog td = new ToastDialog(this); 
        //大小不用设置，默认就是包裹内容的 
        //自动关闭不用设置，默认到了时间之后就自动关闭 
        //持续时间可以不用设置，默认2秒 //设置吐司的背景。 
        td.setTransparent(true); 
        //位置（默认居中） 
        td.setAlignment(LayoutAlignment.BOTTOM);
        //设置一个偏移 
        td.setOffset(0,200);
        //设置吐司的内容 
        td.setText(message); 


![img](https://img-blog.csdnimg.cn/img_convert/e88292e934f9eb3da386022b0b84f4c8.png)
![img](https://img-blog.csdnimg.cn/img_convert/5e785b4ecad7a1a464fed44fa340f408.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**


[外链图片转存中...(img-O10Cy5w3-1715639895557)]
[外链图片转存中...(img-yyIay39B-1715639895557)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
2401_84871699
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值