Flutter学习第九天:实现拍照，本地图片选择的简单Demo实现。

废话少说，先看一下效果，主要功能：
1.可以选择多张本地图片
2.可以实现拍照
3.可以实现选择图片排列
4.可以实现图片的删除

在这里插入图片描述

在这里插入图片描述

1.导入依赖

1.依赖如下

image_pickers: ^1.0.8+7

如果先了解更多的功能，可以去看这个依赖说明地址。

2.导入依赖步骤

导入框架前得把build.gradle的版本改为19到29之间，如图所示:

在这里插入图片描述

我使用的软件为android studio，步骤如下图：

在这里插入图片描述

2.所有代码如下：

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:image_pickers/image_pickers.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  List _image=[];

  Future getImage() async {
    List _listImagePaths = await ImagePickers.pickerPaths(
        galleryMode: GalleryMode.image,
        selectCount: 2,
        showGif: false,
        showCamera: true,
        compressSize: 500,
        uiConfig: UIConfig(uiThemeColor: Color(0xffff0f50)),
        cropConfig: CropConfig(enableCrop: false, width: 2, height: 1));

    setState(() {
      if (_listImagePaths != null) {
        for(int i=0;i<_listImagePaths.length;i++) {
          _image.add(File(_listImagePaths[i].path.toString()));
        }
      } else {
        print('No image selected.');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Picker Example'),
      ),
      body: Center(
        child:Wrap(
          spacing: 5,
          runSpacing: 5,
          children: _genImages(),
        )
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: getImage,
        tooltip: 'Pick Image',
        child: Icon(Icons.add_a_photo),
      ),
    );
  }


  _genImages() {
    return _image.map((file){
      return Stack(
        children: [
          ClipRRect(
            borderRadius:BorderRadius.circular(5),
            child: Image.file(file,width: 90,height: 90,fit: BoxFit.fill,),
          ),Positioned(
            right: 5,
            top: 5,
            child:GestureDetector(
              onTap: (){
                setState(() {
                  _image.remove(file);
                });
              },
              child: ClipOval(
                child: Container(
                  padding: EdgeInsets.all(3),
                  decoration: BoxDecoration(color: Colors.black54),
                  child: Icon(Icons.close,size: 18,color: Colors.white,),
                ),
              ),
            ),
          )
        ],
      );
    }).toList();
  }
}

代码解析：

继承的类为StatefulWidget型，因为与UI组件存在交互，需要使用setState方法，如图所示：

在这里插入图片描述

因为Flutter的布局格式有点像俄罗斯套娃，所有基本结构如下：

在这里插入图片描述

组件名	作用
Center	内部居中显示
Wrap	流布局，布局格式和Row表现很像，但Row只能是单行，Wrap可以多行
Stack	把所有的子widget都是重叠放在一起的，一个与Positioned组件一起使用，通过绝对定位来控制左右上下的距离。
ClipRRectt	通过borderRadius属性来设置图片圆角
Image.file	加载本地图片

依赖的使用:

 List _listImagePaths = await ImagePickers.pickerPaths(
        galleryMode: GalleryMode.image, 
        selectCount: 2,  
        showGif: false, 
        showCamera: true, 
        compressSize: 500, 
        uiConfig: UIConfig(uiThemeColor: Color(0xffff0f50)), 
        cropConfig: CropConfig(enableCrop: false, width: 2, height: 1));

属性的作用：

属性名	作用
galleryMode	选择 image or video
selectCount	选择图片的最大数量
showCamera	显示相机按钮
cropConfig	裁剪配置,主要对图片使用，对视频不可用
compressSize	当图片大小小于compressSize时将不压缩
uiConfig	选择图片或选择视频页面的主题