如何使用 SingleChildScrollView 使 Stack 布局可滚动？

Question

我正在尝试使用 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,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        ),
      ),
    );
  } 

Answer 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),
      )
    ],
  ),
)

Answer 2

Stack 将得到最大子节点的约束。 但是，如果您使用 Position ，则堆栈不会考虑该子项的约束。 如果您想要堆栈的动态高度和宽度，请使用容器内的边距而不是位置。

更详细地解释

    SingleChildScrollView(
  child: Stack(
    children: <Widget>[
      Container(
        height: 500,
      ),
      Positioned(
        top: 100,
        left: 100,
        child: Container(color: Colors.red, height: 1000, width: 1000),
      )
    ],
  ),
)

在上述情况下，堆栈仅以 500 作为高度。 您的 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),
    ],
  ),
)

在上述情况下，容器的高度将用于定义堆栈的高度。 这也将允许 SingleChildScrollView 可滚动。

Answer 3

这是你可以做到的

  Positioned(
        top: 20.0,
        left: 20.0,
        right: 0.0,
        bottom: 0.0,
        child: SizedBox(
          //what ever code is)),
        )
    )

Answer 4

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,
                )
              ])
            ],
          ),**

Answer 5

Stack 采用最宽高度小部件的大小。 要解决此问题，您必须计算 Stack 将占用的最大大小。 您创建一个具有此大小的空 Container。 接下来，您将在 Stack 中添加其他小部件。

示例

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

 

Answer 6

你可以把 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'),
            )
          ],
        ),
      ),
    ),
  ),