Question

我正在开发新应用。在创建登录页面时，我遇到了一些问题。我的代码可以正常工作到一个点，在该点或线之后，它将停止构建更多的小部件。

我的代码（工作部分）：

void main() => runApp(
  MaterialApp(
    debugShowCheckedModeBanner:false,
    home: Background1(),
  ),
);


class Background1 extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold( //Whole screen
          body: Container(
              padding: EdgeInsets.all(20),
              width: double.infinity,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  colors: [
                    Colors.purple.shade700,
                    Colors.purple.shade500,
                    Colors.purple.shade300,
                  ],
                ),
              ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                SizedBox (height: 80),
                Padding(
                  padding: EdgeInsets.all(20),
                  child: Column(
                    children: <Widget>[
                      Text("LOGIN", style: TextStyle(color: Colors.white,fontSize: 40,fontWeight: FontWeight.bold)),
                    ],
                  ),
                ),
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20),bottomLeft: Radius.circular(20),bottomRight: Radius.circular(20)),
                      color: Colors.transparent,
                    ),
                    child: Padding(
                      padding: EdgeInsets.all(20),
                      child: Column(
                        children: <Widget>[
                          SizedBox(
                            height: 20,
                          ),
                          Container(
                            padding: EdgeInsets.all(10),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(20),
                              boxShadow: [BoxShadow(
                                color: Color.fromRGBO(225, 95, 27, 0.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[200])),
                                  ),
                                  child: TextField(
                                    decoration: InputDecoration(
                                      hintText: "Email or phone number",
                                      hintStyle: TextStyle(color: Colors.grey),
                                      border: InputBorder.none,
                                    ),
                                  ),
                                ),
                                SizedBox(height: 10),
                                Container(
                                  padding: EdgeInsets.all(10),
                                  decoration: BoxDecoration(
                                    border: Border(bottom: BorderSide(color: Colors.grey[200])),
                                  ),
                                  child: TextField(
                                    decoration: InputDecoration(
                                      hintText: "Password",
                                      hintStyle: TextStyle(color: Colors.grey),
                                      border: InputBorder.none,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          SizedBox(height: 40),
                          Text("Forgot Password?", style: TextStyle(color: Colors.white)),
                          SizedBox(height: 40),
                          Container(
                            height: 40,
                            margin: EdgeInsets.symmetric(horizontal: 50),
                            padding: EdgeInsets.all(20),
                            decoration: BoxDecoration(
                              color: Colors.purple.shade800,
                              borderRadius: BorderRadius.circular(20)),
                            child: Center(
                              child: Text("LOGIN", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
                            ),
                          ),
],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
      ),
    );
  }
}

无法创建位于代码末尾的center（）和Text（）小部件。

child: Text("LOGIN", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
                            ),
                          ),

当我进一步写时，它也不会构建小部件。我已附上一张图像，显示我的模拟器在紫色按钮上未以白色显示LOGIN的情况。 enter image description here

Answer 1

只需除去容器的填充物，它将正常工作。

删除容器填充后的

代码：

void main() => runApp(
      MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Background1(),
      ),
    );

class Background1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        //Whole screen
        body: Container(
          padding: EdgeInsets.all(20),
          width: double.infinity,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              colors: [
                Colors.purple.shade700,
                Colors.purple.shade500,
                Colors.purple.shade300,
              ],
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              SizedBox(height: 80),
              Padding(
                padding: EdgeInsets.all(20),
                child: Column(
                  children: <Widget>[
                    Text("LOGIN",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 40,
                            fontWeight: FontWeight.bold)),
                  ],
                ),
              ),
              Expanded(
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(20),
                        topRight: Radius.circular(20),
                        bottomLeft: Radius.circular(20),
                        bottomRight: Radius.circular(20)),
                    color: Colors.transparent,
                  ),
                  child: Padding(
                    padding: EdgeInsets.all(20),
                    child: Column(
                      children: <Widget>[
                        SizedBox(
                          height: 20,
                        ),
                        Container(
                          padding: EdgeInsets.all(10),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(20),
                            boxShadow: [
                              BoxShadow(
                                color: Color.fromRGBO(225, 95, 27, 0.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[200])),
                                ),
                                child: TextField(
                                  decoration: InputDecoration(
                                    hintText: "Email or phone number",
                                    hintStyle: TextStyle(color: Colors.grey),
                                    border: InputBorder.none,
                                  ),
                                ),
                              ),
                              SizedBox(height: 10),
                              Container(
                                padding: EdgeInsets.all(10),
                                decoration: BoxDecoration(
                                  border: Border(
                                      bottom:
                                          BorderSide(color: Colors.grey[200])),
                                ),
                                child: TextField(
                                  decoration: InputDecoration(
                                    hintText: "Password",
                                    hintStyle: TextStyle(color: Colors.grey),
                                    border: InputBorder.none,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(height: 40),
                        Text("Forgot Password?",
                            style: TextStyle(color: Colors.white)),
                        SizedBox(height: 40),
                        Container(
                          height: 40,
                          margin: EdgeInsets.symmetric(horizontal: 50),
                          decoration: BoxDecoration(
                              color: Colors.purple.shade800,
                              borderRadius: BorderRadius.circular(20)),
                          child: Center(
                            child: Text("LOGIN",
                                style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold)),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

您可能正在使用屏幕上的所有空间，而不是使用带有列表视图的列，这将允许您滚动。另外，Listview.builder允许您动态构建列表视图的子级。检出https://api.flutter.dev/flutter/widgets/ListView-class.html以获得有关listview类的信息

无法构建center（）和text（）小部件

2 个答案: