Question

对不起我的英语，我是法国人。

我为用户的题字创建了一个页面，但问题是手机的尺寸很小。我有溢出的问题；我想要一个滚动页面，但使用窗口小部件SingleChildScrollView，我的窗口小部件的高度出现问题，无法正常工作。

  return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Colors.blue[900],
              Colors.blue[800],
              Colors.blue[400],
            ],
            begin: Alignment.topCenter
          )
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: 80,),
            Padding(
              padding: EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                FadeAnimation(1.3, Text(
                  "New user",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 40,
                  ),
                ),
                ),
                FadeAnimation(1, Text(
                  "Welcome to OCiné",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                  ),
                ))
                ],
              )
            ),
            SizedBox(height: 15,),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(topLeft: Radius.circular(60), topRight: Radius.circular(60))
                ),
                child: Padding(
                  padding: EdgeInsets.all(30),
                  child: Column(
                    children: <Widget>[
                      SizedBox(height: 20,),
                      FadeAnimation(1.4, Container(
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10),
                          boxShadow: [BoxShadow(
                            color: Color.fromRGBO(33, 150, 243, .3),
                            blurRadius: 20,
                            offset: Offset(0, 10),
                          )],
                        ),
                        child: Column(
                          children: <Widget>[
                            Container(
                              padding: EdgeInsets.all(10),
                              decoration: BoxDecoration(
                                border: Border(bottom: BorderSide(color: Colors.grey[300]))
                              ),
                              child: TextField(
                                //controller: _emailController,
                                decoration: InputDecoration(
                                  hintText: "Enter firstname",
                                  hintStyle: TextStyle(
                                    color: Colors.grey
                                  ),
                                  border: InputBorder.none
                                ),
                              ),
                            ),
                            Container(
                              padding: EdgeInsets.all(10),
                              decoration: BoxDecoration(
                                border: Border(bottom: BorderSide(color: Colors.grey[300]))
                              ),
                              child: TextField(
                                //controller: _emailController,
                                decoration: InputDecoration(
                                  hintText: "Enter lastname",
                                  hintStyle: TextStyle(
                                    color: Colors.grey
                                  ),
                                  border: InputBorder.none
                                ),
                              ),
                            ),
                            Container(
                              padding: EdgeInsets.all(10),
                              decoration: BoxDecoration(
                                border: Border(bottom: BorderSide(color: Colors.grey[300]))
                              ),
                              child: TextField(
                                //controller: _emailController,
                                decoration: InputDecoration(
                                  hintText: "Enter email",
                                  hintStyle: TextStyle(
                                    color: Colors.grey
                                  ),
                                  border: InputBorder.none
                                ),
                              ),
                            ),
                            Container(
                              padding: EdgeInsets.all(10),
                              decoration: BoxDecoration(
                                border: Border(bottom: BorderSide(color: Colors.grey[300]))
                              ),
                              child: TextField(
                                obscureText: true,
                                //controller: _passwordController,
                                decoration: InputDecoration(
                                  hintText: "Enter password",
                                  hintStyle: TextStyle(
                                    color: Colors.grey
                                  ),
                                  border: InputBorder.none
                                ),
                              ),
                            ),
                            Container(
                              padding: EdgeInsets.all(10),
                              decoration: BoxDecoration(
                                border: Border(bottom: BorderSide(color: Colors.grey[300]))
                              ),
                              child: TextField(
                                maxLength: 20,
                                //controller: _passwordController,
                                decoration: InputDecoration(
                                  hintText: "Enter username",
                                  hintStyle: TextStyle(
                                    color: Colors.grey
                                  ),
                                  border: InputBorder.none
                                ),
                              ),
                            ),
                          ],
                        ),
                      )),
                      SizedBox(height: 20,),
                      FadeAnimation(1.5, InkWell(
                        onTap: (){
                          Navigator.push(context, MaterialPageRoute(
                            builder: (context){
                              return LoginPage();
                            }
                          ));
                        },
                        child: Text("Already an account ?", style: TextStyle(color: Colors.grey)),
                      )),
                      SizedBox(height: 20,),
                      FadeAnimation(1.6, InkWell(
                        onTap: () async{
                          //AuthProvider().createUser();
                        },
                        child: Container(
                        height: 50,
                        margin: EdgeInsets.symmetric(horizontal: 50),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(50),
                          color: Colors.blue[900],
                        ),
                        child: Center(
                          child: Text("Create User", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold))
                        ),
                      ),
                      )),
                    ],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

如果有任何解决方案。我接受了，谢谢

Answer 1

您这里有3列，您不能包装第一个列，因为这会引起高度问题，因为您的SingleChildScrollView的大小为无穷大，有一个孩子（该列）的大小也为无限但是，您可以做的是用SingleChildScrollView包装第三列（最深的列），该列包含文本字段，并且应该使容器上的内容可滚动。

当您需要使用SingleChildScrollView包裹一列并导致高度错误时，您可以使用IntrinsicHeight小部件来包裹导致无限高度的Column

Answer 2

您不能在Expanded内使用SingleChildScrollView，因此，如果要在具有{{1 }}小部件，您可以使用Expanded小部件。您可以在列中使用SingleChildScrollView，只要您的列不会收缩空间即可，因为列本身会自动换行。 Expanded是问题所在。

颤振问题溢出

2 个答案: