温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

flutter如何实现底部抽屉效果

发布时间:2022-03-23 14:05:11 阅读:375 作者:小新 栏目:开发技术
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

小编给大家分享一下flutter如何实现底部抽屉效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

具体内容如下

安卓:showModalBottomSheet
IOS:showCupertinoModalPopup

效果图

flutter如何实现底部抽屉效果

完整代码

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(
      appBarAppBar(
        titleText('底部抽屉弹出'),
      ),
      bodyCenter(
        childColumn(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  _showModalBottomSheet();
                },
                childText('安卓弹出')),
            ElevatedButton(
                onPressed: () {
                  _showCupertinoModalPopup();
                },
                childText('IOS弹出')),
          ],
        ),
      ),
    );
  }

  _showModalBottomSheet() async {
    var _result = await showModalBottomSheet(
        context: context,
        backgroundColor: Colors.greenAccent, //背景颜色
        // elevation500, //阴影
        shapeRoundedRectangleBorder(
            // borderRadius: BorderRadius.all(Radius.circular(10)),//所有圆角边框
            borderRadius:
                BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10))),
        isScrollControlledfalse, //是否是全屏还是半屏,true全屏,默认false半屏
        isDismissibletrue, //外部是否可以点击,false不可以点击,true可以点击,点击后消失
        builder: (BuildContext context) {
          return Column(
            mainAxisSize: MainAxisSize.min, // 设置最小的弹出
            children: [
              ListTile(
                leadingIcon(Icons.photo_camera),
                titleText("拍照"),
                onTap: () {
                  Navigator.of(context).pop('拍照');
                },
              ),
              ListTile(
                leadingIcon(Icons.photo_library),
                titleText("相册"),
                onTap: () {
                  Navigator.of(context).pop('相册');
                },
              ),
            ],
          );
        });
    print('选择了安卓==>>${_result ?? '点击了屏幕取消'}');
  }

  _showCupertinoModalPopup() async {
    var result = await showCupertinoModalPopup(
        context: context,
        builder: (context) {
          return CupertinoActionSheet(
            titleText('提示'),
            messageText('是否要编辑当前项?'),
            actions: [
              CupertinoActionSheetAction(
                childText('编辑'),
                onPressed: () {
                  Navigator.of(context).pop('编辑');
                },
                isDefaultActiontrue,
              ),
              CupertinoActionSheetAction(
                childText('删除'),
                onPressed: () {
                  Navigator.of(context).pop('删除');
                },
                isDestructiveAction: true,
              ),
            ],
            cancelButton: CupertinoActionSheetAction(
              childText('取消'),
              onPressed: () {
                Navigator.of(context).pop('取消');
              },
            ),
          );
        });
    print('选择了IOS==>>${result ?? '点击了屏幕取消'}');
  }
}

以上是“flutter如何实现底部抽屉效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×