Ich habe eine Spalte mit erweiterten Widgets wie folgt:
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,
),
],
),
);
Es sieht aus wie das:
convertFrom
, enthält ein TextField. Wenn ich auf dieses Textfeld tippe, wird die Android-Tastatur auf dem Bildschirm angezeigt. Dadurch wird die Bildschirmgröße geändert, sodass die Größe der Widgets wie folgt geändert wird:
Gibt es eine Möglichkeit, dass die Tastatur den Bildschirm "überlagert", damit die Größe meiner Spalte nicht geändert wird? Wenn ich keine Expanded
Widgets verwende und für jedes Widget eine Höhe fest codiere, wird die Größe der Widgets nicht geändert, aber ich erhalte den schwarz-gelb gestreiften Fehler, wenn die Tastatur angezeigt wird (weil nicht genügend Speicherplatz vorhanden ist). Dies ist auch nicht für alle Bildschirmgrößen flexibel.
Ich bin mir nicht sicher, ob dies Android- oder Flutter-spezifisch ist.
Antworten:
Scaffold
Setzen Sie in IhrerresizeToAvoidBottomInset
Eigenschaft auffalse
.Die Eigenschaft "resizeToAvoidBottomPadding" ist jetzt veraltet.
Scaffold
Setzen Sie in IhrerresizeToAvoidBottomPadding
Eigenschaft die Eigenschaft auffalse
.quelle
android:windowSoftInputMode="adjustPan"
? Wenn ichresizeToAvoidBottomPadding
das Gerüst hinzufüge , bedeckt es das TextField.Die meisten anderen Antworten schlagen vor, zu verwenden
resizeToAvoidBottomPadding=false
. Nach meiner Erfahrung kann die Tastatur Textfelder verdecken, wenn sie sich unter der Stelle befinden, an der die Tastatur erscheinen würde.Meine derzeitige Lösung besteht darin, zu erzwingen, dass meine Spalte dieselbe Höhe wie der Bildschirm hat, und sie dann
SingleChildScrollView
so zu platzieren, dass Flutter meinen Bildschirm bei Verwendung der Tastatur automatisch gerade so weit nach oben rollt.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 ], ), ), ), ), ); }
Ich benutze,
NeverScrollableScrollPhysics
damit der Benutzer nicht um sich selbst scrollen kann.quelle
NeverScrollableScrollPhysics
und alles sieht gut aus, außer dass der Benutzer versuchen kann, nach oben und unten zu wischen, und er kann das Overscroll-Leuchten sehen. Wenn ich das benutze,NeverScrollableScrollPhysics
habe ich das gleiche Verhalten wieresizeToAvoidBottomInset
Stellen Sie
resizeToAvoidBottomInset
anfalse
Stelle vonresizeToAvoidBottomPadding
denen ist veraltet.return Scaffold( resizeToAvoidBottomInset : false, body: YourWidgets(), );
quelle
Methode 1:
android:windowSoftInputMode="adjustResize"
Aus der Datei AndroidManifest.xml entfernen (andernfalls wird der Flattercode überschrieben) undresizeToAvoidBottomPadding: false
wie folgt in Scaffold hinzugefügt :Scaffold( resizeToAvoidBottomPadding: false, appBar: AppBar() )
Methode 2 (nicht empfohlen): Fügen Sie einfach
android:windowSoftInputMode="stateVisible"
in Android AndroidManifest.xml in Aktivität hinzu, es funktioniert nur für Android und nicht für IOS wie.<activity ... android:windowSoftInputMode="stateVisible">
Hinweis: Stellen Sie es nicht auf ein
android:windowSoftInputMode="adjustResize"
quelle
Nun, ich denke, wenn wir die Lösung von @ Aman implementieren, verhält sich unsere App hässlich, wenn die Tastatur angezeigt wird. Dadurch wird das Ansichtsfenster des Bildschirms nicht an die verfügbare Höhe angepasst und andere Felder werden hinter der Tastatur ausgeblendet. Daher würde ich
SingleChildScrollView
stattdessen die Verwendung vorschlagen .Wickeln Sie Ihren Code
SingleChildScrollView
wie folgt ein: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, ), ], ), ), );
quelle
Abhängig vom Anwendungsfall können Sie auch eine Listenansicht verwenden . Dies würde sicherstellen, dass der Inhalt gescrollt wird, wenn nicht genügend Platz vorhanden ist. Als Beispiel können Sie sich die Textfeld- Demo in der Galerie-App ansehen
quelle
Mein Ansatz ist es,
SingleChildScrollView
mit derClampingScrollPhysics
Physik zu verwenden.quelle
Für mich ändere ich die Item-Eigenschaft von true nach false
<item name="android:windowFullscreen">false</item>
im Ordner
hat Flutter veranlasst, den gesamten Seiteninhalt im Eingabefokus nach oben zu ziehen
quelle
Mein Vorschlag ist, es
resizeToAvoidBottomInset: false
trotzdem zu verwenden, um zu verhindern, dass Widgets die Größe ändern, wenn die Tastatur plötzlich auf dem Bildschirm angezeigt wird. Zum Beispiel, wenn ein Benutzer in Ihrer App Facebook-Chatköpfe verwendet.Um zu verhindern, dass die Tastatur Widgets überlagert, schlage ich auf Bildschirmen, auf denen Sie sie benötigen, den folgenden Ansatz vor: Die Höhe wird
SingleChildScrollView
auf die Höhe des verfügbaren Speicherplatzes reduziert. Scrollt in diesem FallSingleChildScrollView
auch zum fokussierten Widget.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() ], ), ), ), );
quelle