textfield 打開鍵盤 flutter 腳手架

Question

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

問題可能在於 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,
                    ),
                  ),
                ),
              ],
            );
          }),
    ]),
    );
  }
}

更新：

Answer 1

我不得不說你正在使用堆棧並且定位太多。 沒有必要計算一切。 而是使用 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,
                                ),
                              ),
                            ),
                          ),
                        ],
                      );
                    }),
              ),
            ],
          ),
        ),
      ),
    );
  }
}