文本字段打开键盘中断视图

问题描述

正如您从 the video I posted 中看到的，我对下面的文本字段存在约束问题。一旦我按下，键盘就会打开，但它重叠并破坏了整个视图。我该如何解决和管理问题？

问题可能是 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,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),style: TextStyle(
                    fontSize: 18.0,//height: 2.0,color: Colors.black,);
        });
  }
}

解决方法

在您的页面中设置 Scaffold resizeToAvoidBottomInset: false,

如果为 true，则主体和脚手架的浮动小部件应自行调整大小，以避免出现高度由环境 MediaQuery 的 MediaQueryData.viewInsets 底部属性定义的屏幕键盘。

例如，如果在脚手架上方显示屏幕键盘，则可以调整主体的大小以避免与键盘重叠，从而防止主体内的小部件被键盘遮挡。

默认为真。

text uitextfield uitextfield uitextfield