科爾多瓦插件離子鍵盤崩潰的布局

Question

我在Ionic3/Angular應用中為鍵盤使用了cordova-plugin-ionic-keyboard插件。 在鍵盤出現之前，我的用戶界面如下所示：

但是，當鍵盤出現時，它會使應用程序的布局崩潰，如下所示：

然后，我嘗試使用以下代碼停止config.xml中布局的調整大小：

<preference name="KeyboardResize" value="false" />

但是，UI仍然中斷。 然后嘗試了KeyboardResizeMode的所有三個組合，但UI仍然中斷。

<preference name="KeyboardResizeMode" value="body" />
<preference name="KeyboardResizeMode" value="ionic" />
<preference name="KeyboardResizeMode" value="native" />

我的HTML代碼：

<ion-content>
  <ion-grid class="login-grid">
    <ion-row>
      <ion-col>
        <ion-label class="sign-in-label text-center">SIGN IN</ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="padding-left-30 padding-right-30">
        <ion-item class="wrapper border-radius-23">
          <ion-label class="email-label">
            <ion-icon name="person" class="text-red"></ion-icon>
          </ion-label>
          <ion-input clearInput type="text" placeholder="Email" class="user-email-input"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="padding-left-30 padding-right-30">
        <ion-item class="wrapper border-radius-23">
          <ion-label class="email-label">
            <ion-icon name="lock" class="text-red"></ion-icon>
          </ion-label>
          <ion-input clearInput type="text" placeholder="Password" class="user-email-input"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="padding-left-30 padding-right-30">
        <button ion-button class="sign-in-btn">SIGN IN</button>
      </ion-col>
    </ion-row>
    <div class="text-center">
      <a class="forgot-password">Forgot Password?</a>
    </div>
    <ion-row class="padding-top-5">
      <ion-label class="or-sign-in-label text-center">OR SIGN IN WITH</ion-label>
    </ion-row>
    <ion-row class="padding-left-30 padding-right-30">
      <ion-col col-4>
        <button ion-button class="padding-0 text-none width-100 border-radius-23 facebook-btn">
          <ion-icon name="logo-facebook" class="padding-right-5 padding-left-5"></ion-icon>
          facebook
        </button>
      </ion-col>
      <ion-col col-4>
        <button ion-button class="padding-0 text-none width-100 border-radius-23 twitter-btn">
          <ion-icon name="logo-twitter" class="padding-right-5 padding-left-5"></ion-icon>
          twitter
        </button>
      </ion-col>
      <ion-col col-4>
        <button ion-button class="padding-0 text-none width-100 border-radius-23 google-btn">
          <ion-icon name="logo-google" class="padding-right-5 padding-left-5"></ion-icon>
          google
        </button>
      </ion-col>
    </ion-row>
    <ion-row class="text-center">
      <ion-col>
        <ion-label class="no-account">Don't have an account yet?<span class="sign-up-a padding-left-5">SIGN UP</span></ion-label>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

誰能指出我如何避免鍵盤出現在屏幕上時UI中斷的情況？

Answer 1

AndroidManifest.xml文件中的更改對我有用：)。

  android:windowSoftInputMode="adjustPan"

Answer 2

根據您的代碼，我認為您需要在鍵盤顯示時禁用滾動。

第一步：在您的app.module.ts設置scrollAssist和autoFocusAssist假根配置對象

更新導入數組

imports: [
    IonicModule.forRoot(MyApp
      /*
       * MODIFY BOOTSTRAP CODE BELOW
       * Adds a config object that disables scrollAssist and autoFocusAssist for iOS only
       * https://github.com/driftyco/ionic/issues/5571
       */
      , {
        platforms : {
          ios : {
            // These options are available in ionic-angular@2.0.0-beta.2 and up.
            scrollAssist: false,    // Valid options appear to be [true, false]
            autoFocusAssist: false  // Valid options appear to be ['instant', 'delay', false]
          }
          // http://ionicframework.com/docs/v2/api/config/Config/)
        }
      }
      /*
       * END MODIFY
       */
    )
  ],

步驟2：按照以下示例，在app.component.ts disableScroll Ionic Keyboard Plugin的disableScroll 。

export class HomePage {
constructor(public navCtrl: NavController) {
    platform.ready().then(() => {
       this.keyboard.disableScroll(true);
    });
}
}

嘗試一次。