一、支持的 XML 屬性

• TextField 的共有 XML 屬性繼承自：Text。
• Text 的自有 XML 屬性，請參考我之前的博客：HarmonyOS之深入分析常用組件Text的功能和使用。
• TextField 的自有 XML 屬性見下表：

屬性名稱中文描述 取值取值說明使用案例basement輸入框基線Element類型可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源ohos:basement="#000000" ohos:basement="$color:black" ohos:basement="$media:media_src" ohos:basement="$graphic:graphic_src"

二、創建 TextField

• 在 layout 目錄下的 xml 文件中創建一個 TextField，如下所示：

<TextField...ohos:id="$+id:text_field"ohos:height="40vp"ohos:width="200vp"ohos:left_padding="20vp"/>

• 獲取輸入框的內容：

TextField textField = (TextField) findComponentById(ResourceTable.Id_text_field);String content = textField.getText();

三、設置 TextField

• 在 xml 中設置 TextField 的背景，layout 目錄下 xml 文件的代碼示例如下：

<TextField...ohos:background_element="$graphic:background_text_field"/>

• graphic 目錄下 xml 文件（例：background_text_field.xml）的代碼示例如下：

<?xml version="1.0" encoding="UTF-8" ?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><cornersohos:radius="40"/><solidohos:color="#FFFFFF"/></shape>

• 設置提示文字：

<TextField...ohos:hint="Enter phone number or email"ohos:text_alignment="vertical_center"/>

• 創建的 TextField 效果如下：

• 設置 Bubble：

<TextField...ohos:element_cursor_bubble="$graphic:ele_cursor_bubble" />

• • 其中 ele_cursor_bubble.xml：

<?xml version="1.0" encoding="UTF-8" ?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><cornersohos:radius="40"/><solidohos:color="#6699FF"/><strokeohos:color="#0066FF"ohos:width="10"/></shape>

• • 設置 bubble 的效果：

• • 設置 TextField 的內邊距：

<TextField...ohos:left_padding="24vp"ohos:right_padding="24vp"ohos:top_padding="8vp"ohos:bottom_padding="8vp"/>

• 設置 TextField 的多行顯示：

<TextField...ohos:multiple_lines="true"/>

• 設置 TextField 不可用狀態，通過 TextField 的 Enable 屬性來控制文本框是否可用，當設置成 false 后，文本框不再能被輸入：

textField.setEnabled(false);

• 響應焦點變化：

textField.setFocusChangedListener((component, isFocused) -> {if (isFocused) { // 獲取到焦點...} else { // 失去焦點...}});

• 設置基線：

<TextField...ohos:basement="#000099" />

• • 設置基線的效果：

四、場景示例

• 當點擊登錄按鈕，將會出現錯誤提示，同時將會改變 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"><StackLayoutohos:top_margin="60vp"ohos:width="match_parent"ohos:height="match_content"ohos:layout_alignment="center"><TextFieldohos: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" /><Textohos: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><TextFieldohos: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" /><Buttonohos: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"><cornersohos:radius="40"/><solidohos:color="white"/><strokeohos: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"><cornersohos:radius="35"/><solidohos:color="white"/></shape>

• Java 代碼示例：

// 當點擊登錄，改變相應組件的樣式Button button = (Button) findComponentById(ResourceTable.Id_ensure_button);button.setClickedListener((component -> {// 顯示錯誤提示的TextText 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_text_field);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"><cornersohos:radius="40"/><solidohos:color="gray"/><strokeohos:color="#E74C3C"ohos:width="6"/></shape>

總結

以上是生活随笔為你收集整理的HarmonyOS之常用组件TextField的功能和使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。