我有一个带有 Scroll a Form 的部分，但在 flutter 中滚动无法正常工作

Question

我在底部看到这个栏说 "Bottom Overflowed by 27 pixels."

这是我的 UI 的样子

class _RegisterPageState extends State<RegisterPage> {
  @override
  Widget build(BuildContext context) {


    final fullname = TextFormField(
      style: TextStyle(color: Colors.white, fontSize: 17.0),
      decoration: InputDecoration(
        icon: Icon(Icons.person_outline, size: 30.0, color: Colors.white),
        labelText: "FULL NAME",
        labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
        contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
        border: InputBorder.none,
      ),
    );

    final username = TextFormField(
      keyboardType: TextInputType.emailAddress,
      style: TextStyle(color: Colors.white, fontSize: 17.0),
      decoration: InputDecoration(
        icon: Icon(Icons.alternate_email, size: 30.0, color: Colors.white),
        labelText: "EMAIL ADDRESS",
        labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
        contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
        border: InputBorder.none,
      ),
    );



    final mobilenumber = TextFormField(
      keyboardType: TextInputType.number,
      style: TextStyle(color: Colors.white, fontSize: 17.0),
      decoration: InputDecoration(
        icon: Icon(Icons.phone_android, size: 30.0, color: Colors.white),
        labelText: "MOBILE NUMBER",
        labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
        contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
        border: InputBorder.none,
      ),
    );

    final registerButton = Padding(
      padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),

      child: FlatButton(
      shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
      padding: EdgeInsets.fromLTRB(0.0, 20.0, 0.0, 20.0),  
       onPressed: (){

       },
       color: Colors.pink,
       child: Text("Register", style: TextStyle(color: Colors.white, fontSize: 18.0)),
      ),
    );

    final password = TextFormField(
      obscureText: true,
      style: TextStyle(color: Colors.white, fontSize: 17.0),
      decoration: InputDecoration(
        icon: Icon(Icons.lock_outline, size: 30.0, color: Colors.white),
        labelText: "PASSWORD",
        labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
        contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
        border: InputBorder.none,
      ),
    );
    final repassword = TextFormField(
      obscureText: true,
      style: TextStyle(color: Colors.white, fontSize: 17.0),
      decoration: InputDecoration(
        icon: Icon(Icons.lock_outline, size: 30.0, color: Colors.white),
        labelText: "RE-TYPE PASSWORD",
        labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
        contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
        border: InputBorder.none,
      ),
    );

    List<DropdownMenuItem<String>> genderNames = [];
    String selectedItem;
    void loadGenders(){
      genderNames = [];
      genderNames.add(new DropdownMenuItem(child: new Text("Male"), value: "male",));
      genderNames.add(new DropdownMenuItem(child: new Text("Female"), value: "female"));
    }
    loadGenders();

    final genderDropDown = Container(

        child : Row(
          children: <Widget>[
            Icon(Icons.wc, size: 30.0, color: Colors.white),
            SizedBox(width: 15.0),
            DropdownButtonHideUnderline(
              child: DropdownButton(
                value: selectedItem,
                items: genderNames, 
                hint: Text("SELECT GENDER"),
                iconSize: 40.0,
                onChanged: (value) {
                  selectedItem = value;
                  setState(() {
                  });

                },
              ),
            )

          ],
        )
    );


    final inputboarder = new Container(
        height: 1.0,
        margin: EdgeInsets.fromLTRB(0.0, 7.0, 0.0, 0.0),
        decoration: BoxDecoration(
          image: DecorationImage(
            image: new AssetImage("assets/transparentborder.png"),
          )
        ),     
    );

    final appbar = Stack(
      children: <Widget>[
        AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          title: Text("Create Account"),
        )
      ],
    );

    return Scaffold(


       body : Container( 
        decoration: new BoxDecoration(
          image: new DecorationImage(
            image: new AssetImage("assets/Social-free-psd.jpg"),
            fit: BoxFit.fill,
          ),
        ),
        child: NestedScrollView(

            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                new SliverAppBar(
                  backgroundColor: Colors.transparent,
                  elevation: 0.0,
                  pinned: true,
                  title: new Text('Flutter Demo'),
                ),
              ];
            },

            body: Column(
              children: <Widget>[

              Container( 
                padding: EdgeInsets.only(left: 40.0, right: 40.0),
                child: ListView(
                  shrinkWrap: true,
                  children: <Widget>[
                    SizedBox(height: 58.0),

                    fullname,
                    inputboarder,
                    SizedBox(height: 28.0),

                    username,
                    inputboarder,
                    SizedBox(height: 28.0),
                    password,
                    inputboarder,
                    SizedBox(height: 28.0),
                    repassword,
                    inputboarder,

                    SizedBox(height: 28.0),
                    mobilenumber,
                    inputboarder,

                    SizedBox(height: 28.0),
                    genderDropDown,
                    inputboarder,

                    SizedBox(height: 28.0),
                    registerButton
                  ],
            )

                ),


            ],

        ),
       )
      ),
    );
  }
}

不知道是哪里出了问题，刚接触flutter。但这看起来像是一个调试错误。我做对了吗？即使是这样，我该如何解决这个问题？

当我输入 "NestedScrollView" 滚动表单时，它开始出现。我猜 ListView 里面的 ListView 不提供默认的滚动行为。

任何建议都会有所帮助。

谢谢！

Answer 1

所以我对您的代码做了一些更改，以便我可以快速编译它并为您提供帮助。（如果你在这里复制粘贴我的代码，不要忘记根据你的需要修改你的资产）

首先，我根据需要将其设置为 StatlessWidget，但您可以将其保留为 StatefulWidget。

然后，我将您的 appBar 包含在 Scaffold 本身中。那么你的 Scaffold 的 child 应该是 Stack 这样你就可以堆叠所有不同的 TextFormField 并在屏幕上滚动。

您可能需要将 return new MaterialApp( home: 部分替换为 return new Scaffold。

代码如下：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {


final fullname = TextFormField(
  style: TextStyle(color: Colors.white, fontSize: 17.0),
  decoration: InputDecoration(
    icon: Icon(Icons.person_outline, size: 30.0, color: Colors.white),
    labelText: "FULL NAME",
    labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
    contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
    border: InputBorder.none,
  ),
);

final username = TextFormField(
  keyboardType: TextInputType.emailAddress,
  style: TextStyle(color: Colors.white, fontSize: 17.0),
  decoration: InputDecoration(
    icon: Icon(Icons.alternate_email, size: 30.0, color: Colors.white),
    labelText: "EMAIL ADDRESS",
    labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
    contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
    border: InputBorder.none,
  ),
);

final mobilenumber = TextFormField(
  keyboardType: TextInputType.number,
  style: TextStyle(color: Colors.white, fontSize: 17.0),
  decoration: InputDecoration(
    icon: Icon(Icons.phone_android, size: 30.0, color: Colors.white),
    labelText: "MOBILE NUMBER",
    labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
    contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
    border: InputBorder.none,
  ),
);

final registerButton = Padding(
  padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),

  child: FlatButton(
  shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
  padding: EdgeInsets.fromLTRB(0.0, 20.0, 0.0, 20.0),  
   onPressed: (){

   },
   color: Colors.pink,
   child: Text("Register", style: TextStyle(color: Colors.white, fontSize: 18.0)),
  ),
);

final password = TextFormField(
  obscureText: true,
  style: TextStyle(color: Colors.white, fontSize: 17.0),
  decoration: InputDecoration(
    icon: Icon(Icons.lock_outline, size: 30.0, color: Colors.white),
    labelText: "PASSWORD",
    labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
    contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
    border: InputBorder.none,
  ),
);

final repassword = TextFormField(
  obscureText: true,
  style: TextStyle(color: Colors.white, fontSize: 17.0),
  decoration: InputDecoration(
    icon: Icon(Icons.lock_outline, size: 30.0, color: Colors.white),
    labelText: "RE-TYPE PASSWORD",
    labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
    contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
    border: InputBorder.none,
  ),
);

List<DropdownMenuItem<String>> genderNames = [];
String selectedItem;
void loadGenders(){
  genderNames = [];
  genderNames.add(new DropdownMenuItem(child: new Text("Male"), value: "male",));
  genderNames.add(new DropdownMenuItem(child: new Text("Female"), value: "female"));
}
loadGenders();

final genderDropDown = Container(

    child : Row(
      children: <Widget>[
        Icon(Icons.wc, size: 30.0, color: Colors.white),
        SizedBox(width: 15.0),
        DropdownButtonHideUnderline(
          child: DropdownButton(
            value: selectedItem,
            items: genderNames, 
            hint: Text("SELECT GENDER"),
            iconSize: 40.0,
            onChanged: (value) {
              selectedItem = value;
              /*setState(() {
              });*/

            },
          ),
        )

      ],
    )
);


final inputboarder = new Container(
    height: 1.0,
    margin: EdgeInsets.fromLTRB(0.0, 7.0, 0.0, 0.0),
    decoration: BoxDecoration(
      image: DecorationImage(
        image: new AssetImage("assets/tmp/birds.jpg"),
      )
    ),     
);


return new MaterialApp(
  home:
 new Scaffold(
    appBar: new AppBar(
        title: new Text('Flutter Demo'),
        elevation: 0.0,
        backgroundColor: Colors.transparent, 
        //Something to pin the appbar
   ),
    body : Container( 
    decoration: new BoxDecoration(
      image: new DecorationImage(
        image: new AssetImage("assets/tmp/birds.jpg"),
        fit: BoxFit.fill,
      ),
    ),
    child:  new Stack(
          children: <Widget>[

          Container( 
            padding: EdgeInsets.only(left: 40.0, right: 40.0),
            child: ListView(
              shrinkWrap: true,
              children: <Widget>[
                SizedBox(height: 58.0),

                fullname,
                inputboarder,
                SizedBox(height: 28.0),

                username,
                inputboarder,
                SizedBox(height: 28.0),
                password,
                inputboarder,
                SizedBox(height: 28.0),
                repassword,
                inputboarder,

                SizedBox(height: 28.0),
                mobilenumber,
                inputboarder,

                SizedBox(height: 28.0),
                genderDropDown,
                inputboarder,

                SizedBox(height: 28.0),
                registerButton
              ],
        )

            ),


        ],
    ),
    ),
   )
  );
  }
}

希望对您有所帮助，

我有一个带有 Scroll a Form 的部分，但在 flutter 中滚动无法正常工作

I have a section with Scroll a Form but scroll not working properly in flutter

flutter

flutter-layout