Flutter 中的可滚动屏幕

Question

我正在使用下面的代码，但我在某些设备中遇到了这个问题。滚动视图的正确使用方法是什么？我是颤振世界的新手，所以我有点困惑。我也尝试过

SingleChildScrollView

，但对我没有帮助，或者也许我不知道正确的使用方法。

return Scaffold(
  key: _scaffoldKey,
  resizeToAvoidBottomPadding: false,
  body: LoadingIndicatorPage(
    loading: _loading,
    child: Stack(
      children: <Widget>[
        Container(
          decoration: new BoxDecoration(
            color: Colors.brown,
            image: new DecorationImage(
              image: new ExactAssetImage("graphics/register_bg.png"),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Padding(
          padding: EdgeInsets.only(
              left: LEFTRIGHT_PADDING, right: LEFTRIGHT_PADDING),
          child: AnimatedOpacity(
            opacity: _currentOpacity,
            duration: const Duration(seconds: 1),
            child: Column(
              children: <Widget>[
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(top: 50),
                        child: Text(
                          AppLocalizations.of(context).registerTitle,
                          style: TextStyle(fontSize: 32),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(top: 50.0),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            AppLocalizations.of(context).registerNameHint,
                            style: TextStyle(color: brownishGrey),
                          ),
                        ),
                      ),
                      TextFieldInput(
                        inputType: TextInputType.text,
                        textEditingController: nameController,
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: INPUT_FIELDS_SPACING),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            AppLocalizations.of(context)
                                .registerPhoneNumberHint,
                            style: TextStyle(color: brownishGrey),
                          ),
                        ),
                      ),
                      TextFieldInput(
                        inputType: TextInputType.text,
                        textEditingController: phoneNumberController,
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: INPUT_FIELDS_SPACING),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            AppLocalizations.of(context).registerEmailHint,
                            style: TextStyle(color: brownishGrey),
                          ),
                        ),
                      ),
                      TextFieldInput(
                        inputType: TextInputType.text,
                        textEditingController: emailController,
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: INPUT_FIELDS_SPACING),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            AppLocalizations.of(context)
                                .registerPasswordHint,
                            style: TextStyle(color: brownishGrey),
                          ),
                        ),
                      ),
                      TextFieldInput(
                        inputType: TextInputType.text,
                        textEditingController: passwordController,
                        obscureText: true,
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: INPUT_FIELDS_SPACING),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            AppLocalizations.of(context)
                                .registerRepeatPasswordHint,
                            style: TextStyle(color: brownishGrey),
                          ),
                        ),
                      ),
                      TextFieldInput(
                        inputType: TextInputType.text,
                        textEditingController: repeatPasswordController,
                        obscureText: true,
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: INPUT_FIELDS_SPACING),
                        child: CheckboxListTile(
                          title: Text(
                            AppLocalizations.of(context).registerTerms,
                            style: TextStyle(color: brownishGrey),
                          ),
                          value: true,
                          onChanged: (bool value){},
                        ),
                      )
                    ],
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 10.0),
                  child: Button(
                      text: AppLocalizations.of(context).registerRegister,
                      buttonOnPressed: _createAccount),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 15.0, bottom: 15),
                  child: GestureDetector(
                    child: Text(AppLocalizations.of(context).registerLogin,
                        style: TextStyle(color: textGreen)),
                    onTap: () {
                      Navigator.pop(context);
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  ),
);

这是注册屏幕代码。

Answer 1

1. 您有两个嵌套的

   Columns

   ，删除其中一个，因为没有必要。

2. 用

   Column

   包裹

   SingleChildScrollView

   ：

body: Stack(
        children: <Widget>[
          Container(
            decoration: new BoxDecoration(
              color: Colors.brown,
              image: new DecorationImage(
                image: new ExactAssetImage("graphics/register_bg.png"),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(left: LEFTRIGHT_PADDING, right: LEFTRIGHT_PADDING),
            child: AnimatedOpacity(
              opacity: _currentOpacity,
              duration: const Duration(seconds: 1),
              child: SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                    Padding(
...

Answer 2

使用列表视图而不是列，它不需要将列包装在单个子滚动视图中

Answer 3

而不是堆栈使用列，只需将

resizeToAvoidBottomPadding

更改为 true，然后调整正文大小以避免与屏幕键盘重叠。这可以防止键盘遮挡主体内部的小部件。

Answer 4

作为参考，这是Flutter推荐的解决方案。什么对我有用。

TL;DR: 将

Expanded

小部件替换为

Flexible

并设置

fit: FlexFit.loose

并设置列

mainAxisSize: MainAxisSize.min

。

Comlumn(
  mainAxisSize: MainAxiseSize.min,
  Children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(...),
    )
  ]
)

这是 OP 收到的错误（基于下面的评论）。错误消息描述了发生这种情况的原因。

我的答案来自最后一段。

RenderFlex 子级具有非零弯曲，但传入的高度约束是无界的。

当列位于不提供有限高度的父级中时 约束，例如如果它是垂直滚动的，它会尝试 沿垂直轴收缩其子项。设置弹性 子项（例如使用 Expanded）表示该子项要扩展到 填充垂直方向的剩余空间。这两个 指令是相互排斥的。如果父母要将其收缩包装 子级，子级不能同时扩展以适应其父级。

考虑将 mainAxisSize 设置为 MainAxisSize.min 并使用 FlexFit.loose 适合灵活的孩子（使用灵活而不是 比扩展）。这将允许灵活的孩子调整大小 他们自己小于他们会的无限剩余空间 否则会被强制采取，然后会导致RenderFlex 收缩包裹孩子而不是扩大以适应最大值 父母提供的约束。