Scaffold 占据了整个屏幕，尽管 Flutter 不需要它

Posted 2023-02-23

【中文标题】Scaffold 占据了整个屏幕，尽管 Flutter 不需要它

【英文标题】：Scaffold takes entire screen although it's not needed Flutter

【发布时间】：2021-06-23 13:32:39

【问题描述】：

我有以下代码：

import 'package:flutter/material.dart';
import 'package:spiran_app/constants/constants.dart';
import 'package:spiran_app/widgets/form_textfield_widget.dart';
import 'package:spiran_app/widgets/subscreen_appbar_widget.dart';

import 'dialog_widget.dart';

class SignUpDialogWidget extends StatefulWidget 
  @override
  _SignUpDialogWidgetState createState() => _SignUpDialogWidgetState();


class _SignUpDialogWidgetState extends State<SignUpDialogWidget> 
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  TextEditingController _emailController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();
  TextEditingController _confirmPasswordController = TextEditingController();

  @override
  Widget build(BuildContext context) 
    final ThemeData themeData = Theme.of(context);
    return Container(
      margin: Constants.constContainerMargin,
      decoration: BoxDecoration(
        borderRadius:
            BorderRadius.circular(Constants.constContainerBorderRadius),
        boxShadow: [
          BoxShadow(color: Colors.black, blurRadius: 50.0, spreadRadius: 20.0),
        ],
      ),
      child: ClipRRect(
        borderRadius:
            BorderRadius.circular(Constants.constContainerBorderRadius),
        child: Scaffold(
          appBar: SubscreenAppBarWidget(
            theme: Theme.of(context),
            title: "Sign Up",
            leadingWidget: IconButton(
              icon: Icon(Icons.close),
              onPressed: () => Navigator.pop(context),
            ),
          ),
          body: Form(
            autovalidateMode: AutovalidateMode.onUserInteraction,
            key: _formKey,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  FormTextFieldWidget(
                    theme: themeData,
                    textEditingController: this._emailController,
                    icon: Icons.alternate_email,
                    textFieldHintText: "Email",
                    validationRegex: RegExp(
                        r"^[a-zA-Z0-9.!#$%&'*+/=?^_`|~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]0,253[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]0,253[a-zA-Z0-9])?)*$"),
                    validationErrorMessage:
                        "Please enter a valid email address",
                  ),
                  FormTextFieldWidget(
                    theme: themeData,
                    textEditingController: this._passwordController,
                    icon: Icons.lock,
                    isPassword: true,
                    textFieldHintText: "Password",
                    validationRegex: RegExp(
                        r"^[a-zA-Z0-9.!#$%&'*+/=?^_`|~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]0,253[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]0,253[a-zA-Z0-9])?)*$"),
                    validationErrorMessage: "Please enter a valid password",
                  ),
                  FormTextFieldWidget(
                    theme: themeData,
                    textEditingController: this._confirmPasswordController,
                    icon: Icons.lock,
                    textFieldHintText: "Confirm Password",
                    isPassword: true,
                    validationRegex: RegExp(
                        r"^[a-zA-Z0-9.!#$%&'*+/=?^_`|~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]0,253[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]0,253[a-zA-Z0-9])?)*$"),
                    validationErrorMessage: "Passwords do not match",
                  ),
                  Align(
                    alignment: Alignment.center,
                    child: ElevatedButton(
                      style: ButtonStyle(
                          shape: MaterialStateProperty.all(
                            RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(
                                Constants.constContainerBorderRadius,
                              ),
                            ),
                          ),
                          backgroundColor: MaterialStateProperty.all(
                              themeData.primaryColor)),
                      child: Text(
                        "Sign Up",
                        style: TextStyle(
                          color: themeData.accentColor,
                        ),
                      ),
                      onPressed: () 
                        if (!_formKey.currentState!.validate()) 
                          showDialog(
                            context: context,
                            builder: (ctx) => DialogWidget(
                              titleText: "Input error",
                              contentText:
                                  "One or some of your inputs have an error. Please correct them first",
                            ),
                          );
                          return;
                        
                        //TODO sign up
                      ,
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  

我得到的结果是这样的：

如您所见，此屏幕的顶部和底部（矩形）有一个额外的空间。导致这种情况的小部件是我拥有的 Scaffold 小部件。如何删除多余的空间，以便我的小部件占用它需要的空间而不是更多？

【参考方案1】：

我没有很好地回答这个问题，但我认为您可以使用 Material() 小部件而不是脚手架

【讨论】：

你可以从图片中看到我有一些额外的空白。导致它的小部件是脚手架小部件。我的问题是如何删除多余的空间并强制小部件只占用他们需要的空间。我使用了你提到的材料，但我还有多余的空间

能否请您标记空白图像未清除

不是因为脚手架

你已经使用 Column(mainAxisAlignment: MainAxisAlignment.center) 将其更改为启动

如果你想覆盖整个页面，用扩展包装主小部件并在中间留出列空间