# 实现Text组件和TextInput组件可以切换的堆叠布局

#### 问题现象

如何实现Text组件和TextInput组件的堆叠布局？可以相互切换，同时TextInput组件展示时，要展示焦点，同时拉起键盘。

#### 背景知识

*   TextInput：单行文本输入框组件。
*   @ohos.inputMethod (输入法框架)：本模块主要面向普通前台应用（备忘录、信息、设置等系统应用与第三方应用），提供对输入法（输入法应用）的控制、管理能力，包括显示/隐藏输入法软键盘、切换输入法、获取所有输入法列表等等。
*   stopInputSession：结束输入会话。
*   焦点是指光标被激活的位置，当移动鼠标点击组件时，会让组件获得焦点，获取接收键盘或者鼠标输入的能力。

#### 解决方案

通过Stack容器实现Text组件和TextInput组件堆叠布局，通过配置focusControl.requestFocus来指定组件获取焦点，切换时通过showTextInput和stopInputSession实现键盘的弹起和退出。

完整代码示例如下：

```
import { inputMethod } from '@kit.IMEKit';

@Entry
@Component
struct StackTextInput {
  @State isEditing: boolean = false;

  build() {
    Column() {
      Column() {
        Text('Text 切换 TextInput')
        Stack() {
          TextInput()
            .width('50%')
            .height(50)
            .defaultFocus(true)
            .enableKeyboardOnFocus(this.isEditing)
            .id('textInput')
          Text('text')
            .backgroundColor(Color.Gray)
            .textAlign(TextAlign.Center)
            .visibility(this.isEditing ? Visibility.Hidden : Visibility.Visible)
            .width('50%')
            .height(50)
            .onClick(() => {
              // 可以通过配置focusControl.requestFocus使指定组件获取焦点
              focusControl.requestFocus('textInput');
              this.isEditing = true;
              // 拉起键盘
              let inputMethodController = inputMethod.getController();
              inputMethodController.showTextInput();
            })
        }
      }
      .width('100%')
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .onClick(() => {
        this.isEditing = false;
        // 退出键盘
        let inputMethodController = inputMethod.getController();
        inputMethodController.stopInputSession();
      })
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}
```