如何制作可重复使用的模态底板

Question

通常我会对每个视图使用showModalBottomSheet来调用一个内容相同的ModalBotomSheet。我只想让它变得简单，因为我可以调用可重用的模态底部表类。

_moreModalBottomSheet(context) {
Size size = MediaQuery.of(context).size;
showModalBottomSheet(
isScrollControlled: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40.0),
),
context: context,
builder: (BuildContext bc) {
return Container(
height: size.height * 0.5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(40.0),
topLeft: Radius.circular(40.0),
),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
child: ListView(
physics: ClampingScrollPhysics(),
children: [
//content of modal bottomsheet
],
),
),
);
});
}

例如，我使用按钮来显示模式底部页面

ElevatedButton(onPressed: _moreModalBottomSheet(context), child: Text('show modal bottom sheet'))

我想把_moreModalBottomSheet((作为一个类，这样它就可以重用了。

在这个答案上，它只是一个可重用的a布局。但是，我试图实现的是制作一个自定义类ModalBottomSheet。所以我可以在其他类中调用ModalBottomSheet，只调用ModalBottomSheet((，而不显示返回ModalBotomSheet的ModalBottomSheet。有可能吗？

Answer 1

您只需要将其提取到一个新类中，如：

class ModalBottomSheet {
static void _moreModalBottomSheet(context) {
Size size = MediaQuery.of(context).size;
showModalBottomSheet(
isScrollControlled: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40.0),
),
context: context,
builder: (BuildContext bc) {
return Container(
height: size.height * 0.5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(40.0),
topLeft: Radius.circular(40.0),
),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
child: ListView(
physics: ClampingScrollPhysics(),
children: [
//content of modal bottomsheet
],
),
),
);
});
}
}

现在你可以在任何地方称之为：

class Test extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: ElevatedButton(
onPressed: () =>
ModalBottomSheet._moreModalBottomSheet(context),
child: Text('open modal'),
),
),
),
);
}
}

Answer 2

像这个一样打开底部页

InkWell(
onTap: () {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) {
return ModalBottomSheet(

);
});
})

有状态的底部页

class ModalBottomSheet extends StatefulWidget {

@override
_ModalBottomSheetState createState() => _ModalBottomSheetState();
}
class _ModalBottomSheetState extends State<ModalBottomSheet>
with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
double keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
// TODO: implement build
return Wrap(
children: <Widget>[
Container(
margin:
EdgeInsets.only(left: 10.0, right: 10.0, top: 15.0, bottom: 15.0),
child: Column( 
children: <Widget>[
Widgets(),

]
)
)
],
);
}
}