如何使用 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屋！
