繁体   English   中英

textfield 打开键盘 flutter 脚手架

[英]textfield opens keyboard flutter scaffold

正如您从我发布的视频中看到的那样,我对下面的文本字段有一个约束问题。 一旦我按下,键盘就会打开,但它会重叠并破坏整个视图。 我该如何解决和管理问题?

问题可能在于 qrima 的尺寸设置不当。

他们建议我管理 Scaffold 中的所有内容,然后设置 resizeToAvoidBottomInset: false 但我没有注意到任何改进

我已经问过这个问题,他们告诉我把所有东西都放在脚手架里。 我试过了,但这真的破坏了视野,我什么也没看到

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

    double splitPoint = size.height / 7;

    return Scaffold(
        resizeToAvoidBottomInset: false,
        body: Stack(
            children: [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(
                  top: size.height * .10,
                  width: size.width * .8,
                  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,
                    ),
                  ),
                ),
              ],
            );
          }),
    ]),
    );
  }
}

更新: 在此处输入图像描述

我不得不说你正在使用堆栈并且定位太多。 没有必要计算一切。 而是使用 flutter 小部件(如 Expanded 或 padding)在小部件之间和周围留出所需的空间。 我无法轻松修复您的代码,但我至少尝试以类似的方式编写它。 此代码将防止输入覆盖。 请检查:

    import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {

  final Future<String> getUserData = Future<String>.delayed(
    const Duration(seconds: 2),
    () => 'Data Loaded',
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(28.0),
          child: Column(
            children: [
              Expanded(
                child: FutureBuilder<String>(
                    future: getUserData,
                    builder: (context, AsyncSnapshot<String> 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>(
                                    Colors.yellow)),
                          ),
                        );
                      return Column(
                        children: [
                          // TITOLO
                          Text(
                            "qr",
                            style: Theme.of(context)
                                .primaryTextTheme
                                .headline5
                                .copyWith(
                                  color: Colors.green,
                                  fontWeight: FontWeight.bold,
                                ),
                          ),

                          Expanded(
                              child: Center(
                                  child: Text(
                            "something",
                          ))),
                          Container(
                            color: Colors.blue,
                            child: Padding(
                              padding: const EdgeInsets.all(1.0),
                              child: TextField(
                                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,
                                ),
                              ),
                            ),
                          ),
                        ],
                      );
                    }),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM