底板被键盘覆盖

Question

朋友们！

我创建 FAB 底部工作表并希望将其设为“搜索”文本字段。但是，当我按下 FAB 时，事实证明，键盘出现并位于底部工作表上，所以我看不到我真正输入的内容。想要使用此处推荐的解决方案将底板向上推：

Scaffold( resizeToAvoidBottomPadding: false, body: ...)

或

new Scaffold(
body: SingleChildScrollView(child: //your existing body...)

但是，这不起作用。结果如下：

这是我的代码：

 return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: new AppBar(
        elevation: 0.1,
        backgroundColor: Colors.lightBlue,
        title: Text('WOW!'),
        actions: <Widget>[
          new IconButton(
            icon: Icon(
              Icons.shopping_cart,
              color: Colors.white,
            ),
            onPressed: () => Navigator.push(
                context, MaterialPageRoute(builder: (context) => new cart())),
          )
        ],
      ),
      floatingActionButton: new FloatingActionButton(
          child: const Icon(Icons.search),
          backgroundColor: Colors.lightBlue,
          onPressed: () => modal.mainBottomSheet(context)),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      bottomNavigationBar: new BottomAppBar(
        color: Colors.white,
      ),


And here is the modal, that the code routes to:

  

    class Modal {mainBottomSheet(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return Container(
              color: Colors.white,
              padding: EdgeInsets.symmetric(horizontal: 30),
              height: 400,
              child: SingleChildScrollView(
                child: Column(children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 12.0),
                    child: Row(
                      children: <Widget>[
                      Icon(Icons.search),
                      Text(' SEARCH'),
                ],
                    ),
                  ),
                  Divider(
                    height: 8.0,
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Row(children: <Widget>[
                    Expanded(child: Text('Keyword')),
                    Expanded(
                      child: TextField(
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.symmetric(vertical: 10.0),
                            border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(5))),
                        style: TextStyle(),
                      ),
                    ),],),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Row(children: <Widget>[
                      Expanded(child: Text('Category')),
                      Expanded(
                        child: TextField(
                          decoration: InputDecoration(
                              contentPadding: EdgeInsets.symmetric(vertical: 10.0),
                              border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(5))),
                          style: TextStyle(),
                        ),
                      ),],),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Row(children: <Widget>[
                      Expanded(child: Text('Based')),
                      Expanded(
                        child: TextField(
                          decoration: InputDecoration(
                              contentPadding: EdgeInsets.symmetric(vertical: 10.0),
                              border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(5))),
                          style: TextStyle(),
                        ),
                      ),],),
                  ),
                  Divider(
                    height: 0.0,
                  ),
                  ButtonBar(
                    alignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Container(
                        width: 125,
                        child: RaisedButton(
                          color: Colors.redAccent,
                          child: Text(
                            'Cancel',
                            style: TextStyle(color: Colors.white),
                          ),
                          onPressed: () {},
                        ),
                      ),
                      Container(
                        width: 125,
                        child: RaisedButton(
                          color: Colors.lightBlue,
                          child: Text(
                            'Find Now!',
                            style: TextStyle(color: Colors.white),
                          ),
                          onPressed: () {},
                        ),
                      ),
                    ],
                  ),
                ]),
              ));
        });
  }
}

有人找到解决方案吗？ 谢谢！

Answer 1

请使用以下代码

showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext context) {
      return SingleChildScrollView(
          child: Container(
        padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom),
        child: PlaceYourChildWidget(),
      ));
    });

Answer 2

将

resizeToAvoidBottomInset: true,

添加到您的脚手架小部件中， 将

isScrollControlled: true

添加到您的 showModalBottomSheet 方法中， 并将所有小部件包装在 Padding 中，我们的动画 Padding 并将 padding 设置为：

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

return Scaffold(
      resizeToAvoidBottomInset: true,
      backgroundColor: Color(0xFFFCFCFC),
      appBar: AppBar()
      ....

showModalBottomSheet(
      backgroundColor: Colors.transparent,
      context: context,
      isScrollControlled: true,
      builder: (context) {
        return AnimatedPadding(
          duration: Duration(milliseconds: 150),
          curve: Curves.easeOut,
          padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          child: Container(
          ...

Answer 3

在

isScrollControlled: true,

 中使用 

showModalBottomSheet

Answer 4

import 'dart:async';
import 'dart:ui';
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bootstrap/flutter_bootstrap.dart';

/*
  TextEditingController txtname = TextEditingController();
          showModalBottomSheet(
            context: context,
            isScrollControlled: true,
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              ),
            ),
            builder: (context) => SingleChildScrollView(
              padding: EdgeInsets.only(
                  bottom: MediaQuery.of(context).padding.bottom),
              child: new AddItem(
                  tektk: 'Category',
                  tektd: 'Add',
                  txtname: txtname,
                  ismultik:false,
                  onPressed: () {}),
            ),
          );
    */
class AddItem extends StatelessWidget {
  const AddItem(
      {Key? key,
      required this.ismultik,
      required this.tektd,
      required this.tektk,
      required this.txtname,
      required this.onPressed})
      : super(key: key);
  final bool ismultik;
  final String tektk;
  final String tektd;
  final VoidCallback? onPressed;
  final TextEditingController txtname;
  @override
  Widget build(BuildContext context) {
    final MediaQueryData mediaQueryData = MediaQuery.of(context);
    bootstrapGridParameters(gutterSize: 10);
    return Padding(
      padding: mediaQueryData.viewInsets,
      child: Container(
        padding: EdgeInsets.only(bottom: 90.0, left: 10.0, right: 10.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            ListTile(
              trailing: SizedBox.fromSize(
                size: Size(35, 35),
                child: ClipOval(
                  child: Material(
                    color: Colors.indigo,
                    child: InkWell(
                      splashColor: Colors.white,
                      onTap: () {
                        Navigator.pop(context);
                      },
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Icon(Icons.close, color: Colors.white),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
            BootstrapRow(height: 0, children: [
              BootstrapCol(
                sizes: 'col-md-12',
                child: TextField(
                  style: TextStyle(color: Colors.black),
                  decoration: new InputDecoration(
                    border: new OutlineInputBorder(
                        borderSide: new BorderSide(color: Colors.white)),
                    labelText: tektk,
                  ),
                  keyboardType: ismultik == true
                      ? TextInputType.multiline
                      : TextInputType.text,
                  maxLines: null,
                  minLines: 1,
                  controller: txtname,
                ),
              ),
              BootstrapCol(
                sizes: 'col-md-12',
                child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: Colors.green, // background
                      onPrimary: Colors.white, // foreground
                    ),
                    onPressed: onPressed,
                    child: Text(tektd)),
              ),
            ]),
          ],
        ),
      ),
    );
  }
}

Answer 5

对于那些使用

DraggableScrollableSheet()

的人，请执行以下操作：

TextButton(
  child: Text(
    'Wow Me',
    textAlign: TextAlign.right,       
    style: Theme.of(context).textTheme.bodyMedium),

  onPressed: () {
      showModalBottomSheet(
          isScrollControlled: true,
          backgroundColor: Colors.transparent,
          context: context,
          builder: (context) => Padding(
         
// **Important Part**  --> Add the padding here. 
              padding: EdgeInsets.only(
              bottom: MediaQuery.of(context).viewInsets.bottom),

              child: DraggableScrollableSheet(
                  initialChildSize: 0.6,
                  maxChildSize: 0.8,
                  expand: true,
                  builder: (_, controller) {
                      return Container(
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: Theme.of(context).scaffoldBackgroundColor,
                              borderRadius: const BorderRadius.vertical(
                                  top: Radius.circular(12),),),
                          padding: const EdgeInsets.only(
                              top: 16,
                              left: 16,
                              right: 16),
                          child: ListView(
                              controller: controller,
                              // Children
                     ),
                );
      }),
););},),