Question

正如您从 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,
                  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 底部属性定义的屏幕键盘。

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

默认为真。

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

1 个答案: