flutter 底部弹窗 showModalBottomSheet 自定义样式和回调_flutter showmodalbottomsheet 隐藏

//data 需要传递的数据 context 上下文 需要显示的地方 调用：

_showBuyModalBottomSheet(
data,
context: context,
);

//_showBuyModalBottomSheet方法 实现有状态组件的showModalBottomSheet

_showBuyModalBottomSheet(Data data, {@required BuildContext context}) {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
color: Colors.white,
child: GestureDetector(
child: BottomModal(//弹窗样式
onCancel: () {//取消回调
Navigator.of(context).pop();//隐藏弹出框
print(“onCancle1111111”);//处理data或业务逻辑
},
onSure: () async {//确认回调
print(“onSure1111111”);//处理data或业务逻辑
},
),
),
);
});
}

//BottomModal 弹窗样式 可根据要求自行设置样式和回调方法数量 （或者点击事件过多，可以以集合方式传入）
class BottomModal extends StatefulWidget {
final Function onSure;
final Function onCancel;

const BottomModal({Key key, this.onSure, this.onCancel}) : super(key: key);

@override
State createState() {
return _BottomModalState(onSure: this.onSure, onCancel: this.onCancel);
}
}

class _BottomModalState extends State {
final Function onSure;
final Function onCancel;

_BottomModalState({this.onSure, this.onCancel});

@override
Widget build(BuildContext context) {
return Container(
height: 120,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
child: Container(
height: 50,
alignment: AlignmentDirectional.center,
child: Text(
“保存”,
style: TextStyle(fontSize: 18),
),
),
onTap: () {
onSure();
},
),
Container(
height: 10,
color: Colors.black,
),
InkWell(
child: Container(
height: 50,
alignment: AlignmentDirectional.center,
child: Text(
“取消”,
style: TextStyle(fontSize: 18),
),
),
onTap: () {
onCancel();
},
),
],
),
);
}
}