web-dev-qa-db-ja.com

キーボードがコンテンツを押し上げる/画面のサイズを変更する

編集：

これは の複製であるという報告を受けました。キーボードが表示されると、Flutterウィジェットのサイズが変更されます。これを防ぐ方法は？ 。これは関連していますが、別の問題です。フォーカスがあるTextFieldに到達するまで、キーボードをUIに重ねます。これはAndroidのデフォルトの動作です

元：

私はAndroid開発者で、Flutterを使い始めました。ログイン画面を作成したいと思っていました。TextFieldの上に画像が欲しいので、Stackを使用して画像を表示したいと思いました。背景と以下のTextFieldの一部。

問題は、キーボードが表示されるとすぐに、すべてのコンテンツが押し上げられることです。 Androidでは、通常、キーボードは、必要な場合にのみ、EditTextに達するまで押し上げます。

resizeToAvoidBottomPaddingをfalseに設定してみましたが、（もちろん）何も移動せず、TextFieldがキーボードに隠れてしまいます。

私は過去にiOSで遊んだことを覚えています。これはデフォルトの動作です。おそらくレイアウトを再検討する必要がありますか？

現時点では、ListViewでラップして、キーボードが表示されたときにユーザーがスクロールできるようにします。

これは私のレイアウトです（テスト用です）

@override
Widget build(BuildContext context) {
  this.context = context;
  return new Scaffold(
      key: _scaffoldKey,
      body: new Stack(
          children: <Widget>[loginImage(), new Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[new TextField(), new TextField(),
        new TextField(), new TextField(),
        new TextField(), new TextField()],
      )])
  );
}

enter image description here ： enter image description here

flutterflutter-layout
6
Boy

_autoFocus: true_をCupertinoTextField()に設定するときにこの問題が発生し、Scaffold()に_resizeToAvoidBottomInset: false_を設定することで修正しました。

resizeToAvoidBottomPaddingは非推奨になりました。

resizeToAvoidBottomInsetを使用します。

14
Hahnemann

これはあなたが望むことをするものだと思います。最大の問題は、スタックの使用を選択したことです。スタックは、物を積み重ねる場合にのみ使用されます。この場合、それは必要ありません。それを列に配置し、オープンスペースを拡張（このウィジェットは使用可能なスペースに拡張し、すべてを押し下げます）で埋めるのが私のやり方です。それが最善の方法だとは言いません（たった2週間のフラッター体験）。しかし、それは方法です。お役に立てば幸いです。

import 'package:flutter/material.Dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            title: 'Flutter Demo',
            theme: new ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: new Scaffold(
                body: new Column(
                    children: <Widget>[
                        new Center(
                            child: new Container(
                                height: 150.0,
                                width: 75.0,
                                color: Colors.red,
                            ),
                        ),
                        new Expanded(
                            child: new Container(),
                        ),
                        new Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: <Widget>[
                                new TextField(),
                                new TextField(),
                                new TextField(),
                                new TextField(),
                                new TextField(),
                                new TextField()
                            ],
                        ),
                    ],
                ),
            ),
        );
    }
}
2
Kevin Walter

また、Stackの代わりに、ListViewを使用することをお勧めします。一方、SingleChildScrollViewを試すこともできます（ただし、実装のためにコードを追加する必要がある場合があります）。

ハッピーコーディング...

1
The Dead Guy