1
votes

Le clavier glisse vers le haut et recouvre le TextField dans Flutter

lorsque je lance le projet pur flutter, lorsque le clavier est présenté, le champ de texte peut se déplacer au-dessus, et le widget peut très bien s'auto-adapter. mais lorsque j'ajoute un module de flutter au projet natif, le champ de texte du clavier corvers.

Je ne sais pas comment résoudre ce problème.

flutter:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);
//
//        FrameLayout container = findViewById(R.id.container);

        FlutterView flutterView = Flutter.createView(this, getLifecycle(), "route");
        addContentView(flutterView, new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT));
    }
}

native:

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'this is a project to test keyboard',
        ),

        Flexible(
          fit: FlexFit.tight,
          child: CustomScrollView(
            slivers: <Widget>[

              SliverToBoxAdapter(
                child: SizedBox(
                  width: 100,
                  height: 160,
                  child: Container(
                    color: Colors.blue,
                  ),
                ),
              ),

              SliverToBoxAdapter(
                child: SizedBox(
                  width: 100,
                  height: 140,
                  child: Container(
                    color: Colors.grey,
                  ),
                ),
              ),

              SliverToBoxAdapter(
                child: SizedBox(
                  width: 100,
                  height: 120,
                  child: Container(
                    color: Colors.red,
                  ),
                ),
              ),

              SliverToBoxAdapter(
                child: SizedBox(
                  width: 100,
                  height: 100,
                  child: Container(
                    color: Colors.deepPurple,
                  ),
                ),
              ),

              SliverToBoxAdapter(
                child: TextField(
                  decoration: InputDecoration(
                      hintText: 'this is first input text'
                  ),
                ),
              ),

              SliverToBoxAdapter(
                child: Padding(padding: EdgeInsets.only(top: 20),),
              ),

              SliverToBoxAdapter(
                child: TextField(
                  decoration: InputDecoration(
                      hintText: 'this is second input text'
                  ),
                ),
              ),
            ],
          ),
        ),

        Container(
          color: Colors.grey[400],
          padding: EdgeInsets.all(8),
          height: 50,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              FlatButton(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(2)
                  ),
                  color: Colors.black,
                  textColor: Colors.white,
                  onPressed: () {
                  },
                  child: Text(
                      'button1'
                  )
              ),
              FlatButton(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(2)
                  ),
                  color: Colors.black,
                  textColor: Colors.white,
                  onPressed: () {

                  },
                  child: Text(
                      'button2'
                  )
              ),
              FlatButton(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(2)
                  ),
                  color: Colors.black,
                  textColor: Colors.white,
                  onPressed: () {

                  },
                  child: Text(
                      'button3'
                  )
              )
            ],
          ),
        )
      ],
    );
  }

}

c'est un pur projet de flutter: https://github.com/longdw/flutter_keyboard

ceci est un projet natif contient le module de flutter: https://github.com/longdw/keyboard_host

flutter . hôte


1 commentaires

ajoutez android: windowSoftInputMode = "AdjustResize" , c'est ok maintenant!


3 Réponses :


0
votes

Vous pouvez envelopper votre corps dans SingleChildScrollView

https: // api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

J'ai fait un petit changement juste ajouté TextFiled à l'intérieur de Column. J'espère que tout va bien pour vous.

    import 'package:flutter/material.dart';
    void main() => runApp(new MyApp());
    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
        title: 'NonStopIO',
        theme: new ThemeData(
            primarySwatch: Colors.red,
        ),
        home: new HomeWidget(),
        );
    }
    }

    class HomeWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
        appBar: AppBar(
            // Here we take the value from the MyHomePage object that was created by
            // the App.build method, and use it to set our appbar title.
            title: Text("hello"),
        ),
        body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
            Text(
            'this is a project to test keyboard',
            ),

            Flexible(
            fit: FlexFit.tight,
            child: CustomScrollView(
                slivers: <Widget>[

                SliverToBoxAdapter(
                    child: SizedBox(
                    width: 100,
                    height: 160,
                    child: Container(
                        color: Colors.blue,
                    ),
                    ),
                ),

                SliverToBoxAdapter(
                    child: SizedBox(
                    width: 100,
                    height: 140,
                    child: Container(
                        color: Colors.grey,
                    ),
                    ),
                ),

                SliverToBoxAdapter(
                    child: SizedBox(
                    width: 100,
                    height: 120,
                    child: Container(
                        color: Colors.red,
                    ),
                    ),
                ),

                SliverToBoxAdapter(
                    child: SizedBox(
                    width: 100,
                    height: 100,
                    child: Container(
                        color: Colors.deepPurple,
                    ),
                    ),
                ),
                ],
            ),
            ),
        TextField(
            decoration: InputDecoration(
                hintText: 'this is first input text'
            )
            ),

            TextField(
            decoration: InputDecoration(
            hintText: 'this is lst input text'
            )
        ),

            Container(
            color: Colors.grey[400],
            padding: EdgeInsets.all(8),
            height: 50,
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                FlatButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(2)
                    ),
                    color: Colors.black,
                    textColor: Colors.white,
                    onPressed: () {
                    },
                    child: Text(
                        'button1'
                    )
                ),
                FlatButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(2)
                    ),
                    color: Colors.black,
                    textColor: Colors.white,
                    onPressed: () {

                    },
                    child: Text(
                        'button2'
                    )
                ),
                FlatButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(2)
                    ),
                    color: Colors.black,
                    textColor: Colors.white,
                    onPressed: () {

                    },
                    child: Text(
                        'button3'
                    )
                )
                ],
            ),
            ),
        ],
        )
        );
    }
    }


2 commentaires

je l'essaye, mais le problème demeure.


ajouter un projet de flutter pour exister projet Android natif le problème que je décris existe toujours.



2
votes

Dans votre Scaffold, vous pouvez utiliser la propriété

resizeToAvoidBottomPadding: false,

Elle ne déplacera pas le contenu.


0 commentaires

0
votes

J'ai résolu en supprimant

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

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

Je ne sais pas pourquoi il était là :)


0 commentaires