android - Flutter: `Container` 高度无法在 `Stack` 内部调整

Question

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

下面是我的代码

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();
  }
}

输出