本文实例为大家分享了flutter实现底部抽屉效果的具体代码，供大家参考，具体内容如下
安卓：showModalBottomSheetIOS：showCuper
本文实例为大家分享了flutter实现底部抽屉效果的具体代码，供大家参考，具体内容如下
安卓：showModalBottomSheet
IOS：showCupertinoModalPopup
效果图
完整代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
///@作者: Q.L
///@创建日期: 2021-09-09 10:55
///@描述: {底部抽屉}
class ActionSheetPage extends StatefulWidget {
const ActionSheetPage({Key? key}) : super(key: key);
@override
_ActionSheetPageState createState() => _ActionSheetPageState();
}
class _ActionSheetPageState extends State<ActionSheetPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('底部抽屉弹出'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
_showModalBottomSheet();
},
child: Text('安卓弹出')),
ElevatedButton(
onPressed: () {
_showCupertinoModalPopup();
},
child: Text('IOS弹出')),
],
),
),
);
}
_showModalBottomSheet() async {
var _result = await showModalBottomSheet(
context: context,
backgroundColor: Colors.greenAccent, //背景颜色
// elevation: 500, //阴影
shape: RoundedRectangleBorder(
// borderRadius: BorderRadius.all(Radius.circular(10)),//所有圆角边框
borderRadius:
BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10))),
isScrollControlled: false, //是否是全屏还是半屏，true全屏，默认false半屏
isDismissible: true, //外部是否可以点击，false不可以点击，true可以点击，点击后消失
builder: (BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min, // 设置最小的弹出
children: [
ListTile(
leading: Icon(Icons.photo_camera),
title: Text("拍照"),
onTap: () {
Navigator.of(context).pop('拍照');
},
),
ListTile(
leading: Icon(Icons.photo_library),
title: Text("相册"),
onTap: () {
Navigator.of(context).pop('相册');
},
),
],
);
});
print('选择了安卓==>>${_result ?? '点击了屏幕取消'}');
}
_showCupertinoModalPopup() async {
var result = await showCupertinoModalPopup(
context: context,
builder: (context) {
return CupertinoActionSheet(
title: Text('提示'),
message: Text('是否要编辑当前项？'),
actions: [
CupertinoActionSheetAction(
child: Text('编辑'),
onPressed: () {
Navigator.of(context).pop('编辑');
},
isDefaultAction: true,
),
CupertinoActionSheetAction(
child: Text('删除'),
onPressed: () {
Navigator.of(context).pop('删除');
},
isDestructiveAction: true,
),
],
cancelButton: CupertinoActionSheetAction(
child: Text('取消'),
onPressed: () {
Navigator.of(context).pop('取消');
},
),
);
});
print('选择了IOS==>>${result ?? '点击了屏幕取消'}');
}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好代码网。
