如何使用SingleChildScrollView使Stack布局可滚动? [英] How to make Stack layout scroll-able using SingleChildScrollView?
问题描述
我正在尝试使用SingleChildScrollView使堆栈布局可滚动，但它没有滚动.是否应在此处使用SingleChildScrollView?
I am trying to make stack layout scrollable using SingleChildScrollView but it's not scrolling. Is SingleChildScrollView should be used here?
我想我已经给了足够的描述，以使任何人都能理解我的问题.这里有更多文本可以满足StackOverflow提出问题的要求.为此表示歉意.
I think I have given enough description to make anyone understand my question. More text here to satisfy StackOverflow's requirement to ask a question. Sorry about this.
这是示例代码.
@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,
),
),
),
],
),
),
),
],
),
),
),
);
},
),
),
),
),
);
}
推荐答案
这取决于StackView的大小.例如，您可以使Stack的子级之一不被放置.然后，该子项将影响整个堆栈视图的大小.
It depends on what size should the StackView have. For example you can make one of Stack's children not positioned. This child will then affect the size of entire stack view.
SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
height: 5000,
),
Positioned(
top: 100,
left: 100,
width: 1000,
height: 1000,
child: Container(color: Colors.red),
)
],
),
)
这篇关于如何使用SingleChildScrollView使Stack布局可滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
