鍵盤消失時的 Android 白色背景

Question

來自不同用戶但相同的問題視頻

http://imgur.com/ca2cNZv

我有一個背景圖像設置如下：

  .pane {
  background-image:  url("../img/inner-banner-bg.jpg");
  background-repeat: repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

在我的 config.xml 中

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

現在我遇到的問題是當我點擊完成/搜索后鍵盤消失時，在鍵盤覆蓋的空間過渡期間它會留下白色背景，例如 0.5，看起來有點糟糕。

當鍵盤關閉時，它不會收縮，但會留下白色間隙。 如何讓鍵盤不縮小背景后面的視圖？

當我設置

<preference name="Fullscreen" value="true"/>

它不會發生。 我也在使用 Ionic 插件鍵盤。

無論如何，我可以使鍵盤淡入淡出的過渡不顯示白色背景嗎？

編輯：這是我的安卓設置

<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

還有我的配置設置

  <access launch-external="yes" origin="geo:*"/>
  <allow-intent href="geo:*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="4000"/>
  <preference name="FadeSplashScreen" value="false"/>
  <preference name="ShowSplashScreenSpinner" value="true"/>
  <preference name="KeyboardShrinksView" value="false"/>

在 Package.json 中

  "dependencies": {
    "gulp": "^3.5.6",
    "gulp-sass": "^2.0.4",
    "gulp-concat": "^2.2.0",
    "gulp-minify-css": "^0.3.0",
    "gulp-rename": "^1.2.0"
  },
  "devDependencies": {
    "bower": "^1.3.3",
    "gulp-util": "^2.2.14",
    "shelljs": "^0.3.0"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "cordova-plugin-geolocation",
    "cordova-plugin-network-information",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "android",
    "ios"
  ]

在我的網絡視圖中，我使用 ion-view 和 ion-content

<ion-view>
    <ion-content class="has-header has-tabs">

Answer 1

在 AndroidManifest.xml 文件中嘗試將windowSoftInputMode屬性設置為adjustNothing ：

android:windowSoftInputMode="adjustNothing"

它適用於我的 Ionic 項目，避免在軟鍵盤打開時調整 Cordova webview 的大小。

Answer 2

那是你的windowBackground偷看。 您可能正在使用藍綠色背景繪制主題的白色背景。 修改您的主題以包含更好的背景顏色並盡可能從布局中刪除背景以提高繪圖性能。

<style name="MyAppTheme" parent="Theme.DeviceDefault.NoActionBar">
  ...
  <item name="android:windowBackground">#ff000000</item>
  ...
</style>

Answer 3

放：

<style name="AppTheme" parent="AppBaseTheme">
     <item name="android:windowBackground">@drawable/gradient</item>
</style>

在styles.xml源代碼中

Answer 4

嘿，有一個簡單的解決方法

您需要將 overflow-scroll="false" 添加到您的離子內容中，這應該可以解決它

<ion-content class="padding has-header has-footer" overflow-scroll="false">

相關主題離子論壇

Answer 5

它的發生是因為窗口重新調整大小以為軟輸入區域騰出空間

在 AndroidManifest.xml 中使用android:windowSoftInputMode="adjustNothing"

<activity android:windowSoftInputMode="adjustNothing"
..
...
</activity>

Answer 6

打開你的平台 -> app ->src ->AndroidManifest.xml

編輯

android:windowSoftInputMode="adjustResize"

到

android:windowSoftInputMode="adjustNothing"

Answer 7

這樣做為我解決了這個問題：

我試圖使用選擇器“app-login”將背景應用到我的應用程序的登錄頁面。

我在頁面內添加了一個 div 並將其背景設置為我想要的圖像。 但是每當我打開鍵盤時，我都會看到鍵盤上方的部分屏幕變成白色，關閉鍵盤后留下空白。

添加 height: 100% 或 height: 100vh 沒有解決問題。 它在某些設備上解決了，但在其他設備上沒有解決。

這樣做：不要向 ion-content 或 div 添加背景，只需進入您的全局 CSS 文件並添加：

 app-login{ background-image: url("./assets/bg@2x.png"); background-repeat: no-repeat; background-size: cover; }

將 CSS 選擇器更改為您頁面的選擇器，並相應地將 url 更改為您自己的圖像。

Answer 8

在“App.js”中添加以下代碼。 添加

$window.addEventListener('native.keyboardhide', function (event) {
    $rootScope.$broadcast('native.keyboardhide', event);
});

當 app.run() 方法使用 $window 和 $rootScope 依賴調用時。 另外，添加

    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        cordova.plugins.Keyboard.disableScroll(true);
    }

在 $ionicPlatform.ready() 中。

請通過檢查您的應用程序來確保您的代碼已更新。 如果未更新，請嘗試刪除並添加平台並重建您的應用程序。