flutter實現(xiàn)底部抽屜效果
本文實例為大家分享了flutter實現(xiàn)底部抽屜效果的具體代碼,供大家參考,具體內(nèi)容如下
安卓:showModalBottomSheet
IOS:showCupertinoModalPopup
效果圖
完整代碼
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; ///@作者: Q.L ///@創(chuàng)建日期: 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全屏,默認(rèn)false半屏 ? ? ? ? isDismissible: true, //外部是否可以點(diǎn)擊,false不可以點(diǎn)擊,true可以點(diǎn)擊,點(diǎn)擊后消失 ? ? ? ? builder: (BuildContext context) { ? ? ? ? ? return Column( ? ? ? ? ? ? mainAxisSize: MainAxisSize.min, // 設(shè)置最小的彈出 ? ? ? ? ? ? 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 ?? '點(diǎn)擊了屏幕取消'}'); ? } ? _showCupertinoModalPopup() async { ? ? var result = await showCupertinoModalPopup( ? ? ? ? context: context, ? ? ? ? builder: (context) { ? ? ? ? ? return CupertinoActionSheet( ? ? ? ? ? ? title: Text('提示'), ? ? ? ? ? ? message: Text('是否要編輯當(dāng)前項?'), ? ? ? ? ? ? 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 ?? '點(diǎn)擊了屏幕取消'}'); ? } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android開發(fā)Flutter?桌面應(yīng)用窗口化實戰(zhàn)示例
這篇文章主要為大家介紹了Android開發(fā)Flutter?桌面應(yīng)用窗口化實戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09android開發(fā)基礎(chǔ)教程—文件存儲功能實現(xiàn)
文件存儲功能在實現(xiàn)數(shù)據(jù)讀寫時會頻繁使用到,接下來介紹文件存儲功能的實現(xiàn),感興趣的朋友可以了解下2013-01-01android中g(shù)zip數(shù)據(jù)壓縮與網(wǎng)絡(luò)框架解壓縮
這篇文章主要為大家介紹了android中g(shù)zip數(shù)據(jù)壓縮與網(wǎng)絡(luò)框架解壓縮實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11android自定義imageview實現(xiàn)圓角圖片
這篇文章主要為大家詳細(xì)介紹了android自定義imageview實現(xiàn)圓角圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-02-02