Позиционированные виджеты должны быть размещены непосредственно внутри виджетов стека

Я пытаюсь реализовать 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)

2 ответа

Проблема была с Column, изменив несколько строк здесь и там, я, наконец, обнаружил, что это было из-за Column

Как только я изменюсь Column в Stackработает нормально.

return new Container(
        child: new Stack(

Мы только что обсуждали это вчера. Позиционирование может быть использовано не только в стеке, поэтому документы не совсем верны. Он не может быть использован ни для чего, и документы очень специфичны для RenderObjectWidget:

"Позиционированный виджет должен быть потомком стека, а путь от позиционированного виджета к его вмещающему стеку должен содержать только StatelessWidgets или StatefulWidgets (не виджеты других типов, такие как RenderObjectWidgets).

Источник: https://docs.flutter.io/flutter/widgets/Positioned-class.html

Столбец происходит от RenderObjectWidget: ... Widget > RenderObjectWidget > MultiChildRenderObjectWidget > Flex > Column

Большинство людей, начинающих во Флаттере, знают только о StatelessWidget и StatefulWidget, но есть и другие, и знать их иногда очень важно.

Widget:
StatefulWidget
StatelessWidget
RenderObjectWidget
ProxyWidget
PreferredSizeWidget

Больше по адресу: https://docs.flutter.io/flutter/widgets/Widget-class.html

Другие вопросы по тегам