5

我正在尝试使用其中的图像和文本来实现gridview。我想要黑色背景图像底部的文本。这是我的代码ListItem

class ListItem extends StatelessWidget {
    String url;
    String name;

    ListItem(this.url, this.name);
    @override
    Widget build(BuildContext context) {

        return new Container(
            child: new Column(
            children: <Widget>[
                new Image.network('${url}', fit: BoxFit.cover),
                new Positioned(
                    child: new Container(
                         child: new Text('${name}',
                         style: new TextStyle(fontSize: 20.0, color: Colors.white)),
                    decoration: new BoxDecoration(color: Colors.black),
                    padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0)),
                left: 0.0,
                bottom: 108.0,
           )
        ],
     ));
    }
 }

使用此代码，它显示错误

Positioned widgets must be placed directly inside Stack widgets.
Positioned(no depth, dirty) has a Stack ancestor, but there are other widgets between them:
- Column(direction: vertical, mainAxisAlignment: start, crossAxisAlignment: center)
4

2 回答 2

7

问题在于Column，在从这里和那里更改了几行之后，我终于发现这是因为Column

一旦我更改Column为Stack，它工作正常。

return new Container(
        child: new Stack(
于 2018-05-23T10:12:19.713 回答
4

我们昨天刚刚讨论过这个。Positioned 实际上不仅可以用于堆栈，因此文档对此并不完全正确。它不能用于任何渲染，文档对 RenderObjectWidget 非常具体：

“定位小部件必须是堆栈的后代，并且从定位小部件到其封闭堆栈的路径必须仅包含无状态小部件或有状态小部件（而不是其他类型的小部件，如 RenderObjectWidgets）。

来源：https ://docs.flutter.io/flutter/widgets/Positioned-class.html

列来自 RenderObjectWidget： ... Widget > RenderObjectWidget > MultiChildRenderObjectWidget > Flex > Column

大多数刚开始使用 Flutter 的人只知道 StatelessWidget 和 StatefulWidget，但还有其他一些，了解它们有时非常重要。

小部件：
     StatefulWidget
     StatelessWidget
     RenderObjectWidget
     ProxyWidget
     PreferredSizeWidget

更多信息： https ://docs.flutter.io/flutter/widgets/Widget-class.html

于 2018-07-26T11:34:07.397 回答