是否可以在底页外启用点击？答案

【问题标题】：Is it possible to enable tap outside the bottomsheet?是否可以在底页外启用点击？
【发布时间】：2021-03-10 12:45:11
【问题描述】：

我也想让用户在底部表格之外进行操作。例如，在下图中，我希望用户点击 play 按钮。我现在不能这样做，因为底页的障碍挡住了点击播放按钮。

根据我的研究，底部工作表是全屏组件。它似乎是高度的一半屏幕是一个骗局。（通过使屏障颜色透明并添加高度限制）。

showModalBottomSheet(
      context: context,
      isDismissible: false,
      barrierColor: Colors.transparent,
      builder: (_) {
        return GestureDetector(
          behavior: HitTestBehavior.translucent,
          child: Container(
            constraints: BoxConstraints(maxHeight: height),
            color: Theme.of(context).cardColor,
            child: child.....
          ),
        );
      },
      isScrollControlled: true,
    );

【问题讨论】：

stackoverflow.com/a/57406821/6618622
@CopsOnRoad 不是他们要的。苏曼：在这种情况下你不应该使用底片。您可以在希望评论部分出现的位置使用堆栈。
我有这个作为备用计划：D
没错，它的一半是透明的，一半是你提供的widget，如果你需要解决它可能是这样的，把背景和你的bottomSheet widget放在一个堆栈中

标签： flutter flutter-layout bottom-sheet gesture-recognition flutter-showmodalbottomsheet

【解决方案1】：

我像底页一样解决了它，但使用了不同的方法。我希望我的问题是正确的。

import 'package:flutter/material.dart';
class BottomSheetOutside extends StatefulWidget {
  @override
  _BottomSheetOutsideState createState() => _BottomSheetOutsideState();
}

class _BottomSheetOutsideState extends State<BottomSheetOutside> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> offset;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
    offset = Tween<Offset>(begin: Offset(0.0, 1.0), end: Offset.zero).animate(_controller);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(flex: 4, child: buildTop),
          Expanded(flex: 6, child: buildBottom),
        ],
      ),
    );
  }

  Container get buildTop {
    return Container(
      width: double.infinity,
      color: Colors.red,
      child: IconButton(
        icon: Icon(Icons.play_circle_fill_rounded),
        onPressed: () {
          switch (_controller.status) {
            case AnimationStatus.dismissed:
              _controller.forward();
              break;
            case AnimationStatus.forward:
              break;
            case AnimationStatus.reverse:
              break;
            case AnimationStatus.completed:
              _controller.reverse();
              break;
          }
        },
      ),
    );
  }

  Stack get buildBottom {
    return Stack(children: [
      Container(color: Colors.blue),
      buildBottomSlide,
    ]);
  }

  Widget get buildBottomSlide {
    return SlideTransition(
      position: offset,
      child: Card(
        child: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) => ListTile(
            leading: Icon(Icons.comment),
            title: Text("Test $index"),
          ),
        ),
      ),
    );
  }
}

【讨论】：