文本字段打開鍵盤中斷視圖

Question

正如您從我發布的視頻中看到的那樣，我對下面的文本字段有一個約束問題。 一旦我按下，鍵盤就會打開，但它會重疊並破壞整個視圖。 我該如何解決和管理問題？

問題可能在於 qrima 的尺寸設置不當。

      Future<Widget> buildQrCode() async {
    Map<String, dynamic> myData = {
      'type': 1,
      'content': connection.name, //TODO check
      'display_name': "${(await contentManager.getUserInfo()).shopName}",
      //'collaborator': connection.name, //TODO check
      'mac': await Utilities.getDeviceMac(),
    };

    String encodedJson = jsonEncode(myData);
    QrCodeEncrypter.encrypt(connection.password, myData);
    Size size = MediaQuery.of(context).size;

    return QrImage(
      data: encodedJson,
      size: size.width / 1.5,
      gapless: false,
    );
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    _buttonHeight = size.height * .05;

    double splitPoint = size.height / 7;

    return FutureBuilder<UserData>(
        future: contentManager.getUserData(),
        builder: (context, AsyncSnapshot<UserData> snapUserData) {
          if (snapUserData.hasError)
            return Container(
              child: Center(
                child: Text("There was some error"),
              ),
            );
          if (snapUserData.connectionState != ConnectionState.done)
            return Container(
              child: Center(
                child: CircularProgressIndicator(valueColor: new AlwaysStoppedAnimation<Color>(appColors.yellow)),
              ),
            );
          return Stack(
            alignment: AlignmentDirectional.center,
            children: [
              // SFONDO
              Positioned(
                bottom: 0,
                child: Container(
                  height: size.height,
                  width: size.width,
                  color: appColors.primaryColor,
                ),
              ),
              // TITOLO
              Positioned(
                top: size.height * .05,
                child: Text(
                  localization.showQR,
                  style: Theme.of(context).primaryTextTheme.headline5.copyWith(
                    color: appColors.green,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Positioned.fill(
                top: size.height * .10,
                child: Align(
                  alignment: Alignment.topCenter,
                  child: qrCodeHolder,
                ),
              ),
              Positioned(
                bottom: size.height * .18,
                width: size.width * .8,
                child: AutoSizeText(
                  localization.home_subLabel,
                  textAlign: TextAlign.center,
                  maxLines: 1,
                  style: Theme.of(context).primaryTextTheme.headline5.copyWith(
                    color: appColors.green,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Positioned(
                bottom: size.height * .08,
                width: size.width * .7,
                height: size.height * .05,
                child: TextField(
                  inputFormatters: [
                    new LengthLimitingTextInputFormatter(11),
                  ],
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: Colors.white,
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.white),
                    ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.white),
                    ),
                  ),
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 18.0,
                    //height: 2.0,
                    color: Colors.black,
                  ),
                ),
              ),
            ],
          );
        });
  }
}

Answer 1

在您的頁面中設置 Scaffold resizeToAvoidBottomInset: false,

如果為 true，主體和腳手架的浮動小部件應自行調整大小以避免屏幕鍵盤的高度由環境 MediaQuery 的 MediaQueryData.viewInsets 底部屬性定義。

例如，如果腳手架上方顯示了屏幕鍵盤，則可以調整主體的大小以避免與鍵盤重疊，從而防止主體內的小部件被鍵盤遮擋。

默認為真。