Flutter：customScrollView 内可滚动内容的动态高度（具有粘性行为）

Question

我想达到这个结果，但我无法理解它......

我发现“修复”标题（顶部）和按钮（底部）的唯一方法是分别使用 SliverPinnedHeader （需要 CustomScrollView 小部件的用户）和 StickySideWidget.bottom。

当我在列小部件内时，我需要使用扩展小部件，它可以在列表足够长时使滚动起作用，但即使我只有几个项目，它也会占据全屏高度......我会喜欢找到一种方法来删除扩展而不破坏一切

这是一个简化的代码：

import 'package:flutter/material.dart';
import 'package:shared/widgets/commons/safe_area.dart';
import 'package:sliver_tools/sliver_tools.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: ElevatedButton(
                child: Text('Demo'),
                onPressed: () => showModalBottomSheet(
                      backgroundColor: Colors.white,
                      isScrollControlled: true,
                      context: context,
                      builder: (context) => DemoContent(),
                    ))));
  }
}

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

  @override
  Widget build(BuildContext context) {
    final items = List.filled(20, '');

    final bottomSheetClosingLine = Padding(
      padding: const EdgeInsets.only(bottom: 32),
      child: Center(child: Container(color: Colors.grey, height: 4, width: 64)),
    );

    final header = Container(
        padding: const EdgeInsets.all(24),
        color: Colors.blue,
        child: Text('Header'));

    final itemWidget = Padding(
        padding: const EdgeInsets.symmetric(vertical: 16), child: Text('item'));

    final button = Container(
      padding: EdgeInsets.only(top: 24),
      width: double.infinity,
      child: ElevatedButton(onPressed: () {}, child: Text('Save')),
    );

    return SafeArea(
        child: Container(
            constraints: BoxConstraints(
                maxHeight: MediaQuery.of(context).size.height * 0.80),
            padding: EdgeInsets.all(24),
            width: double.infinity,
            child: Column(mainAxisSize: MainAxisSize.min, children: [
              bottomSheetClosingLine,
              Expanded(
                  child: StickySideWidget.bottom( /// Custom widget
                body: CustomScrollView(slivers: [
                  SliverPinnedHeader(child: header),
                  SliverToBoxAdapter(
                      child: Column(
                    children: items.map((item) => itemWidget).toList(),
                  ))
                ]),
                side: button,
              ))
            ])));
  }
}

编辑：我也想尽可能避免添加不必要的库...

Answer 1

尝试使用这个小部件 draggableScrollableSheet

Answer 2

嘿你找到解决办法了吗？ ：D