Flutter移动应用开发 -苹果(iOS)风格提示框
生活随笔
收集整理的這篇文章主要介紹了
Flutter移动应用开发 -苹果(iOS)风格提示框
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
目錄
- 0. 項目簡介
- 1. 效果展示
- 2. 代碼
0. 項目簡介
項目想法脫胎于2023年服務(wù)外包大賽A18題 隨手買(詳情)
整個APP思路如下:
這篇博客主要服務(wù)于圖片識別中心,在點擊按鈕后彈出 IOS 系統(tǒng)風(fēng)格的提示框
1. 效果展示
2. 代碼
依賴如下
dependencies:flutter:sdk: flutter# The following adds the Cupertino Icons font to your application.# Use with the CupertinoIcons class for iOS style icons.cupertino_icons: ^1.0.2dev_dependencies:flutter_test:sdk: flutter# The "flutter_lints" package below contains a set of recommended lints to# encourage good coding practices. The lint set provided by the package is# activated in the `analysis_options.yaml` file located at the root of your# package. See that file for information about deactivating specific lint# rules and activating additional ones.flutter_screenutil: ^3.1.0部分代碼
import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter/cupertino.dart';class passenger extends StatefulWidget {const passenger({Key? key}) : super(key: key);State<passenger> createState() => _passengerState(); }class _passengerState extends State<passenger> {Widget build(BuildContext context) {ScreenUtil.init(context, allowFontScaling: false);void _showActionSheet(BuildContext context) {showCupertinoModalPopup<void>(context: context,builder: (BuildContext context) => CupertinoActionSheet(title: const Text('請選擇'),// message: const Text('Message'),actions: <CupertinoActionSheetAction>[CupertinoActionSheetAction(isDefaultAction: true,onPressed: (){},child: const Text('打開相機'),),CupertinoActionSheetAction(onPressed: (){},child: const Text('打開本地相簿'),),CupertinoActionSheetAction(isDestructiveAction: true,onPressed: () {Navigator.pop(context);},child: const Text('取消'),),],),);}void showCupertinoAlertDialog() {showDialog(context: context,builder: (BuildContext context) {return CupertinoAlertDialog(title: Text("“Clark NB”想訪問您的相機"),content: Column(children: <Widget>[SizedBox(height: 10,),Align(child: Text("使用相機獲取照片用于識別商品"),alignment: Alignment(0, 0),),],),actions: <Widget>[CupertinoDialogAction(child: Text("不允許"),onPressed: () {Navigator.pop(context);},),CupertinoDialogAction(child: Text("好"),onPressed: () {Navigator.pop(context);_showActionSheet(context);},),],);});}// 點擊出現(xiàn)相機Widget buildPhoto = Center(child: SizedBox(width: double.maxFinite,child: IconButton(padding: EdgeInsets.zero,onPressed: showCupertinoAlertDialog,tooltip: 'Pick Image',icon: Icon(Icons.add_a_photo,size: 200,),),),);return Scaffold(body: Column(children: <Widget>[SizedBox(height: ScreenUtil().setHeight(240),),buildPhoto,SizedBox(height: ScreenUtil().setHeight(70),),Spacer(),],),);} }總結(jié)
以上是生活随笔為你收集整理的Flutter移动应用开发 -苹果(iOS)风格提示框的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Python爬虫-快手播放量
- 下一篇: 有哪些值得推荐的 Java 练手项目?(