在移动视图上使 UI 适合 dart 中的屏幕

Question

我正在建立一个注册。我构建了该页面，这里是一个示例代码块：

class RegistrationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFB0C4DE),
      body: SafeArea(
        child: SingleChildScrollView(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              SizedBox(height: 32.0),
              RegistrationField(
                label: 'Email',
                placeholder: 'Enter Email',
                isPassword: false,
              ),
              RegistrationField(
                label: 'Password *',
                placeholder: 'Enter Password',
                isPassword: true,
              ),
              RegistrationField(
                label: 'Re-enter Password *',
                placeholder: 'Re-enter Password',
                isPassword: true,
              ),
              SizedBox(height: 32.0),
              

还有另一个按钮和文本。尽管页面底部有更多空间，但它看起来在底部被切断。

如何使字段使用整个页面高度？正如您在图片中看到的，该按钮不可见，因此不可单击。我无法向下滚动（我没有鼠标，只有鼠标垫），在真实的构建中，我不希望它看起来像这样，我希望它适合屏幕。

我怎样才能以某种方式使所有这些元素适合并禁用任何类型的溢出到底部，如图所示？

有没有办法设置自动调整大小规则，使其自动适合屏幕？

如果这是不可能的，如何使其可滚动？

Answer 1

提醒一下，全屏显示整个页面内容并不能保证所有小部件都会按您的预期显示，它们可能会被破坏以适合一个屏幕上的所有内容。

假设您有 10 个

RegistrationField

，每个

RegistrationField

高度为 70px，这意味着您需要一个屏幕长度大于 700px 的设备。如果设备高度为 400 像素，则 10

RegistrationField

将被压缩以适合设备上可用的 400 像素。

是的，您可以根据设备的高度将

RegistrationField

的高度设置为百分比，以使其具有响应能力，但是想一想，

RegistrationField

的高度不是被设置为超小（以适合 10 400px高度的小部件）并且无法供用户使用？

现在，如果您仍然想让所有小部件适合一个屏幕。用

RegistrationField

小部件包裹

Expand

，然后移除

SingleChildScrollView

。

在一个屏幕中容纳 30 个容器的示例：

return Scaffold(
      body: Column(
        children: List.generate(30, (index) {
          return Expanded(
              child: Padding(
                  padding: const EdgeInsets.all(5),
                  child: Container(
                    child: Center(
                      child: Text((index + 1).toString(), style: TextStyle(color: Colors.white)),
                    ),
                    color: Colors.blue,
                    height: 50,
                  )));
        }),
      ),
    );

而且文字甚至无法完全显示。祝你好运！