如何使我的单子滚动视图仅在键盘弹起时可滚动？

Question

我正在注册屏幕上，当用户单击输入字段时，键盘弹出。问题是当键盘下降时，内容停留在上面。我该如何解决？目前，我正在使用屏幕尺寸只有一半的容器尝试此操作，之前我尝试使用一列来解决此问题，该列具有两个扩展小部件，每个小部件都具有cloumn。这没有用。

  @override
  Widget build(BuildContext context) {
    final authenticationProvider = Provider.of<AuthenticationProvider>(context);
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      body: Center(
        child: ScrollConfiguration(
          behavior: ScrollBehaviourWithoutGlow(),
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: [
                Container(
                  height: MediaQuery.of(context).size.height / 2,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      SvgPicture.asset(moterCycleSVGPath,
                          color: Theme.of(context).primaryColor),
                      Text(
                        'APP NAME',
                        style: Theme.of(context).textTheme.headline,
                      ),
                    ],
                  ),
                ),
                Container(
                  height: MediaQuery.of(context).size.height / 2,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      TextFormField(
                        keyboardType: TextInputType.phone,
                        style: Theme.of(context).textTheme.body1,
                        onChanged: (String newValue) =>
                            this.phoneNumber = newValue,
                        decoration: InputDecoration(
                          hintText: 'Phone Number',
                        ),
                        validator: (value) {
                          return value.isEmpty
                              ? 'Enter your phone number here'
                              : null;
                        },
                      ),
                      TextFormField(
                        keyboardType: TextInputType.text,
                        style: Theme.of(context).textTheme.body1,
                        decoration: InputDecoration(
                          hintText: 'Name',
                        ),
                        validator: (value) {
                          return value.isEmpty ? 'Enter you name here' : null;
                        },
                      ),
                      RaisedButton(
                        textColor: Theme.of(context).backgroundColor,
                        onPressed: () =>
                            authenticationProvider.registerWithPhone(
                                phoneNumber: phoneNumber,
                                context: context,
                                onLogin: _onRegister),
                        child: Text('Send'),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

使用键盘之前

使用键盘后

看看一切如何保持上升？

编辑

我注意到，即使按下键盘，该区域现在仍可滚动？我阅读了这篇文章https://medium.com/zipper-studios/the-keyboard-causes-the-bottom-overflowed-error-5da150a1c660，其操作方式与我的操作相同。键盘按下时如何阻止它滚动？

我可以阻止它用physics: NeverScrollableScrollPhysics(),滚动，但是输入字段将再次出现在键盘后面，这显然不是我想要的，并且会否定我想做的所有事情。

所以我希望它像这样，2个框将屏幕在垂直轴上分成两半。在这些框的中间是内容。

但是这种情况一直发生，或者如果我使用SingleChildScrollView（），它就变得可滚动，因此您可以如先前图像中所示将内容滚动出屏幕。

我也尝试使用扩展的小部件进行此操作。这给了我以下错误RenderFlex children have non-zero flex but incoming height constraints are unbounded.

  @override
  Widget build(BuildContext context) {
    final authenticationProvider = Provider.of<AuthenticationProvider>(context);
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      body: Center(
        child: ScrollConfiguration(
          behavior: ScrollBehaviourWithoutGlow(),
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: [
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      SvgPicture.asset(moterCycleSVGPath,
                          color: Theme.of(context).primaryColor),
                      Text(
                        'APP NAME',
                        style: Theme.of(context).textTheme.headline,
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      TextFormField(
                        keyboardType: TextInputType.phone,
                        style: Theme.of(context).textTheme.body1,
                        onChanged: (String newValue) =>
                            this.phoneNumber = newValue,
                        decoration: InputDecoration(
                          hintText: 'Phone Number',
                        ),
                        validator: (value) {
                          return value.isEmpty
                              ? 'Enter your phone number here'
                              : null;
                        },
                      ),
                      TextFormField(
                        keyboardType: TextInputType.text,
                        style: Theme.of(context).textTheme.body1,
                        decoration: InputDecoration(
                          hintText: 'Name',
                        ),
                        validator: (value) {
                          return value.isEmpty ? 'Enter you name here' : null;
                        },
                      ),
                      RaisedButton(
                        textColor: Theme.of(context).backgroundColor,
                        onPressed: () =>
                            authenticationProvider.registerWithPhone(
                                phoneNumber: phoneNumber,
                                context: context,
                                onLogin: _onRegister),
                        child: Text('Send'),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

Answer 1

我不明白您为什么要在列内的容器内创建列。是的，一旦您使用过SingleChildScroll视图，就可以进行滚动。但是我不明白为什么在打开键盘然后将其关闭后却滚动（而不是之前）。

下面的代码将给您几乎相同的结果。

请尝试这个

@override
  Widget build(BuildContext context) {
    final authenticationProvider = Provider.of<AuthenticationProvider>(context);
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      body: Center(
        child: ScrollConfiguration(
          behavior: ScrollBehaviourWithoutGlow(),
          child: SingleChildScrollView(
            padding: const EdgeInsets.fromLTRB(10.0,20.0,10.0,0.0), //whatever values you want
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SvgPicture.asset(moterCycleSVGPath,
                          color: Theme.of(context).primaryColor),
                      Text(
                        'APP NAME',
                        style: Theme.of(context).textTheme.headline,
                      ),
                SizedBox(height: 200),  //whatever height you dezire
                TextFormField(
                        keyboardType: TextInputType.phone,
                        style: Theme.of(context).textTheme.body1,
                        onChanged: (String newValue) =>
                            this.phoneNumber = newValue,
                        decoration: InputDecoration(
                          hintText: 'Phone Number',
                        ),
                        validator: (value) {
                          return value.isEmpty
                              ? 'Enter your phone number here'
                              : null;
                        },
                      ),
                TextFormField(
                        keyboardType: TextInputType.text,
                        style: Theme.of(context).textTheme.body1,
                        decoration: InputDecoration(
                          hintText: 'Name',
                        ),
                        validator: (value) {
                          return value.isEmpty ? 'Enter you name here' : null;
                        },
                      ),
                RaisedButton(
                        textColor: Theme.of(context).backgroundColor,
                        onPressed: () =>
                            authenticationProvider.registerWithPhone(
                                phoneNumber: phoneNumber,
                                context: context,
                                onLogin: _onRegister),
                        child: Text('Send'),
                     ),

              ],
            ),
          ),
        ),
      ),
    );
  }

如果这不适用于您，请尝试添加此行，

resizeToAvoidBottomInset = false,在您的脚手架小部件中

请告诉它是否按预期工作：）