Flutter：`Container`的高度不能在`Stack`中调整

Question

我也尝试使用Stack中的Flutter覆盖登录屏幕中的元素。基本上，我在顶部有一个图像，然后在底部（重叠）是一个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

您在寻找这个吗？

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 Column(
      children: <Widget>[
        SafeArea(
          child: Container(
            child: Image.network(
              'https://picsum.photos/250?image=9',
            ),  //Replace with your Image (Image.asset)
          ),
        ),
        Expanded(
          child: Container(
            decoration: new BoxDecoration(
                color: Colors.green,
                borderRadius: new BorderRadius.only(
                    topLeft: const Radius.circular(40.0),
                    topRight: const Radius.circular(40.0))),
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Flexible(
                      child: Container(
                        child: Padding(
                          padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 30.0),
                          child: Image.network(
                            'http://via.placeholder.com/350x150',
                          ), //Replace with your Image (Image.asset)
                        ),
                      ),
                    )
                  ],
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

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