不知道如何重叠两个小部件并避免“底部溢出199个像素”

Question

我目前正在构建一个应用，但有一个我无法解决的问题。我希望蓝色图片与SizedBox（ListView：_buildTodoList（））重叠。这样做时，我尝试了一个堆栈，但是最大的问题是，底部图片太高，这就是为什么出现RenderFlex溢出错误的原因。有人知道如何减少多余的像素吗？

这是我的构建代码：

      body: new Column(
          children: <Widget>[
            new Stack(
              overflow: Overflow.clip,
              alignment: Alignment.topCenter,
              children: <Widget>[
                new Container(
                  child: SizedBox(
                    // expand if wanted unlimited in height and width
                    height: 400, // fixed length
                    child: _buildTodoList(),
                  ),
                ),
                new Container(
                    padding: EdgeInsets.only(top: 370),
                    child: Image.asset("assets/images/fancybluebottom.png"))
              ],
            )
          ])

Answer 1

我会考虑裁剪图像以使其适合。您可以使用BoxDecoration和DecorationImage。然后，您可以使用alignment和fit属性设置图像的裁剪方式。如果您不想指定容器的高度，则可以使用AspectRatio。

这里是带有以下代码的dartpad，因此您可以试用它。我试图模仿您已经拥有的东西，然后在上面放一张裁剪的猫图片：https://dartpad.dev/545c8b6ad6d1f6c5aa1c9cc5759fbc08

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Image Crop"),
      ),
      body: Stack(
        overflow: Overflow.clip,
        alignment: Alignment.topCenter,
        children: <Widget>[
          Container(
            child: SizedBox(
              height: 400, // <-- Why do you need this?
              child: _buildTodoList(),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: new AspectRatio(
              aspectRatio: 400 / 200,
              child: new Container(
                decoration: new BoxDecoration(
                    image: new DecorationImage(
                  fit: BoxFit.fitWidth,
                  alignment: FractionalOffset.topCenter,
                  image: new NetworkImage('http://placekitten.com/200/300'),
                )),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

_buildTodoList() {
  return ListView(children: [...getTiles()]);
}

getTiles() {
  var listArray = [];
  for (var i = 0; i < 20; i++) {
    listArray.add(
      ListTile(
        leading: FlutterLogo(size: 72.0),
        title: Text('ABCDEF'),
        subtitle: Text('Author: Shakespeare \nGenre: Drama'),
        trailing: Icon(Icons.more_vert),
        isThreeLine: true,
      ),
    );
  }
  return listArray;
}

还...您确定是图像溢出吗？由于我们看不到_buildToDoList的结果，因此溢出也可能来自那里。这特别说明问题，因为黄色和黑色条纹区域的大小几乎与您的ListTiles之一相同。如果您返回的是ListTiles的列而不是ListView，则可能会发生这种情况，但是很难从您发布的代码中看出来。溢出错误本身显示什么？

我还将考虑摆脱硬编码的SizedBox高度。除非它在您的设计中起作用，否则似乎会限制设计的响应速度。 （为了进行测试，请在dartpad中调整屏幕大小。）

Answer 2

最简单的解决方法是在Positioned中使用Stack小部件。

将图像包装在与屏幕底部对齐的Positioned小部件内。这样，您的图像将从支架的底部开始渲染。唯一的问题是，您必须手动指定图像的高度才能获得所需的结果。您可以根据设备屏幕高度和ListView父级（SizedBox小部件）的高度来计算此高度。

这里是示例代码。

Stack(
        overflow: Overflow.clip,
        alignment: Alignment.topCenter,
        children: <Widget>[
          Positioned(
              bottom: 0,
              child: Container(
                  child: Image.network(
                      "https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg",
                      height: 270,
                      fit: BoxFit.cover,
                      width: 1000))),

          new Container(
            child: SizedBox(
              // expand if wanted unlimited in height and width
              height: 500, // fixed length
              child: ListView.builder(
                  itemCount: 20,
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                        margin: EdgeInsets.all(5),
                        height: 100,
                        color: Colors.green);
                  }),
            ),
          ),

        ],
      )

这里是工作飞镖link