英文:
Why are my Positioned widgets not showing up outside Stack?
问题
我正在尝试在我的scaffold中使用Stack()，但是当蓝色的container结束时，Stack小部件之外的其余Positioned小部件不可见。中间的一个也不可见（只有一半可见），如下所示：
如何让这些小部件在我的应用程序中渲染？这是我的代码：
Scaffold(
body: Stack(
children: [
Container(
height: 450,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment(-0.00, -1.00),
end: Alignment(0, 1),
colors: [Color(0xFF03A4EC), Color(0xFF0467C5)],
),
),
child: Stack(
children: [
Positioned(),
Positioned(),
Positioned(),
Positioned(
left: 20,
top: 378,
child: Container(
height: 171,
width: 350,
padding: const EdgeInsets.all(20),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: const Color(0xFFFDFDFD),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
shadows: const [
BoxShadow(
color: Color(0x26000000),
blurRadius: 20,
offset: Offset(0, -1),
spreadRadius: -7,
)
],
),
child: Column(),
),
),
],
),
),
Positioned(
left: 20,
top: 684,
child: Container(
width: 335,
height: 298,
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: Color(0xFFFDFDFD),
shape: RoundedRectangleBorder(
side: BorderSide(width: 0.50, color: Color(0xFFEFEFEF)),
borderRadius: BorderRadius.circular(12),
),
),
child: Container(),
),
),
],
),
);
英文:
I'm trying to use Stack() in my scaffold but when the blue container ends, the rest of the Positioned widgets (out of the Stack widget) are not visible. Neither is the one in the middle (which is half visible) Like so,
How can I get these widgets to render in my app? Here's my code:
Scaffold(
body: Stack(
children: [
Container(
height: 450,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment(-0.00, -1.00),
end: Alignment(0, 1),
colors: [Color(0xFF03A4EC), Color(0xFF0467C5)],
),
),
child: Stack(
children: [
Positioned(),
Positioned(),
Positioned(),
Positioned(
left: 20,
top: 378,
child: Container(
height: 171,
width: 350,
padding: const EdgeInsets.all(20),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: const Color(0xFFFDFDFD),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
shadows: const [
BoxShadow(
color: Color(0x26000000),
blurRadius: 20,
offset: Offset(0, -1),
spreadRadius: -7,
)
],
),
child: Column(),
),
),
],
),
],
Positioned(
left: 20,
top: 684,
child: Container(
width: 335,
height: 298,
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: Color(0xFFFDFDFD),
shape: RoundedRectangleBorder(
side: BorderSide(width: 0.50, color: Color(0xFFEFEFEF)),
borderRadius: BorderRadius.circular(12),
),
),
child:Container(),
),
),
),
);
答案1
得分: 0
默认的clipBehavior是
this.clipBehavior = Clip.hardEdge,
你可以使用Clip.none,来使小部件在Stack区域外可见。
Stack(
clipBehavior: Clip.none,
)
英文:
The default clipBehavior of the stack is
this.clipBehavior = Clip.hardEdge,
You can use Clip.none, to make widgets visible outside the Stack area.
Stack(
clipBehavior: Clip.none,
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论