Flutter bottom sheet 列表视图滚动问题答案

【问题标题】：Flutter bottom sheet list view scroll problemFlutter bottom sheet 列表视图滚动问题
【发布时间】：2022-12-08 21:10:04
【问题描述】：

我在 Flutter 中有一个简单的底部工作表，但我遇到了一个问题。

showModalBottomSheet(
  context: context,
  enableDrag: false,
  isDismissible: false,
  backgroundColor: Colors.transparent,
  shape: RoundedRectangleBorder(
   borderRadius: BorderRadius.only(
    topLeft: Radius.circular(16),
    topRight: Radius.circular(16)),
   ),
  builder: (childContext) {
   return ClipRRect(
    borderRadius: BorderRadius.only(
     topLeft: Radius.circular(16),
     topRight: Radius.circular(16)
    ),
    child: Container(
     color: Colors.green,
     height: _minHeight,
     child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
       HeaderWidget(
        title: header,
       ),
       Expanded(
        child: ListView.separated(
         ...
        ),
       ),
       ],
      ),
     ),
    );
  },
);

当用户在底部工作表内滚动列表视图时，由于左上角和右上角的边缘是弯曲的，因此可以在滚动时看到列表视图。您可以查看屏幕截图。

关于如何解决此问题的任何帮助？

【问题讨论】：

尝试将clipBehavior: Clip.hardEdge,添加到ClipRRect
@blaffie 没用
好的，尝试将clipBehavior: Clip.hardEdge 作为参数传递给showModalBottomSheet
是的，成功了。谢谢

标签： flutter dart bottom-sheet

【解决方案1】：

您可以将clipBehavior: Clip.hardEdge添加到showModalBottomSheet

showModalBottomSheet(
  context: context,
  enableDrag: false,
  isDismissible: false,
  clipBehavior: Clip.hardEdge,
  backgroundColor: Colors.transparent,
  shape: RoundedRectangleBorder(
   borderRadius: BorderRadius.only(
    topLeft: Radius.circular(16),
    topRight: Radius.circular(16)),
   ),
  builder: (childContext) {
   return ClipRRect(
    borderRadius: BorderRadius.only(
     topLeft: Radius.circular(16),
     topRight: Radius.circular(16)
    ),
    child: Container(
     color: Colors.green,
     height: _minHeight,
     child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
       HeaderWidget(
        title: header,
       ),
       Expanded(
        child: ListView.separated(
         ...
        ),
       ),
       ],
      ),
     ),
    );
  },
);

【讨论】：