flutter实现底部抽屉效果 flutter实现底部抽屉效果

本文实例为大家分享了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 {@overrideWidget 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 ?? '点击了屏幕取消'}'); }}

【flutter实现底部抽屉效果】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。