Flutter下拉界面

时间:2020-08-17 07:27:09

标签: flutter flutter-layout

我正在使用下面的代码,但无法达到预期的效果,我是扑朔迷离的世界,所以让我知道在哪里进行改进以获得理想的结果。这是我所做的源代码。

return LoadingIndicatorPage(
  loading: _loading,
  child: Scaffold(
    key: _scaffoldKey,
    resizeToAvoidBottomPadding: false,
    body: Container(
      decoration: new BoxDecoration(
        color: Colors.brown,
        image: new DecorationImage(
          image: new ExactAssetImage("graphics/register_bg.png"),
          fit: BoxFit.cover,
        ),
      ),
      child: Center(
        child: Padding(
          padding: EdgeInsets.only(
              left: LEFTRIGHT_PADDING, right: LEFTRIGHT_PADDING),
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: AnimatedOpacity(
              opacity: _currentOpacity,
              duration: const Duration(seconds: 1),
              child: Column(
                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(
                        'Country',
                        style: TextStyle(color: brownishGrey),
                      ),
                    ),
                  ),




                  Container(
                    padding: const EdgeInsets.only(left: 10.0, right: 10.0),
                    decoration: new BoxDecoration(
                      shape: BoxShape.rectangle,
                      color: Colors.white,
                      boxShadow: [new BoxShadow(
                        color: shadow,
                        blurRadius: 4.0,
                        offset: Offset(1.0, 4.0),
                      )],
                      borderRadius: const BorderRadius.all(
                          const Radius.circular(5.0)
                      ),
                    ),
                    child: DropdownButtonHideUnderline(
                      child: ButtonTheme(
                        alignedDropdown: true,
                        child: DropdownButton<String>(
                          value: _selectedItem,
                          style: TextStyle(
                            color: Colors.black54,
                            fontSize: 16,
                          ),
                          hint: Text('Select Country'),
                          onChanged: (String newValue) {
                            setState(() {
                              _selectedItem = newValue;
                              print(_selectedItem);
                            });
                          },
                          items: countryList?.map((item) {
                            return new DropdownMenuItem(
                              child: new Text(item.name),
                              value: item.id.toString(),
                            );
                          })?.toList() ??
                              [],
                        ),
                      ),
                    ),

                  ),





                  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: 80.0),
                    child: Button(
                        text: AppLocalizations.of(context).registerRegister,
                        buttonOnPressed: _createAccount),
                  ),
                  Padding(
                    padding: const EdgeInsets.fromLTRB(8.0, 15.0, 8.0, 0),
                    child: Divider(
                      thickness: 1,
                      color: whiteTwo,
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 15.0, bottom: 30),
                    child: GestureDetector(
                      child: RichText(
                        text: TextSpan(
                          text:
                              AppLocalizations.of(context).registerLoginPre,
                          style: TextStyle(color: brownishGrey),
                          children: <TextSpan>[
                            TextSpan(
                              text: AppLocalizations.of(context)
                                  .registerLoginPost,
                              style: TextStyle(color: purpleishBlueThree),
                            ),
                          ],
                        ),
                      ),
                      onTap: () {
                        Navigator.pop(context);
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    ),
  ),
);

问题:在布局过程中引发了以下断言: RenderFlex在右侧溢出了154个像素。

相关的引起错误的小部件是: DropdownButton

请考虑应用弹性系数(例如,使用扩展窗口小部件)来强制RenderFlex的子代适应可用空间,而不是将其尺寸设置为自然尺寸。 这被认为是错误情况,因为它表明存在无法看到的内容。如果内容合法地大于可用空间,请考虑在将内容放入Flex中之前,使用ClipRect小部件对其进行裁剪,或者考虑使用可滚动容器而不是Flex,例如ListView。

enter image description here

1 个答案:

答案 0 :(得分:0)

通常情况是,每当孩子想要渲染时,它都会要求父母提供身高和宽度。现在容器的宽度由于两侧的填充而受到限制,所以孩子溢出了

现在您可以告诉孩子灵活的了,所以用__doc__小部件包装容器孩子

像这样

Flexible(),
相关问题