Khi bàn phím xuất hiện, các widget Flutter sẽ thay đổi kích thước. Làm thế nào để ngăn chặn điều này?

Tôi có một Cột tiện ích con được mở rộng như thế này:

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

Nó trông như thế này:

convertFrom, bao gồm một Trường văn bản. Khi tôi nhấn vào trường văn bản này, bàn phím Android sẽ xuất hiện trên màn hình. Thao tác này thay đổi kích thước màn hình, vì vậy các tiện ích con sẽ thay đổi kích thước như sau:

Có cách nào để bàn phím "phủ" màn hình để Cột của tôi không thay đổi kích thước không? Nếu tôi không sử dụng Expandedwidget và mã hóa cứng chiều cao cho mỗi widget, các widget sẽ không thay đổi kích thước, nhưng tôi gặp lỗi sọc đen vàng khi bàn phím xuất hiện (vì không có đủ dung lượng). Điều này cũng không linh hoạt cho tất cả các kích thước màn hình.

Tôi không chắc đây là thiết bị dành riêng cho Android hay dành riêng cho Flutter.

Trong của bạn Scaffold, hãy đặt thuộc resizeToAvoidBottomInsettính thành false.

Property "resizeToAvoidBottomPadding" bị phản đối tại .... Trong bạn Scaffold, bộ resizeToAvoidBottomPaddingtài sản để false.

Hầu hết các câu trả lời khác đề nghị sử dụng resizeToAvoidBottomPadding=false. Theo kinh nghiệm của tôi, điều này cho phép bàn phím che các trường văn bản nếu chúng nằm bên dưới nơi bàn phím xuất hiện.

Giải pháp hiện tại của tôi là buộc cột của tôi có cùng chiều cao với màn hình, sau đó đặt nó vào vị trí SingleChildScrollViewđể Flutter tự động cuộn màn hình của tôi lên vừa đủ khi bàn phím được sử dụng.

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

Tôi sử dụng NeverScrollableScrollPhysicsđể người dùng không thể cuộn quanh mình.

Đặt resizeToAvoidBottomInsetthành falsethay vì resizeToAvoidBottomPaddingkhông được dùng nữa.

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

Phương pháp 1: Xóa android:windowSoftInputMode="adjustResize"khỏi tệp AndroidManifest.xml (Nếu không, nó sẽ ghi đè mã rung) và thêm resizeToAvoidBottomPadding: falsevào Scaffold như bên dưới:

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

Phương pháp 2 (Không được khuyến nghị): Chỉ cần Thêm android:windowSoftInputMode="stateVisible"vào android AndroidManifest.xml trong hoạt động, nó sẽ chỉ hoạt động cho Android chứ không phải cho IOS như.

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

Lưu ý: Không đặt nó thànhandroid:windowSoftInputMode="adjustResize"

Tôi nghĩ nếu chúng tôi triển khai giải pháp của @ Aman, nó sẽ khiến ứng dụng của chúng tôi hoạt động xấu xí như khi bàn phím xuất hiện, nó sẽ không điều chỉnh khung nhìn của màn hình theo chiều cao có sẵn và nó sẽ làm cho các trường khác ẩn sau bàn phím. Vì vậy, tôi sẽ đề nghị sử dụng SingleChildScrollViewthay thế.

Gói mã của bạn với SingleChildScrollViewnhư được cung cấp bên dưới,

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

Tùy thuộc vào trường hợp sử dụng bạn cũng có thể xem xét sử dụng một listview . Điều đó sẽ đảm bảo rằng nội dung cuộn khi không có đủ chỗ. Ví dụ: bạn có thể xem bản trình diễn trường văn bản trong ứng dụng thư viện

Biện pháp của tôi là sử dụng SingleChildScrollViewvới ClampingScrollPhysicsvật lý.

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

Đối với tôi thay đổi thuộc tính mục dưới đây từ đúng thành sai

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

trong tập tin

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

đã làm cho Flutter kéo tất cả nội dung trang lên trên tiêu điểm đầu vào

Đề xuất của tôi là sử dụng resizeToAvoidBottomInset: false để ngăn các widget thay đổi kích thước nếu bàn phím đột nhiên xuất hiện trên màn hình. Ví dụ: nếu người dùng sử dụng phần đầu trò chuyện trên Facebook khi ở trong ứng dụng của bạn.

Để ngăn bàn phím chồng lên các widget, trên các màn hình mà bạn cần, tôi đề xuất cách tiếp cận sau, trong đó chiều cao được SingleChildScrollViewgiảm xuống chiều cao của không gian khả dụng. Trong trường hợp này, SingleChildScrollViewcũng cuộn đến tiện ích con tập trung.

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