我有一个像这样的扩展小部件列:

 return new Container(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new Expanded(
            flex: 1,
            child: convertFrom,
          ),
          new Expanded(
            flex: 1,
            child: convertTo,
          ),
          new Expanded(
            flex: 1,
            child: description,
          ),
        ],
      ),
    );

它是这样的:

convertFrom,包括一个TextField。当我点击这个文本框时,Android键盘就会出现在屏幕上。这会改变屏幕大小,所以小部件会像这样调整大小:

有没有办法让键盘“覆盖”屏幕,使我的列不调整大小?如果我不使用Expanded widgets,并为每个widget硬编码一个高度,这些widget就不会调整大小,但是当键盘出现时,我会得到一个黑黄条纹错误(因为没有足够的空间)。这也不是对所有屏幕尺寸都灵活。

我不确定这是android特有的还是flutter特有的。


当前回答

将resizeToAvoidBottomInset的值设置为false对我来说效果很好。

此外,resizeToAvoidBottomPadding对我来说工作得很好。你可以用任何一个。

其他回答

这是一个完美的解决方案,使您能够在SingleChildScrollView中拥有一个全屏列。这可以让你为所有屏幕大小创建一个完美的布局+有一个可滚动的屏幕,只有当你打开键盘或屏幕在呈现后溢出时才滚动(例如文本输入字段验证)

class PerfectFullScreen extends StatelessWidget {
  const PerfectFullScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      appBar: AppBar(),
      body: Builder(
        builder: (context) => SingleChildScrollView(
            child: ConstrainedBox(
                constraints: BoxConstraints(
                    minHeight: MediaQuery.of(context).size.height -
                        (MediaQuery.of(context).padding.top + kToolbarHeight)),
                child: IntrinsicHeight(
                    child: Column(
                  children: [
                    Container(
                      height: randomImageHeight,
                      child: Image.asset(
                        "assets/images/change_password.png",
                        fit: BoxFit.cover,
                      ),
                    ),
                    Expanded(
                        child: WidgetThatShouldTakeRemainingSpace() )
                  ],
                )))),
      ),
    ));
  }
}

重要的部分是带有正确BoxConstraints和InstrinsicHeight小部件的ConstrainedBox。

PS: MediaQuery.of .padding(上下文)。top + kToolbarHeight) == Appbar的高度

我也面临着同样的问题,我开始尝试随机的解决方案来解决它,突然它就解决了。

将主父容器包装在SingleChildScrollView()中,并为其提供设备高度,即device_height = MediaQuery.of(context).size.height。

这将使整个页面可滚动,但不会调整任何小部件的大小。

大多数其他答案建议使用resizeToAvoidBottomPadding=false。根据我的经验,这允许键盘掩盖文本字段,如果它们在键盘出现的地方下面。

我目前的解决方案是强制我的列与屏幕高度相同,然后将其放置在SingleChildScrollView中,以便Flutter在使用键盘时自动向上滚动屏幕。

Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      physics: const NeverScrollableScrollPhysics(),
      child: ConstrainedBox(
        constraints: BoxConstraints(
          minWidth: MediaQuery.of(context).size.width,
          minHeight: MediaQuery.of(context).size.height,
        ),
        child: IntrinsicHeight(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              // CONTENT HERE
            ],
          ),
        ),
      ),
    ),
  );
}

我使用NeverScrollableScrollPhysics,这样用户就不能自己滚动了。

这将滚动您的键盘和崩溃大小时,键盘消失。

showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      builder: (context) {
        return Padding(
            padding: MediaQuery.of(context).viewInsets,
            child:SingleChildScrollView(
            physics: ClampingScrollPhysics(),
            child: Container(.......)));

避免调整小部件大小并同时关注文本字段的最佳解决方案是使用SingleChildScrollView()和ClampingScrollPhysics()物理。另外,记得为它的子元素设置高度(例如:use container()),这样你就可以通过Column()来使用你的小部件:

return Scaffold(
   body: SingleChildScrollView(
      physics: ClampingScrollPhysics(),
      child: Container(
         height: size.height,
         child: Column(
            children:[
               TextFormField()
            ],
         ),
      ),
   ),
);