Question

朋友！

我创建FAB底表，并希望使其成为“搜索”文本字段。但是，当我按下FAB时，事实证明，该键盘出现并躺在底页上，因此我看不到我真正键入的内容。希望通过使用此处推荐的解决方案来提高底价：

Scaffold( 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,
  ),

这是代码路由到的模式：

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: 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

键盘覆盖的底页

3 个答案: