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<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 ?? '點擊了屏幕取消'}');
  }
}

以上是“flutter如何實現底部抽屜效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！