如何在颤振中获得以下堆叠布局可滚动

Question

我正在尝试实现以下布局：

我的身体小部件如下：

body: SingleScrollChildView (
  child:    Stack(
               clipBehavior: Clip.none,
               children: [
                 _parallaxHeader(context, product),
                   Positioned(
                     top: MediaQuery.of(context).size.height /
                                                2.1,
                      child: Container(
                             width: MediaQuery.of(context)
                                                .size
                                                .width,
                                          
                            decoration: BoxDecoration(
                                              color: Theme.of(context)
                                                  .backgroundColor,
                                              borderRadius: BorderRadius.only(
                                                  topRight:
                                                      Radius.circular(20.0),
                                                  topLeft:
                                                      Radius.circular(20.0)),),
                           child: Wrap(
                               children: [
                                MiddlePadWidget()
                               ....
])

),
)

我希望整个小部件可滚动，因为定位的小部件有更多内容要显示。我似乎无法理解这一点。

那么如何在确保整个小部件可滚动的同时实现这种布局？

Answer 1

结果

演示：

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

class StackHoleBody extends StatelessWidget {
  const StackHoleBody({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) =>
            // SizedBox(
            //   height: constraints.maxHeight,
            //   child:
            // Stack(
            //   children: [
            //     ///background image
            //     Image.asset(
            //       "assets/ocen.jpg",
            //       height: constraints.maxHeight * .5,
            //       fit: BoxFit.cover,
            //     ),
            SingleChildScrollView(
          child: Column(
            children: [
              //  _parallaxHeader(context, product),

              Container(
                height: kToolbarHeight,
                color: Colors.cyanAccent,
                width: constraints.maxWidth,
                child: Text("header"),
              ),

              ///spaces for backgroudn image to show
              Container(
                height: constraints.maxHeight * .4,
                width: constraints.maxWidth,
                color: Colors.transparent,
                child: CarouselSlider(
                  options: CarouselOptions(height: 400.0),
                  items: [1, 2, 3, 4, 5].map((i) {
                    return Builder(
                      builder: (BuildContext context) {
                        return Container(
                            width: MediaQuery.of(context).size.width,
                            margin: EdgeInsets.symmetric(horizontal: 5.0),
                            decoration: BoxDecoration(color: Colors.amber),
                            child: Text(
                              'text $i',
                              style: TextStyle(fontSize: 16.0),
                            ));
                      },
                    );
                  }).toList(),
                ),
              ),

              Container(
                Container(
                transform: Matrix4.translationValues(0, -12, 0), ///change y value to moveUpDown
                width: constraints.maxWidth,
                width: constraints.maxWidth,
                alignment: Alignment.center,
                padding: EdgeInsets.only(top: 20),
                decoration: BoxDecoration(
                  color: Theme.of(context).backgroundColor,
                  borderRadius: BorderRadius.only(
                      topRight: Radius.circular(20.0),
                      topLeft: Radius.circular(20.0)),
                ),
                child: Wrap(
                  children: [
                    ...List.generate(
                        12,
                        (index) => Container(
                              height: 50,
                              width: constraints.maxWidth * .9,
                              color: index % 2 == 0
                                  ? Colors.greenAccent
                                  : Colors.pinkAccent,
                              child: Text("item $index"),
                            )).toList(),
                    //   MiddlePadWidget()
                    //  ....
                  ],
                ),
              ),
            ],
          ),
        ),
        //   ],
        // ),
        // ),
      ),
    );
  }
}