出现键盘时，Flutter小部件将调整大小。如何预防这种情况?

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

 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特有的。

当前回答

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

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

2021-01-14 19:33:09

其他回答

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

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

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

2020-12-12 10:34:04

方法1:从AndroidManifest.xml文件中删除android:windowSoftInputMode=" adjuststresize "(否则它将覆盖flutter代码)，并在Scaffold中添加resizeToAvoidBottomPadding: false，如下所示:

Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar()
)

方法2(不推荐):只需添加android:windowSoftInputMode=" statevvisible "在android AndroidManifest.xml的活动，它将只适用于android和不适用于IOS像。

<activity
       ...
        android:windowSoftInputMode="stateVisible">

注意:不要设置为android:windowSoftInputMode=" adjuststresize "

2019-11-13 12:09:47

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

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

2022-03-25 11:12:25

将resizeToAvoidBottomInset设置为false，而不是已弃用的resizeToAvoidBottomPadding。

    return Scaffold(
      resizeToAvoidBottomInset : false,
      body: YourWidgets(),
    );

2019-05-12 00:29:55

我的建议是使用resizeToAvoidBottomInset: false来防止小部件在键盘突然出现在屏幕上时调整大小。例如，如果用户在你的应用中使用Facebook聊天头。

为了防止键盘覆盖小部件，在你需要它的屏幕上，我建议以下方法，其中SingleChildScrollView的高度减少到可用空间的高度。在本例中，SingleChildScrollView也滚动到聚焦的小部件。

final double screenHeight = MediaQuery.of(context).size.height;
final double keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
return Scaffold(
  resizeToAvoidBottomInset: false,
  body: SizedBox(
    height: screenHeight - keyboardHeight,
    child: SingleChildScrollView(
      child: Column(
        children: [
          const SizedBox(height: 200),
          for (var i = 0; i < 10; i++) const TextField()
        ],
      ),
    ),
  ),
);

2020-10-31 17:45:22

出现键盘时，Flutter小部件将调整大小。如何预防这种情况?

推荐文章

最新文章

标签