出现键盘时，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特有的。

当前回答

现在回答可能太迟了，但下面的方法对我有用

Scaffold(
  body: SingleChildScrollView(
    physics: ClampingScrollPhysics(parent: NeverScrollableScrollPhysics()),
      child: Container(

夹紧将自动滚动使文本字段可见，它的父NeverScrollable将不允许用户滚动。

2021-02-17 03:13:51

其他回答

大多数其他答案建议使用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，这样用户就不能自己滚动了。

2020-02-16 06:53:40

当我们点击文本框和键盘打开媒体查询时，这种奇怪的媒体查询行为在堆栈中重建了一个相同的页面。

MaterialApp ( useInheritedMediaQuery:真的,)

useInheritedMediaQuery设为true会有帮助。

2022-09-04 05:56:37

更新后的答案

resizeToAvoidBottomPadding现在已弃用。

更新后的解决方案是将resizeToAvoidBottomInset属性设置为false。

原来的答案

在你的Scaffold中，设置resizeToAvoidBottomPadding属性为false。

2017-10-03 18:45:36

对我来说，下面的项目属性从真变为假

<item name="android:windowFullscreen">false</item>

在文件

android/app/src/main/res/values/styles.xml

已使Flutter在输入焦点上向上拖动所有页面内容

2020-08-22 04:30:41

避免调整小部件大小并同时关注文本字段的最佳解决方案是使用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

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

推荐文章

最新文章

标签