Question

这是我要构建的应用的屏幕截图。

“出生日期”字段在单击时应显示一个日历。假设我在电子邮件文本字段中，并且键盘处于打开状态，现在用户移到了出生日期字段。用户点击出生日期字段后，我将卸下键盘并显示日历，这时我收到一个异常消息，说RenderFlex底部溢出了147个像素。

我已经经历了很多有关此的堆栈问题，其中提到要使用我正在使用的ListView。这是我的代码段。

return Scaffold(
  body: Column(
    children: <Widget>[
      Expanded(
          child: Padding(
        padding: const EdgeInsets.fromLTRB(20.0, 8.0, 40.0, 8.0),
        child: InkWell(
          onTap: () {
            FocusScope.of(context).requestFocus(FocusNode());
          },
          child: ListView(
            children: <Widget>[
              Image.asset(
                "images/alphaurbanelogo.png",
                width: 150.0,
                height: 150.0,
              ),
              Text("Sign Up",
                  style: TextStyle(
                      color: Colors.black,
                      fontFamily: "aktivgroteskBold",
                      fontSize: 25.0)),
              SizedBox(
                height: 5.0,
              ),
              Text("Create an account to access\n TAUP system",
                  style: TextStyle(
                      color: Colors.black,
                      fontFamily: "aktivgroteskLight",
                      fontSize: 15.0)),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                decoration: InputDecoration(
                    hintText: "First Name",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                decoration: InputDecoration(
                    hintText: "Last Name",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                decoration: InputDecoration(
                    hintText: "Email",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              InkWell(
                onTap: () {
                  FocusScope.of(context).requestFocus(FocusNode());
                  _selectDate(context);
                },
                child: Row(
                  children: <Widget>[
                    Flexible(
                      child: TextFormField(
                          style: TextStyle(
                              color: Color(0xFF5c2a7c), height: 2.0),
                          enabled: false,
                          controller: dobController,
                          decoration: InputDecoration.collapsed(
                            hintText: "Date of Birth",
                            hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                          )),
                    ),
                    Icon(
                      Icons.email,
                      color: Color(0xFF5c2a7c),
                    ),
                  ],
                ),
              ),
              Divider(
                color: Color(0xFF5c2a7c),
                height: 5.0,
              ),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                    hintText: "Contact Number",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                decoration: InputDecoration(
                    hintText: "Parent Email",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              TextFormField(
                style: TextStyle(color: Color(0xFF5c2a7c)),
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                    hintText: "Parent Contact Number",
                    hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
              ),
              SizedBox(
                height: 10.0,
              ),
              DropdownButton<String>(
                items: _schools.map((String dropDownStringItem) {
                  return DropdownMenuItem<String>(
                    value: dropDownStringItem,
                    child: Text(dropDownStringItem),
                  );
                }).toList(),
                hint: Text("School/Institution"),
                onChanged: (String newValueSelected) {
                  setState(() {
                    this._currentItemSelected = newValueSelected;
                  });
                },
                value: _currentItemSelected,
                style: TextStyle(color: Color(0xFF5c2a7c), fontSize: 16.0),
              ),
              SizedBox(
                height: 1.0,
              ),
              Divider(
                color: Color(0xFF5c2a7c),
                height: 5.0,
              ),
              SizedBox(
                height: 10.0,
              ),
              Row(
                children: <Widget>[
                  Spacer(),
                  InkWell(
                    child: Image.asset(
                      "images/next.png",
                      width: 40.0,
                      height: 40.0,
                    ),
                    onTap: () {},
                  )
                ],
              )
            ],
          ),
        ),
      )),
      BottomBar()
    ],
  ),
);


Future<Null> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        firstDate: new DateTime(1900),
        lastDate: new DateTime(2100));

    if (picked != null) {
      var formatter = new DateFormat('yyyy-MM-dd');
      choosenDate = formatter.format(picked);
      dobController.text = choosenDate;
    }
  }

Answer 1

如果您使用的是脚手架，请键入ResizetToAvoidBottomPadding：false。

Answer 2

我正在使用一个窗体小部件，并且其底部已溢出，所以存在类似的问题。我的解决方案是应用SingleChildScrollView小部件。这非常方便，因为我使用的是padding小部件，并且该部件也具有padding属性。只是替换它而已。

return Form(
        key: _formKey,
        autovalidate: _autoValidate,
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(10.0),
          child: Column(
  (...)

Source

RenderFlex底部溢出147个像素

2 个答案: