키보드가 나타나면 이동 위젯의 크기가 조정됩니다. 어떻게 이것을 예방할 수 있을까요?

키보드가 나타나면 이동 위젯의 크기가 조정됩니다. 어떻게 이것을 예방할 수 있을까요?

다음과 같은 확장 위젯 열이 있습니다:

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

다음과 같이 표시됩니다:

, 텍스트 필드를 포함합니다. 이 텍스트 필드를 누르면 화면에 안드로이드 키보드가 나타납니다. 이렇게 하면 화면 크기가 변경되므로 위젯의 크기가 다음과 같이 조정됩니다:

키보드가 화면을 "오버레이"하여 내 열 크기가 조정되지 않도록 하는 방법이 있습니까? 위젯을 사용하지 않고 각 위젯의 높이를 하드코드하면 위젯의 크기가 조정되지 않지만 키보드가 나타날 때 검은색과 노란색 줄무늬 오류가 나타납니다(공간이 부족하기 때문). 이것은 또한 모든 화면 크기에 대해 유연하지 않다.

나는 이것이 안드로이드 전용인지 플래터 전용인지 확실하지 않다.

---

업데이트된 답변

지금은.

업데이트된 솔루션은 속성을 로 설정하는 것입니다.

---

원답

에서 속성을 로 설정합니다.

---

사용 사례에 따라 를 사용하는 것도 고려할 수 있습니다. 이렇게 하면 공간이 충분하지 않을 때 내용이 스크롤됩니다. 예를 들어, 당신은 갤러리 앱에서 데모를 볼 수 있습니다

---

사용되지 않는 대신 로 설정합니다.

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

---

AndroidManifest.xml 파일에서 제거하고(그렇지 않으면 float code를 재정의함) 아래와 같이 Scape를 추가합니다:

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

Android Manifest.xml을 활동에 추가하면 Android에서만 작동하고 IOS에서는 작동하지 않습니다.

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

로 설정하지 마십시오

---

대부분의 다른 답변에서는 을 사용할 것을 제안합니다. 내 경험에 따르면 키보드는 텍스트 필드가 키보드가 나타나는 위치 아래에 있을 경우 이 필드를 덮을 수 있습니다.

현재 해결 방법은 열을 화면과 동일한 높이로 만든 다음 키보드를 사용할 때 Float이 자동으로 화면을 위로 스크롤하도록 에 배치하는 것입니다.

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

나는 사용자가 스스로 스크롤할 수 없도록 사용한다.

---

음, 만약 우리가 @Aman의 솔루션을 구현한다면, 그것은 우리의 앱이 키보드가 나타날 때처럼 추하게 행동하게 할 것이고, 그것은 화면의 뷰포트를 사용 가능한 높이에 따라 조정하지 않을 것이고, 다른 필드들이 키보드 뒤에 숨게 할 것이다. 그래서 나는 대신에 사용하는 것을 제안하고 싶다.

아래와 같이 코드를 감싼다,

 return new Container(
  child: SingleChildScrollView(
    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,
      ),
    ],
  ),
 ),
);

---

제 접근법은 물리학과 함께 사용하는 것입니다.

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

---

아래 항목 속성을 true에서 false로 변경하는 경우

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

일렬 종대로

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

모든 페이지 내용을 입력 포커스에 위로 끌어다 놓도록 Float를 만들었습니다

---

제 제안은 키보드가 화면에 갑자기 나타나면 위젯의 크기가 조정되지 않도록 하기 위해 사용하는 것입니다. 예를 들어, 사용자가 앱에 있는 동안 Facebook 채팅 헤드를 사용하는 경우.

키보드가 필요한 화면에 위젯을 겹치지 않도록 하려면 다음과 같은 방법을 사용할 것을 권장합니다. 여기서 높이는 사용 가능한 공간의 높이로 줄입니다. 이 경우 포커스가 지정된 위젯으로도 스크롤됩니다.

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

---

저는 같은 문제에 직면했고, 그것을 해결하기 위해 무작위적인 해결책을 시도하기 시작했고, 갑자기 이것이 그것을 해결했습니다.

SingleChildScrollView() 내에서 주 상위 컨테이너를 랩핑하고 장치 높이(예: device_height = MediaQuery.of(context.size.height)를 지정합니다.

이렇게 하면 전체 페이지를 스크롤할 수 있지만 위젯의 크기는 조정되지 않습니다.

---

물리학과 함께 사용하는 것이 가장 좋습니다. 또한 다음을 통해 위젯을 사용할 수 있도록 (예: use)를 기억하십시오:

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

---

값을 설정하는 것은 저에게 잘 맞습니다.

또한, 나는 잘 작동했다. 둘 중 하나를 사용할 수 있습니다.

---

이 솔루션은 의 내부를 가질 수 있는 능력을 하는 솔루션입니다. 이를 통해 + 키보드를 열거나 렌더링 후 화면이 오버플로우되는 경우 스크롤 가능한 화면을 사용할 수 있는 완벽한 레이아웃을 만들 수 있습니다(예: 텍스트 입력 필드 검증)

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

중요한 부분은 정답과 위젯입니다.

PS: (MediaQuery.of(컨텍스트).패딩.top + k 도구 모음높이) == 앱바 높이

---

대답하기에는 너무 늦을지도 모르지만, 다음은 나에게 효과가 있었다

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

클램핑은 자동으로 스크롤하여 텍스트 필드를 표시하며, 부모 NeverScrollable은 사용자가 스크롤할 수 없도록 합니다.

---

:

• 키보드를 열 때 배경 이미지의 크기가 조정되지 않음
• 키보드 뒤에 숨겨진 요소를 스크롤하는 기능

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

---

이렇게 하면 키패드로 스크롤하고 키보드가 사라지면 크기가 축소됩니다.

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

---

텍스트 필드와 keyBoard 오픈 미디어 쿼리를 클릭할 때 미디어 쿼리의 이러한 이상한 동작은 스택에서 동일한 페이지를 하나 더 금지합니다.

MaterialApp(InheritedMediaQuery: true 사용)

상속된 MediaQuery를 true로 사용하면 도움이 됩니다.

---

나는 내 화면에 동일한 문제가 있었고 여기 내가 어떻게 그것을 고쳤는지:

Scaffold(
  resizeToAvoidBottomInset: false, 
  ... 
)

---

사용할 수 있습니다

Scaffold(
  resizeToAvoidBottomInset: false, 
  ... 
)

또는 위젯을 포장할 수 있습니다

SingleChildScrollView