flutter - 底板被键盘覆盖

Question

friend 们!

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

脚手架( resizeToAvoidBottomPadding: false, body: ...)

或

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

但是，这不起作用。结果如下: Bottom Sheet Appears

Keyboard covers the sheet

这是我的代码:

 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(),
      ));
    });