键盘出现时,Flutter小部件会调整大小.怎么预防这个？

Question

我有一个这样的Expanded小部件列:

 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小部件并为每个小部件硬编码高度,则小部件不会调整大小,但是当键盘出现时(因为没有足够的空间),我会收到黑黄条纹错误.对于所有屏幕尺寸,这也不灵活.

我不确定这是特定于Android还是特定于Flutter.

Answer 1

在你的Scaffold,设置resizeToAvoidBottomInset属性为false.

Answer 2

大多数其他答案建议使用resizeToAvoidBottomPadding=false. 根据我的经验，如果文本字段位于键盘出现的位置下方，则这允许键盘覆盖文本字段。

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

Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      physics: 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这样用户就不能自己滚动。

Answer 3

我的方法是SingleChildScrollView与ClampingScrollPhysics物理学一起使用。

SingleChildScrollView(
  physics: ClampingScrollPhysics(),
  child: Container(),
)

Answer 4

可能来不及回答了，但以下内容对我有用

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

Clamping 将自动滚动以使文本字段可见，其父级 NeverScrollable 将不允许用户滚动。

Answer 5

特征：

• 打开键盘时背景图像不会调整大小
• 能够滚动隐藏在键盘后面的元素

import 'package:flutter/material.dart';

SizedBox addPaddingWhenKeyboardAppears() {
  final viewInsets = EdgeInsets.fromWindowPadding(
    WidgetsBinding.instance!.window.viewInsets,
    WidgetsBinding.instance!.window.devicePixelRatio,
  );

  final bottomOffset = viewInsets.bottom;
  const hiddenKeyboard = 0.0; // Always 0 if keyboard is not opened
  final isNeedPadding = bottomOffset != hiddenKeyboard;

  return SizedBox(height: isNeedPadding ? bottomOffset : hiddenKeyboard);
}

/// The size of the screen.
class ScreenSizeService {
  final BuildContext context;

  const ScreenSizeService(
    this.context,
  );

  Size get size => MediaQuery.of(context).size;
  double get height => size.height;
  double get width => size.width;
}

class LoginPage extends StatelessWidget {
  final _imageUrl =
      'https://images.unsplash.com/photo-1631823460501-e0c045fa716f?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60';

  const LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final screenWidth = ScreenSizeService(context).width;
    final screenHeight = ScreenSizeService(context).height;

    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage(_imageUrl),
            fit: BoxFit.cover,
          ),
        ),
        child: SingleChildScrollView(
          child: ConstrainedBox(
            constraints: BoxConstraints(
              minWidth: screenWidth,
              minHeight: screenHeight,
            ),
            child: Column(
              children: [
                ...List.generate(6, (index) {
                  return Column(
                    children: [
                      Container(
                        height: 60,
                        width: double.maxFinite,
                        color: Colors.pink[100],
                        child: Center(child: Text('$index')),
                      ),
                      const SizedBox(height: 40),
                    ],
                  );
                }),
                Container(color: Colors.white, child: const TextField()),
                addPaddingWhenKeyboardAppears(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 6

设置resizeToAvoidBottomInset为，false而不是resizeToAvoidBottomPadding不推荐使用。

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

Answer 7

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()
        ],
      ),
    ),
  ),
);

Answer 8

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

另外，resizeToAvoidBottomPadding对我来说效果很好。您可以使用其中任何一个。

Answer 9

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

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

方法 2（不推荐）：只需android:windowSoftInputMode="stateVisible"在活动中添加android AndroidManifest.xml 它将只适用于 Android 而不适用于 IOS 之类的。

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

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

Answer 10

避免调整小部件大小并专注于文本字段的最佳解决方案是SingleChildScrollView()与ClampingScrollPhysics()物理一起使用。另外，请记住为其子项设置高度（例如： use ），以便您可以通过以下方式使用您的小部件：container()Column()

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