所以我有这个结构
正如您从图像中看到的,我有一个堆栈,其中有两个孩子 Container
& SignalCardLabel
。在容器中我设置了高度,但现在我想让它更动态。现在,这是我的脚本
Container(
height: 117,
padding: EdgeInsets.all(10),
margin: EdgeInsets.only(left: 16, right: 16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(8),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: //Expanded ),
我尝试删除高度,但它抛出了这个
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
然后我试图用扩展包装它,但仍然显示相同的结果。以防万一你需要我的完整脚本
这是我的SignalCardLabel
class SignalCardLabel extends StatelessWidget {
Color chipColor;
String signalActionType;
SignalCardLabel({this.chipColor, this.signalActionType});
@override
Widget build(BuildContext context) {
return Positioned(
right: 0,
top: 0,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: chipColor,
borderRadius: BorderRadius.only(
topLeft: Radius.zero,
topRight: Radius.circular(8.0),
bottomLeft: Radius.circular(30.0),
bottomRight: Radius.zero,
),
),
margin: EdgeInsets.only(left: 16, right: 16),
child: Padding(
padding: EdgeInsets.only(left: 20, top: 2, bottom: 2, right: 9),
child: Text(
signalActionType,
style: TextStyle(color: Colors.white),
),
),
),
);
}
}
答案 0 :(得分:1)
用 Container
包裹您的 Positioned.fill
。它创建一个 Positioned 对象,左、上、右和下设置为 0.0,除非传递了它们的值。
您不能在那里使用 Expanded
,它必须仅放置在 Column、Row 或 Flex 小部件内。
示例:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stack example',
home: Scaffold(
appBar: AppBar(
title: Text('Stack example'),
),
body: SingleChildScrollView(
child: Column(
children: [
Stack(
children: [
Positioned.fill(
child: Container(
color: Colors.cyan,
),
),
ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 60,
itemBuilder: (context, index) => Text('Item # $index'),
),
],
),
],
),
)),
);
}
}
UPD:
使用 Stack 时,您不能相对于其大小或堆栈自身的大小来定位子项
删除那里的 Positioned
。除非您将在 Stack 中拥有第三个孩子,否则您正在尝试做的事情将如下所示:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stack example',
home: Scaffold(
appBar: AppBar(
title: Text('Stack example'),
),
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Stack(
children: [
Positioned.fill(
child: Container(
color: Colors.cyan,
),
),
Container(
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.red,
borderRadius: BorderRadius.only(
topLeft: Radius.zero,
topRight: Radius.circular(8.0),
bottomLeft: Radius.circular(30.0),
bottomRight: Radius.zero,
),
),
margin: EdgeInsets.only(left: 16, right: 16),
child: Padding(
padding: EdgeInsets.only(
left: 20, top: 2, bottom: 2, right: 9),
child: Text(
'This is an example',
style: TextStyle(color: Colors.white),
),
),
)
],
),
],
),
)),
);
}
}