输入框（TextInput）和按钮（Button）

输入框和按钮在掌握了ArkTS的基础语法以及ArkUI框架的基本界面设计之后，学习如何使用输入框（TextInput）和按钮（Button）成为接下来的必经之路。这两种组件是开发应用程序时最常用的基础交互元素，它们不仅能够接收用户输入，还能触发相应的操作逻辑。为帮助大家深入理解它们的实际应用场景，本节将详细讲解输入框和按钮的用法。在日常的软件使用场景中，我们经常需要输入内容。例如，在登录界面中，用户需要输入用户名和密码，并点击登录按钮提交信息，以完成身份验证。登录界面作为一个经典的案例，能够很好的体现输入框和按钮的基本用法。接下来，我们将分步骤深入分析输入框和按钮的核心属性，逐步完成一个简单的登录界面。从布局设计到实现，我们将以代码示例逐一讲解每个环节的关键点，帮助大家掌握ArkUI组件的实际用法，同时提升对界面交互设计的理解与应用能力。输入框是用户与应用程序交互的重要组成部分，主要用于接收文本输入。不论是登录界面中用于填写用户名与密码的输入框，还是搜索界面中的关键词输入框，它们都扮演着不可或缺的角色。在ArkUI中，输入框通过TextInput组件实现，其使用方法简单灵活，能够满足各种应用场景需求，输入框的语法如下图1所示。

图1TextInput组件可以通过参数和方法灵活配置其行为与样式，以下是其核心配置项：placeholder：用于设置提示文本，当输入框内容为空时显示，引导用户输入内容。type：通过调用.type(http://InputType.XXX)方法设置输入框的类型，常见类型如下表所示。表1type值说明Normal基本输入模式，无特殊限制Password密码输入模式实操效果如图2所示。当我们将代码写入编辑器后，可以在右侧的预览区域看到界面效果。在输入框未输入任何内容时，placeholder提示文本会显示，帮助用户理解需要填写的内容。当输入框的type属性设置为Password时，其右侧会显示一个带有遮盖的“眼睛”图标。点击该图标后，图标会切换为“眼睛显露”的状态，此时可以查看输入框中被隐藏的实际内容。

图2同样地，当我们在输入框中输入内容时，如果type属性设置为Password，输入的内容将被自动隐藏并显示为掩码形式（如“••••”）。此时，输入框右侧的“眼睛”图标处于遮盖状态，表示内容不可见。当用户点击该图标后，图标切换为“眼睛显露”状态，隐藏的内容将变为可见。此效果如图3所示。

图3在日常使用中，按钮通常会与输入框一起出现，以完成提交、确认等操作。按钮控件的用法与前面介绍的控件类似，我们只需按照基本的代码结构将其添加到界面中即可。需要注意的是，当我们创建按钮时，按钮的大小会根据设置的文本内容自动调整，以适应文本长度。如图4所示，按钮的宽度和高度会根据内部文本的长度动态变化，而无需额外配置。

图4如果需要自定义按钮的大小，可以通过设置width属性来调整按钮的宽度，从而满足特定的布局需求。同样，height属性可以用来设置按钮的高度，使其符合设计规范或用户体验的要求。如图5所示，通过修改这些属性，可以轻松实现按钮的固定尺寸设计。

图5