在 Flutter 中滚动背景容器

Question

我正在尝试构建可滚动屏幕，其中棕色背景容器必须随着元素列表滚动，而黑色容器靠近此容器。我该怎么做？我考虑过 Positioned，但我无法在 SliverAppbar 之上构建项目，即使我在不同的 Stack 中构建它也是如此。

我可以在 SliverAppbar 之上构建主体吗？或者我该如何实现？

return Scaffold(
  body: Stack(
    children: [
      Container(
        height: MediaQuery.of(context).size.height * 0.45,
        decoration: const BoxDecoration(
          color: AppColors.mainBrown,
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(30)),
        ),
      ),
      CustomScrollView(
        slivers: [
          const SliverAppBar(
            expandedHeight: 70,
            backgroundColor: Colors.transparent,
            elevation: 0,
            shadowColor: Colors.transparent,
            titleSpacing: 22,
            title: Text('AppBar'),
          ),
          SliverPadding(
            padding: const EdgeInsets.symmetric(horizontal: 30),
            sliver: SliverList(
              delegate: SliverChildListDelegate([
                Card(
                  child: Container(
                    color: Colors.brown,
                    height: 200,
                  ),
                ),
                Card(
                  child: Container(
                    color: Colors.yellow,
                    height: 250,
                  ),
                ),
                Card(
                  child: Container(
                    color: Colors.black,
                    height: 300,
                  ),
                ),
                Card(
                  child: Container(
                    color: Colors.red,
                    height: 50,
                  ),
                ),
                Card(
                  child: Container(
                    color: Colors.green,
                    height: 100,
                  ),
                ),
                Card(
                  child: Container(
                    color: Colors.blue,
                    height: 150,
                  ),
                ),
              ]),
            ),
          )
        ],
      ),
    ],
  ),
);

Answer 1

我的情况看起来像是解决方案，但我不确定，这是正确的方法

  late ScrollController _frontController, _backController;

  @override
  void initState() {
    super.initState();
    _frontController = ScrollController();
    _backController = ScrollController();
    _frontController.addListener(test);
  }

  @override
  void dispose() {
    _frontController.dispose();
    _backController.dispose();
    super.dispose();
  }

  test() {
    if (_frontController.position.pixels >= 215) {
      _backController.jumpTo(_frontController.offset - 215);
    }
  }

 return Scaffold(
      body: Stack(
        children: [
          SingleChildScrollView(
            controller: _backController,
            child: Column(
              children: [
                Container(
                  height: MediaQuery.of(context).size.height * 0.45,
                  decoration: const BoxDecoration(
                    color: AppColors.mainBrown,
                    borderRadius:
                        BorderRadius.vertical(bottom: Radius.circular(30)),
                  ),
                ),
                const SizedBox(
                  height: 1000,
                )
              ],
            ),
          ),
          CustomScrollView(
            controller: _frontController,
            slivers: [
              const SliverAppBar(
                expandedHeight: 70,
                backgroundColor: Colors.transparent,
                elevation: 0,
                shadowColor: Colors.transparent,
                titleSpacing: 22,
                title: Text('AppBar'),
              ),
              SliverPadding(
                padding: const EdgeInsets.symmetric(horizontal: 30),
                sliver: SliverList(
                  delegate: SliverChildListDelegate([
                    Card(
                      child: Container(
                        color: Colors.brown,
                        height: 200,
                      ),
                    ),
                    Card(
                      child: Container(
                        color: Colors.yellow,
                        height: 250,
                      ),
                    ),
                    Card(
                      child: Container(
                        color: Colors.black,
                        height: 300,
                      ),
                    ),
                    Card(
                      child: Container(
                        color: Colors.red,
                        height: 50,
                      ),
                    ),
                    Card(
                      child: Container(
                        color: Colors.green,
                        height: 100,
                      ),
                    ),
                    Card(
                      child: Container(
                        color: Colors.blue,
                        height: 150,
                      ),
                    ),
                  ]),
                ),
              )
            ],
          ),
        ],
      ),
    );

在 Flutter 中滚动背景容器

Scroll background container in Flutter

flutter

flutter-sliver