定位的小部件必须直接放置在 Stack 小部件内
Positioned widgets must be placed directly inside Stack widgets
我正在尝试实现其中包含图像和文本的 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)
问题出在 Column
,从这里那里更改了几行后,我终于发现这是因为 Column
一旦我将 Column
更改为 Stack
,它就可以正常工作了。
return new Container(
child: new Stack(
我们昨天刚讨论过这个。 Positioned 实际上不仅仅可以用于 Stack,因此文档对此并不完全正确。它不能用于呈现的任何内容,并且文档对 RenderObjectWidget 非常具体:
“Positioned 小部件必须是 Stack 的后代,并且从 Positioned 小部件到其封闭 Stack 的路径必须仅包含 StatelessWidgets 或 StatefulWidgets(不能包含其他类型的小部件,如 RenderObjectWidgets)。
来源:https://docs.flutter.io/flutter/widgets/Positioned-class.html
列派生自 RenderObjectWidget:
... 小部件 > RenderObjectWidget > MultiChildRenderObjectWidget > Flex > Column
大多数刚接触 Flutter 的人只知道 StatelessWidget 和 StatefulWidget,但还有其他一些,了解它们有时非常重要。
小部件:
StatefulWidget
StatelessWidget
RenderObjectWidget
ProxyWidget
PreferredSizeWidget
更多信息:
https://docs.flutter.io/flutter/widgets/Widget-class.html
我正在尝试实现其中包含图像和文本的 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)
问题出在 Column
,从这里那里更改了几行后,我终于发现这是因为 Column
一旦我将 Column
更改为 Stack
,它就可以正常工作了。
return new Container(
child: new Stack(
我们昨天刚讨论过这个。 Positioned 实际上不仅仅可以用于 Stack,因此文档对此并不完全正确。它不能用于呈现的任何内容,并且文档对 RenderObjectWidget 非常具体:
“Positioned 小部件必须是 Stack 的后代,并且从 Positioned 小部件到其封闭 Stack 的路径必须仅包含 StatelessWidgets 或 StatefulWidgets(不能包含其他类型的小部件,如 RenderObjectWidgets)。
来源:https://docs.flutter.io/flutter/widgets/Positioned-class.html
列派生自 RenderObjectWidget: ... 小部件 > RenderObjectWidget > MultiChildRenderObjectWidget > Flex > Column
大多数刚接触 Flutter 的人只知道 StatelessWidget 和 StatefulWidget,但还有其他一些,了解它们有时非常重要。
小部件:
StatefulWidget
StatelessWidget
RenderObjectWidget
ProxyWidget
PreferredSizeWidget
更多信息: https://docs.flutter.io/flutter/widgets/Widget-class.html