文章目錄

• 一、浮動按鈕及點擊事件
• 二、底部顯示按鈕組件
• 三、手勢檢測器組件
• 四、image_picker 完整代碼示例
• 五、相關資源

一、浮動按鈕及點擊事件

---

一般使用 Scaffold 組件作為界面的根布局組件 , Scaffold 組件的 floatingActionButton 屬性即可設置浮動按鈕 , FloatingActionButton 組件 ;

// 根組件 Scaffold(// 設置標題組件appBar: ,// 設置頁面主體元素組件 body: ,// 創建浮動按鈕 FloatingActionButton 組件 , 并設置給 floatingActionButton 字段 ; floatingActionButton: FloatingActionButton(), )

浮動按鈕點擊事件 : 浮動按鈕點擊事件就是 FloatingActionButton 組件的 onPressed 屬性值 , 設置一個 VoidCallback? 類型的值 ,

FloatingActionButton(// 浮動按鈕點擊事件 onPressed: () {} )

VoidCallback 就是參數和返回值都是空的函數 ; onPressed: () {} 括號中的參數為空 , 返回值也為空 ;

/// Signature of callbacks that have no arguments and return no data. typedef VoidCallback = void Function();

二、底部顯示按鈕組件

---

調用 showModalBottomSheet 方法 , 即可彈出底部按鈕組件 , 該組件由開發者定義 , 可以是任何組件 , 如 Column ;

這里在底部顯示的是一個 Container 組件 , Container 組件內部包含了一個 Column 組件 ;

/// 浮動按鈕點擊事件 /// 點擊浮動按鈕 , 彈出一個菜單 /// 菜單有兩個按鈕 , 分別是 拍照 / 選擇圖片 showModalBottomSheet(context: context,builder: (context) {return Container(// 設置該彈出的組件高度 200 像素height: 200,child: Column(children: <Widget>[// 拍照按鈕GestureDetector(),// 相冊按鈕GestureDetector(),],),);});

showModalBottomSheet 方法傳入兩個必要的參數 , BuildContext context 是上下文對象 , WidgetBuilder builder 是顯示的底部布局組件 ;

Future<T?> showModalBottomSheet<T>({required BuildContext context,required WidgetBuilder builder,Color? backgroundColor,double? elevation,ShapeBorder? shape,Clip? clipBehavior,Color? barrierColor,bool isScrollControlled = false,bool useRootNavigator = false,bool isDismissible = true,bool enableDrag = true,RouteSettings? routeSettings,AnimationController? transitionAnimationController, })

三、手勢檢測器組件

---

這里按鈕點擊使用 GestureDetector 組件 , 監聽器 onTap 方法 , 用戶點擊時 , 調用 getImageFromCamera 方法 ;

GestureDetector(child: ListTile(// 相機圖標leading: Icon(Icons.camera_alt),title: Text("拍照"),/// 按鈕點擊事件onTap: (){// 調用 getImage 方法 , 調出相機拍照getImageFromCamera();},), ),

四、image_picker 完整代碼示例

---

代碼示例 :

import 'dart:io';import 'package:flutter/material.dart'; import 'package:image_picker/image_picker.dart';void main() {runApp(MyApp()); }class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: '拍照示例'),);} }class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> {/// 需要導入 dart:io 庫/// import 'dart:io';File _image;// 圖片獲取引擎final picker = ImagePicker();/// 獲取攝像頭圖像的方法Future getImageFromCamera() async {/// 菜單按鈕消失Navigator.pop(context);/// 需要導入 image_picker.dart 包/// import 'package:image_picker/image_picker.dart';final pickedFile =await picker.getImage(source: ImageSource.camera);setState(() {if (pickedFile != null) {_image = File(pickedFile.path);} else {print('No image selected.');}});}/// 獲取相冊中的圖像Future getImageFromGallery() async {/// 菜單按鈕消失Navigator.pop(context);/// 需要導入 image_picker.dart 包/// import 'package:image_picker/image_picker.dart';final pickedFile =await picker.getImage(source: ImageSource.gallery);setState(() {if (pickedFile != null) {_image = File(pickedFile.path);} else {print('No image selected.');}});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: _image == null ? Text('No image selected.') : Image.file(_image),),floatingActionButton: FloatingActionButton(onPressed: () {/// 浮動按鈕點擊事件/// 點擊浮動按鈕 , 彈出一個菜單/// 菜單有兩個按鈕 , 分別是 拍照 / 選擇圖片showModalBottomSheet(context: context,builder: (context) {return Container(// 設置該彈出的組件高度 200 像素height: 200,child: Column(children: <Widget>[// 拍照按鈕GestureDetector(child: ListTile(// 相機圖標leading: Icon(Icons.camera_alt),title: Text("拍照"),/// 按鈕點擊事件onTap: (){// 調用 getImage 方法 , 調出相機拍照getImageFromCamera();},),),// 相冊按鈕GestureDetector(child: ListTile(// 相冊圖標leading: Icon(Icons.photo_library_outlined),title: Text("相冊"),/// 按鈕點擊事件onTap: (){// 調用 getImageFromGallery 方法 , 調出相冊getImageFromGallery();},),),],),);});},tooltip: 'Pick Image',child: Icon(Icons.add_a_photo),),);} }

運行效果 :

五、相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_photo ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/15852074 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。