我试着做一个底部表,有一个文本字段,自动聚焦设置为true,这样键盘就会弹出。但是,键盘重叠在bottomsheet上。有没有办法移动键盘上方的底部?

Padding(
  padding:
      EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
  child: Column(children: <Widget>[
    TextField(
      autofocus: true,
      decoration: InputDecoration(hintText: 'Title'),
    ),
    TextField(
      decoration: InputDecoration(hintText: 'Details!'),
      keyboardType: TextInputType.multiline,
      maxLines: 4,
    ),
    TextField(
      decoration: InputDecoration(hintText: 'Additional details!'),
      keyboardType: TextInputType.multiline,
      maxLines: 4,
    ),]);

当前回答

更新2021年5月扑动2.2! 现在你需要给底部填充。下面写的是一个错误。

更新2020 !

这个答案是正确的,但是你现在不需要给底部填充! 找到并删除这一行:

填充:MediaQuery.of .viewInsets(上下文)

其他回答

在结合不同的解决方案后,我得到了这个:

如果你不想全屏,也不想使用填充

  showModalBottomSheet(
      context: context,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      enableDrag: true,
      isDismissible: true,
      useRootNavigator: true,
      builder: (BuildContext ctx) {
        return Scaffold( // use CupertinoPageScaffold for iOS
          backgroundColor: Colors.transparent,
          resizeToAvoidBottomInset: true, // important
          body: SingleChildScrollView(
            child: Form(
              child: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    TextFormField(),
                    TextFormField(),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );

在Flutter(通道母版,v1.15.3-pre。37,适用于Mac OS X 10.15.2 19C57, locale en-US)

用脚手架小部件包装表单,然后用SingleChildScrollView包装TextFormField:


 return Container(
          height: screenHeight * .66,
          child: Scaffold(
             body: Form(
               key: _form,
               child: SingleChildScrollView(
                 child:TextFormField()
               )
              )
             )
           )

你应该用这个,

showModalBottomSheet(
    isScrollControlled: true,
    context: context,
    shape: RoundedRectangleBorder(
      // <-- for border radius
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(10.0),
        topRight: Radius.circular(10.0),
      ),
    ),
    builder: (BuildContext context) {
      return SingleChildScrollView(
        padding:
            EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
        child: drunkenWidget()...

//BTW, Never ever Drink

要修复此问题

你所需要的就是使用MediaQuery.of(context).viewInsets.bottom填充键盘 为了更保险,设置底部表格对话框的isScrollControlled = true,这将允许底部表格获得所需的全部高度。

请注意

如果您的BottomSheetModel是Column,请确保添加mainAxisSize: mainAxisSize。Min,否则床单会覆盖整个屏幕。 工作与多个TextField或TextFormField

例子

showModalBottomSheet(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),
        backgroundColor: Colors.black,
        context: context,
        isScrollControlled: true,
        builder: (context) => Padding(
          padding: EdgeInsets.only(
                        bottom: MediaQuery.of(context).viewInsets.bottom),
          child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 12.0),
                    child: Text('Enter your address',
                        style: TextStyles.textBody2),
                  ),
                  SizedBox(
                    height: 8.0,
                  ),
                  TextField(
                      decoration: InputDecoration(
                        hintText: 'adddrss'
                      ),
                      autofocus: true,
                      controller: _newMediaLinkAddressController,
                    ),
                  

                  SizedBox(height: 10),
                ],
              ),
        ));

请注意:

shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),

这不是必须的。只是我要创建一个圆形的底页。

更新

Flutter 2.2又打破了改动!”现在你需要再次给底部填充,这样键盘就不会重叠在底部。

把它添加到你的底页的最后一个小部件之后

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