android - 如何修复布局？

Question

我有这段代码:

@override
  Widget build(BuildContext context) {
    return new Stack(
      children: <Widget>[
        // The containers in the background
        new Column(
          children: <Widget>[
            new Container(
              height: MediaQuery.of(context).size.height * .65,
              color: const Color.fromRGBO(132, 162, 175, 1.0),
              child: new Column(
                children: [
                  new Image.asset('assets/app_logo_transparent_bg.png',
                  height: 100.0,
                  width: 100.0,
                  fit: BoxFit.fill,
                  ),
                ],
              ),
            ),
            new Container(
              height: MediaQuery.of(context).size.height * .35,
              color: Colors.white,
            )
          ],
        ),
        new Container(
          alignment: Alignment.topCenter,
          padding: new EdgeInsets.only(
              top: MediaQuery.of(context).size.height * .58,
              right: 20.0,
              left: 20.0),
          child: new Container(
            height: 200.0,
            width: MediaQuery.of(context).size.width,
            child: new Card(
              color: Colors.white,
              elevation: 4.0,
            ),
          ),
        )
      ],
    );
  }  

结果是这样的:
https://www.dropbox.com/s/bxsormtht173t9d/Screenshot_20181103-204135.png?dl=0

但我努力做到这一点:
https://www.dropbox.com/s/pgqlcuw28r19jfi/Screenshot_20181103-204559.png?dl=0

那么如何去除这个奇怪的黑框呢？

Answer 1

您需要拉伸(stretch)您的 Column ，将 CrossAxisAlignment.stretch 参数用于 Column 的 crossAxisAlignment 字段>.

         @override
          Widget build(BuildContext context) {
            return new Stack(
              children: <Widget>[
                // The containers in the background
                new Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    new Container(

                    ...