網站首頁 編程語言 正文
本文實例為大家分享了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{ ? @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 ?? '點擊了屏幕取消'}'); ? } }
原文鏈接:https://blog.csdn.net/qq_36926045/article/details/120196621
相關推薦
- 2022-07-16 Electron項目打包
- 2022-07-09 python?協程并發數控制_python
- 2022-11-04 react-router-dom?v6?使用詳細示例_React
- 2022-12-21 Flutter?runApp到渲染上屏分析詳解_Android
- 2022-12-11 centos離線安裝mongodb-database-tools方法詳解_MongoDB
- 2022-11-02 Kotlin中@JvmOverloads注解作用示例介紹_Android
- 2022-07-26 Docker部署Golang+Gin和Python+Tornado后端
- 2022-04-19 C語言內存管理及初始化細節示例詳解_C 語言
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支