我正在尝试使用SingleChildScrollView使堆栈布局可滚动,但它没有滚动。是否应在此处使用SingleChildScrollView?
我想我已经给了足够的描述,以使任何人都能理解我的问题。这里有更多文本可以满足StackOverflow提出问题的要求。为此事道歉。
这是示例代码。
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
child: Center(
child: LayoutBuilder(
builder:
(BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: viewportConstraints.maxHeight,
),
child: IntrinsicHeight(
child: Column(
children: <Widget>[
Container(
// A fixed-height child.
color: Colors.white,
height: 120.0,
),
Expanded(
// A flexible child that will grow to fit the viewport but
// still be at least as big as necessary to fit its contents.
child: Container(
color: Colors.blue,
//height: 120.0,
child: Stack(
children: <Widget>[
Positioned(
top: 0,
left: 0,
right: 0,
child: Container(
color: Colors.red[100],
child: SizedBox(
height: 300,
),
),
),
Positioned(
top: 50,
left: 0,
right: 0,
child: Container(
color: Colors.red[200],
child: SizedBox(
height: 300,
),
),
),
Positioned(
top: 100,
left: 0,
right: 0,
child: Container(
color: Colors.red[300],
child: SizedBox(
height: 300,
),
),
),
Positioned(
top: 150,
left: 0,
right: 0,
child: Container(
color: Colors.green[100],
child: SizedBox(
height: 300,
),
),
),
Positioned(
top: 200,
left: 0,
right: 0,
child: Container(
color: Colors.green[200],
child: SizedBox(
height: 300,
),
),
),
Positioned(
top: 250,
left: 0,
right: 0,
child: Container(
color: Colors.green[300],
child: SizedBox(
height: 300,
),
),
),
Positioned(
top: 300,
left: 0,
right: 0,
child: Container(
color: Colors.yellow[100],
child: SizedBox(
height: 300,
),
),
),
Positioned(
top: 350,
left: 0,
right: 0,
child: Container(
color: Colors.yellow[200],
child: SizedBox(
height: 300,
),
),
),
Positioned(
top: 400,
left: 0,
right: 0,
child: Container(
color: Colors.yellow[300],
child: SizedBox(
height: 300,
),
),
),
],
),
),
),
],
),
),
),
);
},
),
),
),
),
);
}
答案 0 :(得分:1)
这取决于StackView的大小。例如,您可以使Stack的子级之一不被放置。然后,该子项将影响整个堆栈视图的大小。
SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
height: 5000,
),
Positioned(
top: 100,
left: 100,
width: 1000,
height: 1000,
child: Container(color: Colors.red),
)
],
),
)
答案 1 :(得分:0)
堆栈将受到最大子级的约束。但是,如果使用“位置”,则堆栈不会考虑该子项的约束。如果要为堆栈动态设置高度和宽度,请在容器内使用“边距”代替位置。
详细解释
SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
height: 500,
),
Positioned(
top: 100,
left: 100,
child: Container(color: Colors.red, height: 1000, width: 1000),
)
],
),
)
在上述情况下,堆栈的高度仅为500。您拥有1000个的容器将不被考虑。
SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
height: 500,
),
Container(margin: EdgeInsets.only(top: 100, left: 100, color: Colors.red, height: 1000, width: 1000),
],
),
)
在上述情况下,容器的高度将用于定义堆栈的高度。这也将使SingleChildScrollView可以滚动。
答案 2 :(得分:0)
这是您可以做到的
Positioned(
top: 20.0,
left: 20.0,
right: 0.0,
bottom: 0.0,
child: SizedBox(
//what ever code is)),
)
)