如何使用 SingleChildScrollView 使 Stack 布局可滚动？
[英]How to make Stack layout scroll-able using SingleChildScrollView?
问题描述
I am trying to make stack layout scrollable using SingleChildScrollView but it's not scrolling.
我正在尝试使用 SingleChildScrollView 使堆栈布局可滚动，但它没有滚动。 Is SingleChildScrollView should be used here?这里应该使用 SingleChildScrollView 吗？
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.此处提供更多文本以满足 StackOverflow 提出问题的要求。 Sorry about this.为此表示歉意。
Here's example code.这是示例代码。
@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,
),
),
),
],
),
),
),
],
),
),
),
);
},
),
),
),
),
);
}
5 个解决方案
解决方案1
16 2019-01-25 08:14:06
It depends on what size should the StackView have.这取决于 StackView 的大小。 For example you can make one of Stack's children not positioned.例如，您可以让 Stack 的其中一个子代未定位。 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),
)
],
),
)
解决方案2
6 2020-07-05 17:56:22
Stack will get the constraints of the biggest child. Stack 将得到最大子节点的约束。 But if you use Position the constraints of that child are not considered by stack.但是，如果您使用 Position ，则堆栈不会考虑该子项的约束。 If you want dynamic height and width for the stack use Margin inside a container instead of position.如果您想要堆栈的动态高度和宽度，请使用容器内的边距而不是位置。
To explain more in detail更详细地解释
SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
height: 500,
),
Positioned(
top: 100,
left: 100,
child: Container(color: Colors.red, height: 1000, width: 1000),
)
],
),
)
In the above case stack will only take 500 as height.在上述情况下，堆栈仅以 500 作为高度。 Your Container which has 1000 will not be considered.您的 Container 有 1000 个将不被考虑。
SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
height: 500,
),
Container(margin: EdgeInsets.only(top: 100, left: 100, color: Colors.red, height: 1000, width: 1000),
],
),
)
In the above case the height of the container will be used for defining the height of stack.在上述情况下，容器的高度将用于定义堆栈的高度。 This will also allow for SingleChildScrollView to be scrollable.这也将允许 SingleChildScrollView 可滚动。
解决方案3
1 2020-10-08 02:52:42
This is how you can do it这是你可以做到的
Positioned(
top: 20.0,
left: 20.0,
right: 0.0,
bottom: 0.0,
child: SizedBox(
//what ever code is)),
)
)
解决方案4
0 2022-06-13 17:32:34
Stack(
children: [
Container(
width: 100,
height: 100,
child: Material(
elevation: 8.0,
borderRadius: BorderRadius.circular(10),
child: Text("HELLO")),
),
//please use column and sized box instead of Positioned..
//Then SingleChildScrollView working
//inkwell ontap working perfect
Column(
children: [
SizedBox(height: 100),
Container(
width: 100,
height: 100,
color: Colors.white,
)
])
],
),**
解决方案5
-1 2021-08-26 23:56:06
The Stack takes the size of the widest height widget. Stack 采用最宽高度小部件的大小。 To fix the problem, you have to calculate the maximum size that your Stack will take.要解决此问题，您必须计算 Stack 将占用的最大大小。 You create an empty Container that has this size.您创建一个具有此大小的空 Container。 Next you will add the other widgets in the Stack.接下来，您将在 Stack 中添加其他小部件。
Exemple示例
SingleChildScrollView(
child: Column(
children: [
Stack(
children: [
Container(height: 200), // Max stack size
Container(
alignment: Alignment.topCenter,
height: 150,),
Positioned(
top: 110,
left: 30,
right: 30,
height: 80,
child: Material(
elevation: 8.0,
borderRadius: BorderRadius.circular(10),
child: Text("HELLO")
),
]),// Stack
Container(child: Text("After the stack")),
])// Column
),//SingleChildScrollView
解决方案6
-3 2021-09-13 04:16:21
You can put Expanded > SingleChildScrollView > Column你可以把 Expanded > SingleChildScrollView > Column
Expanded(
child: SingleChildScrollView(
child: Container(
color: Colors.red,
padding: EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
Text('Red container should be scrollable'),
Container(
width: double.infinity,
height: 700.0,
padding: EdgeInsets.all(10.0),
color: Colors.white.withOpacity(0.7),
child: Text('I will have a column here'),
)
],
),
),
),
),
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.