使 ListView/SingleChildScrollView 中的列占用屏幕的剩余空间

Question

我正在尝试构建一个注册屏幕，我在 adobe XD 上设计的概念是注册屏幕将在顶部中心有应用程序徽标，一张带有大约 3-4 个文本字段/区域的卡片，一个按钮底部中心。由于要填写多张卡片，我希望在中心有一个圆形页面指示器，以便用户更轻松地跟踪要填写的剩余数据，并且用户不必在单个屏幕上填写非常长的列表。

我试过的是 一个 SingleChildScrollView，其中有一列，该列具有要填写的第一个注册表单，其中的另一列具有带有页面指示器的按钮

Stack 和 pageviewbuilder 这在布局方面给了我最好的结果，但唯一的问题是，当使用键盘时，小部件会引发 renderFlew 溢出

现在是一个包含表单的列表视图和一个包含按钮和页面指示器的列

我需要的东西：

• 键盘不会导致表单出现问题
• 适用于多种屏幕尺寸的实用且一致的代码

我的最新代码

@override
  Widget build(BuildContext context) {
    List<Widget> registrationForms = [EmailRegistrationForm()];
    return Scaffold(
        backgroundColor: Theme.of(context).backgroundColor,
        body: ListView(
          children: <Widget>[
            Align(alignment: Alignment.center, child: registrationForms[0]),
            Container(
              child: Column(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(top: 5),
                    child: InkWell(
                      child: Text("Already have an account? Login!"),
                    ),
                  ),
                  PrimaryStyledButton(text: "Next", onPress: () {}),
                  CirclePageIndicator(
                    currentPageNotifier: _currentPageNotifier,
                    itemCount: registrationForms.length,
                    selectedDotColor: Theme.of(context).accentColor,
                  )
                ],
              ),
            ),

          ],
        ));
  }

预期结果

Answer 1

所以这最终对我有用，我意识到列表视图有点没用，所以结构如下： SingleChildScrollView 有一个大小的框（屏幕大小）和一个大小框内的列，SingleChildScrollView 是为了阻止键盘向上推东西的问题，同时提供在填充数据时滚动的能力

return Scaffold(
        backgroundColor: Theme.of(context).backgroundColor,
        body: SingleChildScrollView(
          child: SizedBox(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: Column(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(bottom: 10),
                  child: landingScreen.getLogoWidget(),
                ),
                Expanded(
                  child: Align(
                      alignment: Alignment.center, child: registrationForms[0]),
                ),
                Padding(
                  padding: EdgeInsets.only(bottom: 10),
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(top: 5),
                        child: InkWell(
                          child: Text(ALREADY_REGISTERED_MSG),
                        ),
                      ),
                      PrimaryStyledButton(text: NEXT, onPress: () {
                      }, ),
                      Padding(
                        padding: EdgeInsets.symmetric(vertical: 8.0),
                        child: CirclePageIndicator(
                          currentPageNotifier: _currentPageNotifier,
                          itemCount: registrationForms.length,
                          selectedDotColor: Theme.of(context).accentColor,
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ));

Answer 2

尝试将 SingleChildScrollView 与展开的小部件一起使用

  @override
  Widget build(BuildContext context) {
    List<Widget> registrationForms = [EmailRegistrationForm()];
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      body: SingleChildScrollView(
        child: Expanded(
          child: Column(
            children: <Widget>[
              Align(alignment: Alignment.center, child: registrationForms[0]),
              Container(
                child: Column(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.only(top: 5),
                      child: InkWell(
                        child: Text("Already have an account? Login!"),
                      ),
                    ),
                    PrimaryStyledButton(text: "Next", onPress: () {}),
                    CirclePageIndicator(
                      currentPageNotifier: _currentPageNotifier,
                      itemCount: registrationForms.length,
                      selectedDotColor: Theme.of(context).accentColor,
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }