flutter實(shí)現(xiàn)底部抽屜效果
本文實(shí)例為大家分享了flutter實(shí)現(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("相冊(cè)"),
? ? ? ? ? ? ? ? onTap: () {
? ? ? ? ? ? ? ? ? Navigator.of(context).pop('相冊(cè)');
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ),
? ? ? ? ? ? ],
? ? ? ? ? );
? ? ? ? });
? ? print('選擇了安卓==>>${_result ?? '點(diǎn)擊了屏幕取消'}');
? }
? _showCupertinoModalPopup() async {
? ? var result = await showCupertinoModalPopup(
? ? ? ? context: context,
? ? ? ? builder: (context) {
? ? ? ? ? return CupertinoActionSheet(
? ? ? ? ? ? title: Text('提示'),
? ? ? ? ? ? message: Text('是否要編輯當(dāng)前項(xià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)擊了屏幕取消'}');
? }
}以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android開(kāi)發(fā)Flutter?桌面應(yīng)用窗口化實(shí)戰(zhàn)示例
這篇文章主要為大家介紹了Android開(kāi)發(fā)Flutter?桌面應(yīng)用窗口化實(shí)戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
MVVM和MVVMLight框架介紹及在項(xiàng)目中的使用詳解
這篇文章主要為大家介紹了MVVM和MVVMLight的介紹及在項(xiàng)目中的使用詳解有需要的朋友可以借鑒參考下,祝大家除夕快樂(lè)多多進(jìn)步2022-01-01
Kotlin?Navigation可視化開(kāi)發(fā)詳解
Navigation?是?JetPack?中的一個(gè)組件,用于方便的實(shí)現(xiàn)頁(yè)面的導(dǎo)航,所以抽象出了一個(gè)?destination?的概念,大部分情況一個(gè)?destination?就表示一個(gè)?Fragment,但是它同樣可以指代?Activity、其它的導(dǎo)航圖2023-02-02
android開(kāi)發(fā)基礎(chǔ)教程—文件存儲(chǔ)功能實(shí)現(xiàn)
文件存儲(chǔ)功能在實(shí)現(xiàn)數(shù)據(jù)讀寫(xiě)時(shí)會(huì)頻繁使用到,接下來(lái)介紹文件存儲(chǔ)功能的實(shí)現(xiàn),感興趣的朋友可以了解下2013-01-01
android中g(shù)zip數(shù)據(jù)壓縮與網(wǎng)絡(luò)框架解壓縮
這篇文章主要為大家介紹了android中g(shù)zip數(shù)據(jù)壓縮與網(wǎng)絡(luò)框架解壓縮實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
android自定義imageview實(shí)現(xiàn)圓角圖片
這篇文章主要為大家詳細(xì)介紹了android自定義imageview實(shí)現(xiàn)圓角圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02

