Flutter :- 如何在 Stack 视图上滚动屏幕而不缩小屏幕？（当键盘出现时滚动整个屏幕）答案

【问题标题】：Flutter :- How to scroll the sceen without shrink the screen on the Stack view?(Scroll the the whole screen when the keyboard appears )Flutter :- 如何在 Stack 视图上滚动屏幕而不缩小屏幕？（当键盘出现时滚动整个屏幕）
【发布时间】：2020-03-11 06:38:51
【问题描述】：

说明
我正在创建登录屏幕，在其中我使用了Stack 小部件，目前，一切正常，但只有一个缩小视图的问题。当我在Scaffold 中使用 resizeToAvoidBottomPadding: false 时，屏幕收缩消失但另一个问题是整个屏幕滚动不起作用，请检查下面的代码行

 class _LoginScreen extends State<LoginScreen> {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build

        return Scaffold(
            resizeToAvoidBottomPadding: false,
            body:  Stack(
              children: <Widget>[
                Container(
                  height: double.infinity,
                  width: double.infinity,
                  child: Column(
                    children: <Widget>[
                      Expanded(
                        flex: 4,
                        child: Column(
                          children: <Widget>[
                            Expanded(
                              flex: 9,
                              child: Container(
                                color: Colors.blue,
                                child: Align(
                                  alignment: Alignment.centerLeft,
                                  child: RotatedBox(
                                    quarterTurns: 3,
                                    child: Container(
                                      child: Padding(
                                        padding: EdgeInsets.all(5),
                                        child: Text(
                                          "Login !!",
                                          style: TextStyle(
                                            fontSize: 30.0,
                                            color: Colors.white),
                                        ),
                                      ),
                                    ),
                                  ),
                                )),
                            ),
                            Expanded(
                              flex: 1,
                              child: Container(
                                color: Colors.white,
                              ),
                            )
                          ],
                        )),
                      Expanded(
                        flex: 6,
                        child: Container(
                          color: Colors.white,
                        ),
                      )
                    ],
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(left: 20.0, right: 20.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Image(
                        image: new AssetImage("images/logo.png"),
                        color: null,
                        height: 100.0,
                        width: 100.0,
                        fit: BoxFit.scaleDown,
                        alignment: Alignment.center,
                      ),
                      SizedBox(
                        height: 20.0,
                      ),
                      TextField(
                        keyboardType: TextInputType.number,
                        inputFormatters: [
                          LengthLimitingTextInputFormatter(10),
                        ],
                        decoration: new InputDecoration(
                          focusedBorder: OutlineInputBorder(
                            borderSide:
                            BorderSide(color: Colors.blue, width: 2.0),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide:
                            BorderSide(color: Colors.grey, width: 2.0),
                          ),
                          hintText: "Please enter mobile number")),
                      SizedBox(
                        height: 10.0,
                      ),
                      TextField(
                        obscureText: true,
                        inputFormatters: [
                          LengthLimitingTextInputFormatter(16),
                        ],
                        keyboardType: TextInputType.visiblePassword,
                        decoration: new InputDecoration(
                          focusedBorder: OutlineInputBorder(
                            borderSide:
                            BorderSide(color: Colors.blue, width: 2.0),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide:
                            BorderSide(color: Colors.grey, width: 2.0),
                          ),
                          hintText: "Password")),
                      SizedBox(
                        height: 3.0,
                      ),
                      Align(
                        alignment: Alignment.topRight,
                        child: Text(
                          "Forgot Password?",
                          style: TextStyle(fontSize: 12.0),
                        )),
                      SizedBox(
                        height: 3.0,
                      ),
                      SizedBox(
                        height: 10.0,
                      ),
                      RaisedButton(
                        onPressed: () {},
                        color: Colors.blue,
                        child: const Text(
                          'Login',
                          style: TextStyle(fontSize: 15.0, color: Colors.black45),
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ));
      }
    }

从上面的代码，我得到以下屏幕

我使用了ListView 和SingleChildScrollView，但它不能正常工作，请检查我的代码SingleChildScrollView，我已经尝试过

class _LoginScreen extends State<LoginScreen> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return Scaffold(
        resizeToAvoidBottomPadding: false,
        body: SingleChildScrollView(
          child: IntrinsicHeight(
              child: Stack(
            children: <Widget>[
              Container(
                height: double.infinity,
                width: double.infinity,
                child: Column(
                  children: <Widget>[
                    Expanded(
                        flex: 4,
                        child: Column(
                          children: <Widget>[
                            Expanded(
                              flex: 9,
                              child: Container(
                                  color: Colors.blue,
                                  child: Align(
                                    alignment: Alignment.centerLeft,
                                    child: RotatedBox(
                                      quarterTurns: 3,
                                      child: Container(
                                        child: Padding(
                                          padding: EdgeInsets.all(5),
                                          child: Text(
                                            "Login !!",
                                            style: TextStyle(
                                                fontSize: 30.0,
                                                color: Colors.white),
                                          ),
                                        ),
                                      ),
                                    ),
                                  )),
                            ),
                            Expanded(
                              flex: 1,
                              child: Container(
                                color: Colors.white,
                              ),
                            )
                          ],
                        )),
                    Expanded(
                      flex: 6,
                      child: Container(
                        color: Colors.white,
                      ),
                    )
                  ],
                ),
              ),
              Padding(
                padding: EdgeInsets.only(left: 20.0, right: 20.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    new Image(
                      image: new AssetImage("images/logo.png"),
                      color: null,
                      height: 100.0,
                      width: 100.0,
                      fit: BoxFit.scaleDown,
                      alignment: Alignment.center,
                    ),
                    SizedBox(
                      height: 20.0,
                    ),
                    TextField(
                        keyboardType: TextInputType.number,
                        inputFormatters: [
                          LengthLimitingTextInputFormatter(10),
                        ],
                        decoration: new InputDecoration(
                            focusedBorder: OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colors.blue, width: 2.0),
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colors.grey, width: 2.0),
                            ),
                            hintText: "Please enter mobile number")),
                    SizedBox(
                      height: 10.0,
                    ),
                    TextField(
                        obscureText: true,
                        inputFormatters: [
                          LengthLimitingTextInputFormatter(16),
                        ],
                        keyboardType: TextInputType.visiblePassword,
                        decoration: new InputDecoration(
                            focusedBorder: OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colors.blue, width: 2.0),
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colors.grey, width: 2.0),
                            ),
                            hintText: "Password")),
                    SizedBox(
                      height: 3.0,
                    ),
                    Align(
                        alignment: Alignment.topRight,
                        child: Text(
                          "Forgot Password?",
                          style: TextStyle(fontSize: 12.0),
                        )),
                    SizedBox(
                      height: 3.0,
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    RaisedButton(
                      onPressed: () {},
                      color: Colors.blue,
                      child: const Text(
                        'Login',
                        style: TextStyle(fontSize: 15.0, color: Colors.black45),
                      ),
                    )
                  ],
                ),
              ),
            ],
          )),
        ));
  }
}

从上面的代码中使用SingleChildScrollView得到这个结果

问题：- 我想在键盘出现时滚动整个屏幕，我已经使用了所有Listview和SingleChildScrollView但没有得到解决方案，请帮助我。谢谢

【问题讨论】：

滚动是什么意思！没有滚动空间，因为您的小部件不超过您的屏幕！即使没有更多孩子也想滚动吗？
@NaveenAvidi 我想在 keyboard 出现时滚动小部件
用 Flexible 包装 Column 小部件！
嗨@NaveenAvidi，我想在键盘出现时滚动屏幕。 wrap 不适用于那里，请检查我的代码一次。
你为什么用resizetoPad......？

标签： flutter scroll flutter-layout flutter-dependencies

【解决方案1】：

问题是您使用的是扩展小部件，您看到扩展小部件本质上是灵活的，它们会根据可用空间消耗和缩小。如果你不想这样，你需要指定一个高度。

https://i.imgur.com/wVgAUlN.mp4

class StacScroll extends StatefulWidget {
  StacScroll({Key key}) : super(key: key);

  @override
  _StacScrollState createState() => _StacScrollState();
}

class _StacScrollState extends State<StacScroll> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: true,
        body: Container(
          height: double.infinity,
          width: double.infinity,
          // margin:
          //     EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          child: SingleChildScrollView(
            child: Stack(
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  height: MediaQuery.of(context).size.height * 0.3,
                  width: MediaQuery.of(context).size.width,
                  child: RotatedBox(
                      quarterTurns: 3,
                      child: Container(
                        child: Padding(
                          padding: EdgeInsets.all(5),
                          child: Text(
                            "Login !!",
                            style:
                                TextStyle(fontSize: 30.0, color: Colors.white),
                          ),
                        ),
                      )),
                ),
                Container(
                  margin: EdgeInsets.only(
                      top: MediaQuery.of(context).size.height * 0.3),
                  child: Padding(
                    padding: EdgeInsets.only(left: 20.0, right: 20.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new Image(
                          image: new AssetImage("images/logo.png"),
                          color: null,
                          height: 100.0,
                          width: 100.0,
                          fit: BoxFit.scaleDown,
                          alignment: Alignment.center,
                        ),
                        SizedBox(
                          height: 20.0,
                        ),
                        TextField(
                            keyboardType: TextInputType.number,
                            decoration: new InputDecoration(
                                focusedBorder: OutlineInputBorder(
                                  borderSide: BorderSide(
                                      color: Colors.blue, width: 2.0),
                                ),
                                enabledBorder: OutlineInputBorder(
                                  borderSide: BorderSide(
                                      color: Colors.grey, width: 2.0),
                                ),
                                hintText: "Please enter mobile number")),
                        SizedBox(
                          height: 10.0,
                        ),
                        TextField(
                            obscureText: true,
                            keyboardType: TextInputType.visiblePassword,
                            decoration: new InputDecoration(
                                focusedBorder: OutlineInputBorder(
                                  borderSide: BorderSide(
                                      color: Colors.blue, width: 2.0),
                                ),
                                enabledBorder: OutlineInputBorder(
                                  borderSide: BorderSide(
                                      color: Colors.grey, width: 2.0),
                                ),
                                hintText: "Password")),
                        SizedBox(
                          height: 3.0,
                        ),
                        Align(
                            alignment: Alignment.topRight,
                            child: Text(
                              "Forgot Password?",
                              style: TextStyle(fontSize: 12.0),
                            )),
                        SizedBox(
                          height: 3.0,
                        ),
                        SizedBox(
                          height: 10.0,
                        ),
                        RaisedButton(
                          onPressed: () {},
                          color: Colors.blue,
                          child: const Text(
                            'Login',
                            style: TextStyle(
                                fontSize: 15.0, color: Colors.black45),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ));
  }
}

【讨论】：

意思是，我需要移除 Expand 小部件，并使用 MediQuery 指定小部件的高度
能否详细说明mediaquery中的0.3多重逻辑
是的，如果您确实希望它们动态收缩。 0.3 表示它是设备高度的 30%。使用时应始终尝试在堆栈中使用百分比，因为不同的设备意味着无意中未对齐。
意味着我需要使用 1 的全视图和我需要使用 5 的半视图
但是您在两个视图中都使用了 0.3 并且工作正常

【解决方案2】：

感谢@Nadeem，问题已解决每当我们想在键盘出现时滚动全屏时，我们应该不使用Expand 小部件。我也犯了同样的错误，对于其他用户我已经修改了完整的代码当键盘出现时滚动，我使用了MediaQuery，请检查我下面的代码。

import 'package:flutter/material.dart';

class LoginScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _LoginScreen();
  }
}

class _LoginScreen extends State<LoginScreen> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Login"),
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: SingleChildScrollView(
          child: Stack(
            children: <Widget>[
              Container(
                color: Colors.blue,
                height: MediaQuery.of(context).size.height * 0.3,
              ),
              Container(
                  color: Colors.white,
                  height: MediaQuery.of(context).size.height * 0.59,
                  padding: EdgeInsets.all(10.0),
                  margin: EdgeInsets.only(
                      top: MediaQuery.of(context).size.height * 0.3),
                  child: Container(
                    margin: EdgeInsets.only(top: 70.0),
                    child: Column(
                      children: <Widget>[
                        TextFormField(
                            decoration: InputDecoration(
                                labelText: 'Enter your username')),
                        TextFormField(
                            decoration: InputDecoration(labelText: 'Password')),
                        SizedBox(
                          height: 20.0,
                        ),
                        RaisedButton(
                          color: Colors.yellow,
                          child: Text("Submit",
                              style: TextStyle(color: Colors.blue)),
                          onPressed: () {},
                        )
                      ],
                    ),
                  )),
              Center(
                child: Card(
                  color: Colors.yellow,
                  elevation: 8,
                  margin: EdgeInsets.only(
                      top: MediaQuery.of(context).size.height * .25),
                  child: Container(
                    child: Center(
                        child: Text(
                      "Radhe",
                      style: TextStyle(color: Colors.blue, fontSize: 20.0),
                    )),
                    height: MediaQuery.of(context).size.height * .1,
                    width: MediaQuery.of(context).size.width * .3,
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

请检查它的输出。

【讨论】：