Flutter：`Container`高度无法在`Stack`内部调整

Question

我也在尝试使用Flutter 中的Stack 来重叠登录屏幕中的元素。基本上，我在顶部有一个图像，然后在底部（重叠）一个带有徽标和登录字段、按钮等的 Container。

下面是我的代码

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: LoginUI(),
    );
  }
}

class LoginUI extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return LoginState();
  }
}

class LoginState extends State<LoginUI> {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: Stack(
      fit: StackFit.loose,
      children: <Widget>[
        SafeArea(
          child: Container(
            child: Image.asset("assets/images/login_image.png"),
          ),
        ),
        Positioned(
          top: 280,
          child: Container(
            width: MediaQuery.of(context).size.width,
            decoration: new BoxDecoration(
                  color: Colors.green,
                  borderRadius: new BorderRadius.only(
                      topLeft: const Radius.circular(40.0),
                      topRight: const Radius.circular(40.0))),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Row(mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Flexible(child: Container(child:Image.asset("assets/images/logot.png"),),)


                ],),

              ],
            ),
          ),
        ),

      ],
    )
        //child: Image.asset("assets/images/login_image.png"),
        );
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }
}

结果不如预期，见下文。

徽标已完成一半，Container 似乎卡在了它的高度。我尝试将高度作为设备高度添加到容器中，但实际上没有发生任何事情。

我什至尝试在这个容器的列中添加更多内容，但没有一个真正出现。

我需要这个容器来承受剩下的高度，所以我可以添加内容。

我该如何解决这个问题？

编辑

我想要的在下面。请注意顶部图像如何与底部容器重叠。

Answer 1

问题在于 Widget 构建 Container。为您的容器指定高度和宽度

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:flutter/widgets.dart';

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

class Login extends StatelessWidget {
  static const ROUTE = "/login";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: LoginUI(),
    );
  }
}

class LoginUI extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return LoginState();
  }
}

class LoginState extends State<LoginUI> {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: double.infinity,
        width: double.infinity,
        child: Stack(
          fit: StackFit.loose,
          children: <Widget>[
            SafeArea(
              child: Container(
                child: Image.asset("assets/no_image.png"),
              ),
            ),
            Positioned(
              top: 280,
              child: Container(
                height: 500,
                width: MediaQuery.of(context).size.width,
                decoration: new BoxDecoration(
                    color: Colors.green,
                    borderRadius: new BorderRadius.only(
                        topLeft: const Radius.circular(40.0),
                        topRight: const Radius.circular(40.0))),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Flexible(
                          child: Container(
                            child: Image.asset("assets/no_record.png"),
                          ),
                        )
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        )
        //child: Image.asset("assets/images/login_image.png"),
        );
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }
}

输出

Answer 2

试试这个

 Scaffold(
  body: Container(
       height: size.height,
      color: Colors.black,
      child: Stack(

        children: <Widget>[
          SafeArea(
            child: Container(
              child: Image.asset(AssetStrings.loginUpperTwoImage),
            ),
          ),
          Positioned(
            top: 280,
            child: Container(
              width: MediaQuery
                  .of(context)
                  .size
                  .width,
              height: size.height,

              decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius: new BorderRadius.only(
                      topLeft: const Radius.circular(40.0),
                      topRight: const Radius.circular(40.0))),

              child: Container(
                child: Column(
                  children: <Widget>[
                    Row(mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Flexible(child: Container(

                          child: Image.asset(AssetStrings.message,width: 100.0,height: 70.0,),),),


                      ],),


                    new SizedBox(
                      height: 5.0
                      ,),
                    getTextField("Email Address"),

                    SizedBox(
                        height: 5.0
                    ),


                    getTextField("Password"),


                    SizedBox(
                        height: 5.0
                    ),
                    new Container(
                      alignment: Alignment.centerRight,
                      child: new InkWell(

                        onTap: () {
                          // setStateCall();
                        },
                        child: new Padding(
                          padding: new EdgeInsets.only(right: 10.0,top: 5.0),
                          child: new Text("Forgot Password?",style: new TextStyle(fontWeight:FontWeight.bold,color:  AppColors.kRedColor),),
                        ),
                      ),
                    ),


                    new SizedBox(
                      height: 15.0,
                    )
                    ,

                    new Container(
                      width: 80.0,
                      height: 32.0,
                      decoration: new BoxDecoration(
                          borderRadius: new BorderRadius.circular(4.0),
                          color: Colors.lightBlueAccent.withOpacity(0.3),
                          border: new Border.all(
                              color: Colors.grey.withOpacity(0.2)
                          )
                      ),
                      padding: new EdgeInsets.all(2.0),
                      child: Container(

                        color:  AppColors.kAccentBlueButton,
                        alignment: Alignment.center,

                        child: new InkWell(

                          onTap: (){


                          },
                          child: new Text("LOG IN",style: new TextStyle(color: Colors.white,fontSize: 14.0,fontWeight: FontWeight.bold),textAlign: TextAlign.center,),


                        ),
                      ),
                    ),



                    SizedBox(
                        height: 20.0

                    ),



                  ],
                ),
              ),
            ),
          ),

        ],
      )
    //child: Image.asset("assets/images/login_image.png"),
  ),
);

获取文本字段小部件

  Widget getTextField(String labelText)
  {
return Container(
  margin:new EdgeInsets.only(left: 10.0,right: 10.0),
  child: new TextFormField(


      maxLines: 1,
      obscureText:false ,

      style: new TextStyle(fontWeight: FontWeight.bold,color: Colors.black),
      onFieldSubmitted: (value)
      {

      },
      decoration:  InputDecoration(

          hintText:labelText,
          hintStyle: new TextStyle(color: Colors.black.withOpacity(0.8),fontWeight: FontWeight.bold,fontSize: 14.0),

          enabledBorder: new UnderlineInputBorder(
              borderSide: new BorderSide(
                  color: AppColors.kAccentBlueButton.withOpacity(0.7),
                  width: 1.4

              )
          ),


          focusedBorder: new UnderlineInputBorder(
            borderSide: new BorderSide(
                color: AppColors.kAccentBlueButton,
                width: 1.4
            ),

          )
      )
  ),
);


}

Answer 3

定义width 和height 使其出现。