Kiedy pojawi się klawiatura, zmieniają się rozmiary widżetów Flutter. Jak temu zapobiec?

Mam kolumnę rozszerzonych widżetów w następujący sposób:

 return new Container(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new Expanded(
            flex: 1,
            child: convertFrom,
          ),
          new Expanded(
            flex: 1,
            child: convertTo,
          ),
          new Expanded(
            flex: 1,
            child: description,
          ),
        ],
      ),
    );

To wygląda tak:

convertFrom, zawiera TextField. Po dotknięciu tego pola tekstowego na ekranie pojawia się klawiatura systemu Android. Zmienia to rozmiar ekranu, więc widżety zmieniają rozmiar w następujący sposób:

Czy istnieje sposób, aby klawiatura „nakładała” ekran, aby moja kolumna nie zmieniała rozmiaru? Jeśli nie używam Expandedwidżetów i nie zakoduję na stałe wysokości dla każdego widżetu, widżety nie zmieniają rozmiaru, ale pojawia się błąd w czarno-żółte paski, gdy pojawia się klawiatura (ponieważ nie ma wystarczającej ilości miejsca). Nie jest to również elastyczne dla wszystkich rozmiarów ekranu.

Nie jestem pewien, czy jest to specyficzne dla Androida, czy dla Fluttera.

Zaktualizowana odpowiedź

resizeToAvoidBottomPaddingjest teraz przestarzała .

Zaktualizowanym rozwiązaniem jest ustawienie resizeToAvoidBottomInsetwłaściwości na false.

Oryginalna odpowiedź

W swoim Scaffoldustaw resizeToAvoidBottomPaddingwłaściwość na false.

Większość innych odpowiedzi sugeruje użycie resizeToAvoidBottomPadding=false. Z mojego doświadczenia wynika, że ​​pozwala to klawiaturze zakrywać pola tekstowe, jeśli znajdują się pod miejscem, w którym pojawiłaby się klawiatura.

Moim obecnym rozwiązaniem jest wymuszenie, aby moja kolumna była tej samej wysokości co ekran, a następnie umieszczenie jej w taki SingleChildScrollViewsposób, aby Flutter automatycznie przewijał mój ekran tylko na tyle, gdy używana jest klawiatura.

Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      physics: NeverScrollableScrollPhysics(),
      child: ConstrainedBox(
        constraints: BoxConstraints(
          minWidth: MediaQuery.of(context).size.width,
          minHeight: MediaQuery.of(context).size.height,
        ),
        child: IntrinsicHeight(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              // CONTENT HERE
            ],
          ),
        ),
      ),
    ),
  );
}

Używam, NeverScrollableScrollPhysicsaby użytkownik nie mógł się przewijać.

Ustaw resizeToAvoidBottomInsetaby falsezamiast resizeToAvoidBottomPaddingktóra jest nieaktualna.

    return Scaffold(
      resizeToAvoidBottomInset : false,
      body: YourWidgets(),
    );

Moje podejście polega SingleChildScrollViewna ClampingScrollPhysicsfizyce.

SingleChildScrollView(
  physics: ClampingScrollPhysics(),
  child: Container(),
)

Metoda 1: Usuń android:windowSoftInputMode="adjustResize"z pliku AndroidManifest.xml (w przeciwnym razie nadpisze kod flutter) i dodaj resizeToAvoidBottomPadding: falseScaffold, jak poniżej:

Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar()
)

Metoda 2 (niezalecane): Po prostu dodaj android:windowSoftInputMode="stateVisible"w AndroidManifest.xml w działaniu, będzie działać tylko dla Androida i nie dla IOS.

<activity
       ...
        android:windowSoftInputMode="stateVisible">

Uwaga: nie ustawiaj go naandroid:windowSoftInputMode="adjustResize"

Cóż, myślę, że jeśli zaimplementujemy rozwiązanie @ Aman, nasza aplikacja będzie zachowywać się brzydko, ponieważ gdy pojawi się klawiatura, nie dostosuje naszego widoku ekranu do dostępnej wysokości i rozróżni inne pola ukryte za klawiaturą. Więc sugerowałbym użycie SingleChildScrollViewzamiast tego.

Owiń swój kod, SingleChildScrollViewjak podano poniżej,

 return new Container(
  child: SingleChildScrollView(
    child: new Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      new Expanded(
        flex: 1,
        child: convertFrom,
      ),
      new Expanded(
        flex: 1,
        child: convertTo,
      ),
      new Expanded(
        flex: 1,
        child: description,
      ),
    ],
  ),
 ),
);

Sugeruję, aby resizeToAvoidBottomInset: falsemimo wszystko użyć, aby zapobiec zmianie rozmiaru widżetów, jeśli klawiatura nagle pojawi się na ekranie. Na przykład, jeśli użytkownik korzysta z czatów na Facebooku w Twojej aplikacji.

Aby klawiatura nie nakładała się na widżety, na ekranach, na których jest to potrzebne, proponuję następujące podejście, w którym wysokość jest SingleChildScrollViewzmniejszona do wysokości dostępnej przestrzeni. W tym przypadku SingleChildScrollViewprzewija się również do wybranego widżetu.

final double screenHeight = MediaQuery.of(context).size.height;
final double keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
return Scaffold(
  resizeToAvoidBottomInset: false,
  body: SizedBox(
    height: screenHeight - keyboardHeight,
    child: SingleChildScrollView(
      child: Column(
        children: [
          const SizedBox(height: 200),
          for (var i = 0; i < 10; i++) const TextField()
        ],
      ),
    ),
  ),
);

W zależności od przypadku użycia możesz również rozważyć użycie widoku listy . Zapewniłoby to przewijanie zawartości, gdy nie ma wystarczającej ilości miejsca. Jako przykład możesz spojrzeć na demo Textfield w aplikacji Galeria

Dla mnie zmiana poniżej właściwości item z true na false

<item name="android:windowFullscreen">false</item>

w pliku

android/app/src/main/res/values/styles.xml

sprawił, że Flutter przeciąga całą zawartość strony w górę na fokus wprowadzania danych

Miałem ten sam problem i zacząłem próbować losowych rozwiązań, aby go naprawić, a nagle to naprawiło.

Owiń główny kontener nadrzędny w SingleChildScrollView () i podaj mu wysokość urządzenia, tj. Device_height = MediaQuery.of (context) .size.height.

Spowoduje to przewijanie całej strony, ale nie zmieni rozmiaru żadnego widżetu.