flutter - 键盘关闭 Flutter 中的 Modal BottomSheet

Question

当我想在 Textfield 中写一些文本时，键盘会关闭我的模式底页。我不明白，为什么会这样。我尝试使用这行代码:

padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)

但在输出中我得到了文本字段，它会延伸。

我花了很多时间来解决这个问题，我真的很想关闭这个问题。

This is full code

import 'package:flutter/material.dart';
class NutritionScreen extends StatefulWidget {
  @override
  _NutritionScreenState createState() => _NutritionScreenState();
}

class _NutritionScreenState extends State<NutritionScreen> {
  double height = 500.0;
  void _modalBottomSheetMenu(){
    showModalBottomSheet(
        context: context,
        builder: (builder){
          return new Container(
            height: height,
            color: Colors.transparent, //could change this to Color(0xFF737373),
            //so you don't have to change MaterialApp canvasColor
            child: new Container(
                decoration: new BoxDecoration(
                    color: Colors.white,
                    borderRadius: new BorderRadius.only(
                        topLeft: const Radius.circular(10.0),
                        topRight: const Radius.circular(10.0))),
                child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          "Питание",
                          textAlign: TextAlign.center,
                          style: TextStyle(color: Colors.black, fontSize: 26.0),
                        )),
                    Padding(
                        padding: EdgeInsets.only(
                            bottom: 8.0,
                            top: 8.0,
                            right: 8.0,
                            left: 8.0
                        ),
                        child: TextField(
                          maxLines: 1,
                          textDirection: TextDirection.ltr,
//                        controller: customcintroller,
                        style: TextStyle(
                          color: Colors.lightGreen[400],
                          fontSize: 18.5),
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.only(bottom: 4.0),
                          labelText: "Возраст",
                          alignLabelWithHint: false,
                      ),
                          keyboardType: TextInputType.phone,
                          textInputAction: TextInputAction.done,
                    )),
                    Padding(
                        padding: EdgeInsets.only(
                            bottom: 8.0,
                            top: 8.0,
                            right: 8.0,
                            left: 8.0
                        ),
                        child: TextField(
                          maxLines: 1,
                          textDirection: TextDirection.ltr,
//                        controller: customcintroller,
                          style: TextStyle(
                              color: Colors.lightGreen[400],
                              fontSize: 18.5),
                          decoration: InputDecoration(
                            contentPadding: EdgeInsets.only(bottom: 4.0),
                            labelText: "Рост",
                            alignLabelWithHint: false,
                          ),
                          keyboardType: TextInputType.phone,
                          textInputAction: TextInputAction.done,
                        )),
                    Padding(
                        padding: EdgeInsets.only(
                            bottom: MediaQuery.of(context).viewInsets.bottom,
                            top: 8.0,
                            right: 8.0,
                            left: 8.0
                        ),
                        child: TextField(
                          maxLines: 1,
                          textDirection: TextDirection.ltr,
//                        controller: customcintroller,
                          style: TextStyle(
                              color: Colors.lightGreen[400],
                              fontSize: 18.5),
                          decoration: InputDecoration(
                            contentPadding: EdgeInsets.only(bottom: 4.0),
                            labelText: "Вес",
                            alignLabelWithHint: false,
                          ),
                          keyboardType: TextInputType.phone,
                          textInputAction: TextInputAction.done,
                        )),
                    Padding(
                        padding: EdgeInsets.only(
                            bottom: MediaQuery.of(context).viewInsets.bottom,
                            top: 8.0,
                            right: 8.0,
                            left: 8.0
                        ),
                        child: TextField(
                          maxLines: 1,
                          textDirection: TextDirection.ltr,
//                        controller: customcintroller,
                          style: TextStyle(
                              color: Colors.lightGreen[400],
                              fontSize: 18.5),
                          decoration: InputDecoration(
                            contentPadding: EdgeInsets.only(bottom: 4.0),
                            labelText: "Целевой вес",
                            alignLabelWithHint: false,
                          ),
                          keyboardType: TextInputType.phone,
                          textInputAction: TextInputAction.done,
                        )),
                  ],
                )),
          ));
        }
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Color(0xff2b2b2b),
      appBar: AppBar(
        backgroundColor: Colors.lightGreen[400],
        title: Text(
          'Питание',
          style: new TextStyle(
            color: Colors.white
          ),),
        leading: IconButton(
          icon:Icon(Icons.arrow_back),
          color: Colors.white ,
          onPressed:() => Navigator.of(context).pop(),
        ),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.only(bottom: 45.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Padding(
                  padding: const EdgeInsets.only(bottom: 200.0),
                  child: Text(
                    "Нажми на кнопку, чтобы добавить правильный рацион питания.",
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.white, fontSize: 20.0),
                  )),
              FloatingActionButton(
                heroTag: "tag3",
                backgroundColor: Color(0xffFF7070),
                child: Icon(Icons.add, color: Colors.white),
                onPressed: () {
                  _modalBottomSheetMenu();
                }),
            ],
          ),
      ),
    );
  }
}

Answer 1

您不需要用 padding 小部件包装每个文件 - 只需用 padding 小部件包装您的主要 Container -

padding: EdgeInsets.only(
             bottom: MediaQuery.of(context).viewInsets.bottom)

.

更新代码:

class NutritionScreen extends StatefulWidget {
  @override
  _NutritionScreenState createState() => _NutritionScreenState();
}

class _NutritionScreenState extends State<NutritionScreen> {
  double height = 500.0;
  void _modalBottomSheetMenu() {
    showModalBottomSheet(
        context: context,
        builder: (builder) {
          return Padding(
            padding: EdgeInsets.only(
                bottom: MediaQuery.of(context).viewInsets.bottom),
            child: new Container(
                height: height,
                color: Colors
                    .transparent, //could change this to Color(0xFF737373),
                //so you don't have to change MaterialApp canvasColor
                child: new Container(
                  decoration: new BoxDecoration(
                      color: Colors.white,
                      borderRadius: new BorderRadius.only(
                          topLeft: const Radius.circular(10.0),
                          topRight: const Radius.circular(10.0))),
                  child: SingleChildScrollView(
                      child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      Text(
                        "Питание",
                        textAlign: TextAlign.center,
                        style:
                            TextStyle(color: Colors.black, fontSize: 26.0),
                      ),
                      TextField(
                        maxLines: 1,
                        textDirection: TextDirection.ltr,
//                        controller: customcintroller,
                        style: TextStyle(
                            color: Colors.lightGreen[400], fontSize: 18.5),
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.only(bottom: 4.0),
                          labelText: "Возраст",
                          alignLabelWithHint: false,
                        ),
                        keyboardType: TextInputType.phone,
                        textInputAction: TextInputAction.done,
                      ),
                      TextField(
                        maxLines: 1,
                        textDirection: TextDirection.ltr,
//                        controller: customcintroller,
                        style: TextStyle(
                            color: Colors.lightGreen[400], fontSize: 18.5),
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.only(bottom: 4.0),
                          labelText: "Рост",
                          alignLabelWithHint: false,
                        ),
                        keyboardType: TextInputType.phone,
                        textInputAction: TextInputAction.done,
                      ),
                      TextField(
                        maxLines: 1,
                        textDirection: TextDirection.ltr,
//                        controller: customcintroller,
                        style: TextStyle(
                            color: Colors.lightGreen[400], fontSize: 18.5),
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.only(bottom: 4.0),
                          labelText: "Вес",
                          alignLabelWithHint: false,
                        ),
                        keyboardType: TextInputType.phone,
                        textInputAction: TextInputAction.done,
                      ),
                      TextField(
                        maxLines: 1,
                        textDirection: TextDirection.ltr,
//                        controller: customcintroller,
                        style: TextStyle(
                            color: Colors.lightGreen[400], fontSize: 18.5),
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.only(bottom: 4.0),
                          labelText: "Целевой вес",
                          alignLabelWithHint: false,
                        ),
                        keyboardType: TextInputType.phone,
                        textInputAction: TextInputAction.done,
                      ),
                    ],
                  )),
                )),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Color(0xff2b2b2b),
      appBar: AppBar(
        backgroundColor: Colors.lightGreen[400],
        title: Text(
          'Питание',
          style: new TextStyle(color: Colors.white),
        ),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          color: Colors.white,
          onPressed: () => Navigator.of(context).pop(),
        ),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.only(bottom: 45.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Padding(
                padding: const EdgeInsets.only(bottom: 200.0),
                child: Text(
                  "Нажми на кнопку, чтобы добавить правильный рацион питания.",
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.white, fontSize: 20.0),
                )),
            FloatingActionButton(
                heroTag: "tag3",
                backgroundColor: Color(0xffFF7070),
                child: Icon(Icons.add, color: Colors.white),
                onPressed: () {
                  _modalBottomSheetMenu();
                }),
          ],
        ),
      ),
    );
  }
}