我在“滚动表单”中有一个部分,但滚动无法在Flutter中正常工作

时间:2018-10-11 08:29:05

标签: flutter flutter-layout

我在底部显示此栏,显示“底部溢出27个像素。”

这是我的UI外观

enter image description here

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
                  ],
            )

                ),


            ],

        ),
       )
      ),
    );
  }
}

我不确定问题出在哪里,我是新手。但这看起来像是调试错误。我说对了吗?即使是那样,我该如何解决该问题?

当我放入“ NestedScrollView”来滚动表单时,它开始出现。我猜ListView内的ListView不提供默认的滚动行为。

任何建议都会有所帮助。

谢谢!

1 个答案:

答案 0 :(得分:0)

因此,我对您的代码进行了一些更改,以便我可以快速地对其进行编译并为您提供帮助。 (如果您在此处复制粘贴我的代码,请不要忘记根据需要修改资产)

首先,我将其设置为private List<int> GetNewLineLocations() { var list = new List<int>(); int ix = -1; for (int i = 0; i < this.Lines.Length; i++) { ix += Lines[i].Length; ix += 1; list.Add(ix); } return list; } ,但您可以将其保留为StatlessWidget

然后,我将您的StatefulWidget包含在appBar中。 然后,Scaffold中的child应该是Scaffold,这样您就可以堆叠所有不同的Stack并在屏幕上滚动。

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

这是代码:

return new Scaffold

希望这对您有帮助