flutter - 是否可以在底页外启用点击？

Question

我想让用户也可以在底部表之外采取行动。例如，在下图中，我希望用户点击播放按钮。我现在不能这样做，因为底页的障碍阻止了点击播放按钮。

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

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,
    );

Answer 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"),
          ),
        ),
      ),
    );
  }
}