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 Expanded
widż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.
Odpowiedzi:
Zaktualizowana odpowiedź
resizeToAvoidBottomPadding
jest teraz przestarzała .Zaktualizowanym rozwiązaniem jest ustawienie
resizeToAvoidBottomInset
właściwości nafalse
.Oryginalna odpowiedź
W swoim
Scaffold
ustawresizeToAvoidBottomPadding
właściwość nafalse
.źródło
android:windowSoftInputMode="adjustPan"
? Jeśli dodamresizeToAvoidBottomPadding
do rusztowania, zakryje to TextField.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
SingleChildScrollView
sposó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,
NeverScrollableScrollPhysics
aby użytkownik nie mógł się przewijać.źródło
NeverScrollableScrollPhysics
i wszystko wygląda dobrze, z wyjątkiem tego, że użytkownik może próbować przesuwać palcem w górę iw dół i może zobaczyć poświatę nadmiernego przewijania. Kiedy używam,NeverScrollableScrollPhysics
zachowuje się tak samo, jakresizeToAvoidBottomInset
NeverScrollableScrollPhysics
sprawia, że nie jest on przewijany również za pomocą klawiatury.Ustaw
resizeToAvoidBottomInset
abyfalse
zamiastresizeToAvoidBottomPadding
która jest nieaktualna.return Scaffold( resizeToAvoidBottomInset : false, body: YourWidgets(), );
źródło
Moje podejście polega
SingleChildScrollView
naClampingScrollPhysics
fizyce.źródło
Metoda 1: Usuń
android:windowSoftInputMode="adjustResize"
z pliku AndroidManifest.xml (w przeciwnym razie nadpisze kod flutter) i dodajresizeToAvoidBottomPadding: false
Scaffold, 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 na
android:windowSoftInputMode="adjustResize"
źródło
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
SingleChildScrollView
zamiast tego.Owiń swój kod,
SingleChildScrollView
jak 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, ), ], ), ), );
źródło
Sugeruję, aby
resizeToAvoidBottomInset: false
mimo 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
SingleChildScrollView
zmniejszona do wysokości dostępnej przestrzeni. W tym przypadkuSingleChildScrollView
przewija 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() ], ), ), ), );
źródło
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
źródło
Dla mnie zmiana poniżej właściwości item z true na false
<item name="android:windowFullscreen">false</item>
w pliku
sprawił, że Flutter przeciąga całą zawartość strony w górę na fokus wprowadzania danych
źródło
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.
źródło