我想让容器在列中隐藏溢出

Question

我有列，内部有3个小部件，HtmlWidget，Transform.Scale和HtmlWidget，在Transform.Scale里面，我有图像，这是代码，我想使图像从其顶部小部件和底部小部件溢出

SingleChildScrollView(
        physics: AlwaysScrollableScrollPhysics(),
        child: Column(
          children: <Widget>[
            // Container(
            //   child: HtmlWidget(
            //     """
            //             <div style="font-size: 14px; width: 100%;"><div><p>sdasdasdasdas</p><p><span style="font-size: 18px;">asdasdasdasdas</span></p><p style="margin-left:16px;" class="ql-indent-1"><strong>asdasdasdasdas</strong></p><p style="text-align:center;" class="ql-align-center"><span style="background-color: rgb(255, 194, 102);">asdasdasdasd</span></p><ol><li>sdddsaasdasdsadasdasdasdas</li><li>eqweqweqweqwe</li></ol><p><br></p><ul><li>xdasdsadsadasdas</li><li>zxcxzcxzcxzczxczxcz</li></ul></div></div>
            //           """,
            //   ),
            // ),
            Container(
              width: MediaQuery.of(context).size.width,
              color: Colors.white,
              child: HtmlWidget(
                """
                        <div style="font-size: 14px; width: 100%;"><div><p>sdasdasdasdas</p><p><span style="font-size: 18px;">asdasdasdasdas</span></p><p style="margin-left:16px;" class="ql-indent-1"><strong>asdasdasdasdas</strong></p><p style="text-align:center;" class="ql-align-center"><span style="background-color: rgb(255, 194, 102);">asdasdasdasd</span></p><ol><li>sdddsaasdasdsadasdasdasdas</li><li>eqweqweqweqwe</li></ol><p><br></p><ul><li>xdasdsadsadasdas</li><li>zxcxzcxzcxzczxczxcz</li></ul></div></div>
                      """,
              ),
            ),
            Container(
              color: Colors.red,
              width: MediaQuery.of(context).size.width,
              height: 100,
              child: Transform.scale(
                transformHitTests: true,
                scale: 3,
                child: Center(
                  child: Image(
                    image: AssetImage("lib/assets/images/example.jpeg"),
                  ),
                ),
              ),
            ),
            Container(
              width: MediaQuery.of(context).size.width,
              color: Colors.white,
              child: HtmlWidget(
                """
                        <div style="font-size: 14px; width: 100%;"><div><p>sdasdasdasdas</p><p><span style="font-size: 18px;">asdasdasdasdas</span></p><p style="margin-left:16px;" class="ql-indent-1"><strong>asdasdasdasdas</strong></p><p style="text-align:center;" class="ql-align-center"><span style="background-color: rgb(255, 194, 102);">asdasdasdasd</span></p><ol><li>sdddsaasdasdsadasdasdasdas</li><li>eqweqweqweqwe</li></ol><p><br></p><ul><li>xdasdsadsadasdas</li><li>zxcxzcxzcxzczxczxcz</li></ul></div></div>
                      """,
              ),
            ),
          ],
        ),
      )

更改代码后，顶部仍然相同

Answer 1

您可以使用这样的堆栈