dart - 图片背景底部溢出

Question

我不知道如何使这个背景的大小适合屏幕的其余部分。谁能指出我哪里出了问题？？

我有点想让它适合其余屏幕，但做不到...

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new GradientAppBar('Milkyway Galaxy'),
        new Container(
          child: new Stack(
            children: <Widget>[
              _buildBackground(),
              _buildDescription(),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildBackground() {
    return new Container(
//      constraints: new BoxConstraints.expand(),
      child: new Image.asset('assets/images/milkyway.gif', fit: BoxFit.cover,),
    );
  }

  Widget _buildDescription() {
    return new Container(
      child: new Center(
        child: new Text(milkyWayGalaxy.description),
      ),
    );
  }
}

Answer 1

使用 BoxDecoration 将您的图像应用为 Container 的背景图像。使用 Expanded 小部件确保 Container 填充屏幕的剩余空间:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new GradientAppBar('Milkyway Galaxy'),
        new Expanded(
          child: new Container(
            decoration: new BoxDecoration(
              image: new DecorationImage(
                image: new AssetImage('assets/images/milkyway.gif'),
                fit: BoxFit.cover,
              ),
            ),
            child: new Center(
              child: new Text(milkyWayGalaxy.description),
            ),
          ),
        ),
      ],
    );
  }
}

如果文本较长，您可能希望将其包装在 SingleChildScrollView 中。