是否可以在 bottomsheet 之外启用点击?
Is it possible to enable tap outside the bottomsheet?
我还想让用户在底部之外进行操作sheet。例如在下图中,我希望用户点击 play 按钮。我现在不能这样做,因为底部的屏障sheet 阻止了点击播放按钮。
- 根据我的研究,底部 sheet 是一个全屏组件。看起来半屏的高度是骗人的。 (通过使屏障颜色透明并添加高度限制)。
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,
);
我像底部一样解决了它 sheet 但是用了不同的方法。
希望我答对了。
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"),
),
),
),
);
}
}
我还想让用户在底部之外进行操作sheet。例如在下图中,我希望用户点击 play 按钮。我现在不能这样做,因为底部的屏障sheet 阻止了点击播放按钮。
- 根据我的研究,底部 sheet 是一个全屏组件。看起来半屏的高度是骗人的。 (通过使屏障颜色透明并添加高度限制)。
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,
);
我像底部一样解决了它 sheet 但是用了不同的方法。 希望我答对了。
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"),
),
),
),
);
}
}