Modal BottomSheet scrollControlled 不适用于列表答案

【问题标题】：Modal BottomSheet scrollControlled doesn't work for a listModal BottomSheet scrollControlled 不适用于列表
【发布时间】：2021-06-12 08:38:18
【问题描述】：

当内部列表向上滚动时，我需要关闭底部工作表。底部表仅包含一个列表。根据文档，showModalBottomSheet 中的参数isScrollControlled 是我需要的。函数的documentation。

isScrollControlled 参数指定这是否是将使用 DraggableScrollableSheet 的底部工作表的路由。如果您希望底部工作表具有可滚动的子项（例如 ListView 或 GridView）并且底部工作表可拖动，则应将此参数设置为 true。

我的代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: ModalBottomSheetSample(),
    );
  }
}

class ModalBottomSheetSample extends StatelessWidget {

  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          showModalBottomSheet<void>(
            context: context,
            isScrollControlled: true,
            enableDrag: true,
            isDismissible: true,
            builder: (BuildContext context) {
              return Container(
                height: 248,
                child: ListView.builder(itemBuilder: (context, index) {
                  return ListTile(title: Text("i'm tile ${index}"));
                }),
              );},
          );},
      ),
    );
  }
}

Modal BottomSheet 已打开，但是当我向上滚动列表时，它不会影响工作表，也不会向下拖动。

为什么它不起作用，我怎样才能使它起作用？

【问题讨论】：

标签： flutter flutter-listview

【解决方案1】：

“isDismissable”似乎与“SingleChildScrollView”不兼容

material guidelines for full screen bottom sheets 建议我们在底部工作表的顶部包含一个标题（类似于脚手架中的应用栏），并带有一个用于关闭工作表的前导图标。

flutter 文档还建议您在这种情况下使用CloseButton。

【讨论】：

【解决方案2】：

试试这个：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  isDismissible: true,
  builder: (context) {
    return DraggableScrollableSheet(
      expand: false,
      maxChildSize: 0.9,
      minChildSize: 0.5,
      initialChildSize: 0.5,
      builder: (BuildContext context,
          ScrollController scrollController) {
        return Container(
          color: Colors.white,
          child: ListView.builder(
            controller: scrollController,
            // itemCount: 25,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(title: Text('Item $index'));
            },
          ),
        );
      },
    );
  },
);

【讨论】：