第二百三十六回如何自定义选择器界面

talk_8

已于 2024-03-31 21:43:39 修改

阅读量1k

点赞数 24

分类专栏：一起Talk Flutter吧文章标签：移动开发Flutter wechatImagePick 图片选择器视频选择器

于 2023-12-30 22:34:02 首次发布

本文链接：https://blog.csdn.net/talk_8/article/details/135310711

版权

一起Talk Flutter吧专栏收录该内容

574 篇文章 13 订阅

订阅专栏

文章目录

1. 概念介绍
2. 思路与方法
- 2.1 实现思路
- 2.2 实现方法
3. 示例代码
4. 内容总结

我们在上一章回中介绍了"wechat_assets_picker简介"相关的内容，本章回中将介绍 如何自定义选择器界面.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在上一章回中介绍了wechat_assets_picker包的使用方法，本章回中的内容可以看作是上一章回中内容的延续，因为本章回中介绍的选择器是指调用pickAssets接口时弹出的窗口，这个窗口是可以自定义的，比如修改窗口中网格图片的大小等。本章回中将详细介绍如何去自定义选择器的界面。

2. 思路与方法

2.1 实现思路

包中把选择器页面相关的内容封装成了类：AssetPickerConfig，我们只需要创建类的对象，并且初始化类中相关的属性就可以。类中常用的属性如下：

maxAssets:最多选择图片的数量，默认值为9
gridCount:选择器网格数量，默认值为4
pageSize: 选择器中图片文件的大小，默认是80
pickerTheme:选择的主题，包含颜色等主题风格设置

我们在这里只列出一些常用的属性，全部的属性可以参考官方文档中AssetPickerConfig类的介绍。

2.2 实现方法

介绍完实现思路后，我们将介绍详细的实现方法，下面是具体的步骤：

创建AssetPickerConfig类型的对象；
给对象中相关的属性赋值，使用哪些属性就给哪些属性赋值；
把创建好的对象传递给pickAssets接口的pickerConfig参数；

3. 示例代码

  final AssetPickerConfig pickerConfig = const AssetPickerConfig(
    maxAssets: 3,
    gridCount: 2,
    pageSize: 20,
  );

  assetEntityList = await AssetPicker.pickAssets(context,
     pickerConfig: pickerConfig);

这个示例代码完全按照上一小节中的实现方法编写，不过调用接口部分省略了部分不必要的代码，完整的代码可以参考上一章回中的示例代码。

编译并且运行上面的程序后就会发现选择器的界面变了：网格中的图片数量从4个变成了2个，而且图片的尺寸明显变大了。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

包中把选择器的页面封装成了类，这样方便开发者使用；
修改类中不同的属性就可以修改选择器的页面风格和内容；

选择器的界面通常需要和整个程序的风格匹配，我们可以修改它的风格，这也是wechat_assets_picker包最大的优点，不过它整体上还是微信的极简风格。对比一下我们在前面章回中介绍的ImagePicker包，它提供的选择器是固定的，开发人员无法修改。所以我才在pub上找到了wechat_assets_picker包。

看官们，与"如何自定义选择器界面"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!