我正在参加「启航计划」
前言
 |
 |
 |
|---|
在app中，在完成同享功用的时分，一般会有一种以卡片方式展现和同享内容的同享方式。这种功用可以将信息以整齐、易读的方式呈现给用户，使他们可以快速了解内容的要害信息，并将其同享给其他人。那么在这篇文章中，就一起来探究下，怎么运用Flutter来完成这卡片同享功用吧~
源代码：www.aliyundrive.com/s/FH7Xc2vyL…
效果图：
完成计划
为了卡片的款式的灵活性和可定制性，本文选用对组件进行截图的方式来完成卡片保存同享的功用，选择这个计划还有一点好处便是充分利用了flutter跨渠道的优势。当然也会有一定的缺点，例如对于功用的考虑，当对复杂的嵌套卡片组件截图时，烘托和图画转化的核算量是需要考虑的，当然也可以选择忽略不计~
创建弹窗&卡片布局
在生成同享卡片的同时还会有其他的操作选项，例如保存图片、仿制链接、浏览器打开等等，所以一般同享卡片的方式为弹窗方式，中间为同享卡片主体，剩下空间为操作项。
操作项组件封装：
class ImageDialog extends StatelessWidget {
const ImageDialog({
Key? key,
required this.items,
...
}) : super(key: key);
final List<ItemLittleView> items;
...
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
...
child: Row(
children: items
.map((e) => itemLittleView(
label: e.label,
icon: e.icon,
onTap: () {
Navigator.pop(context);
e.onTap?.call();
}))
.toList()),
),
],
);
}
Widget itemLittleView({
required String label,
required String icon,
Function()? onTap,
}) =>
InkWell(
onTap: onTap,
child: Container(
margin: EdgeInsets.only(right: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
//图标
),
Container(
//文字
),
],
),
),
);
}
}
class ItemLittleView {
final String label;
final String icon;
final Function()? onTap;
ItemLittleView({required this.label, required this.icon, this.onTap});
}
需要参加新的操作项时，只需要简略的增加一个ItemLittleView即可。
ImageDialog(
items: [
ItemLittleView(
label: "生成图片 ",
icon: "assets/images/icon/ic_down.png",
onTap: () => doSaveImage(),
),
...
],
),
卡片的布局则依据事务的需求自定义即可，本文也只是一个简略的例子。
烘托并截取组件截图
在flutter中可以运用RepaintBoundary将将组件烘托为图画。
- 第一步：定义大局的GlobalKey，用于获取卡片布局组件的引用
var repaintKey = GlobalKey();
RepaintBoundary(
key: repaintKey,
//同享卡片
child: shareImage(),
),
- 第二步：运用RenderRepaintBoundary的toImage办法将其转化为图画
Future<Uint8List> getImageData() async {
BuildContext buildContext = repaintKey.currentContext!;
//用于存储截取的图片数据
var imageBytes;
//经过 buildContext 获取到 RenderRepaintBoundary 目标，表示要截取的组件鸿沟
RenderRepaintBoundary boundary =
buildContext.findRenderObject() as RenderRepaintBoundary;
//这行代码获取设备的像素密度，用于设置截取图片的像素密度
double dpr = ui.window.devicePixelRatio;
//将鸿沟目标 boundary 转化为图画，运用指定的像素密度。
ui.Image image = await boundary.toImage(pixelRatio: dpr);
// image.width
//将图画转化为ByteData数据，指定了数据格局为 PNG 格局。
ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
//将ByteData数据转化为Uint8List 类型的图片数据。
imageBytes = byteData!.buffer.asUint8List();
return imageBytes;
}
- 第三步：获取权限&保存截图
//获取权限
_requestPermission() async {
Map<Permission, PermissionStatus> statuses = await [
Permission.storage,
].request();
final info = statuses[Permission.storage].toString();
}
Future<String> saveImage(Uint8List imageByte) async {
//将回调拿到的Uint8List格局的图片转化为File格局
//获取暂时目录
var tempDir = await getTemporaryDirectory();
//生成file文件格局
var file =
await File('${tempDir.path}/image_${DateTime.now().millisecond}.png')
.create();
//转成file文件
file.writeAsBytesSync(imageByte);
print("${file.path}");
String path = file.path;
return path;
}
//最后经过image_gallery_saver来保存图片
/// 执行存储图片到本地相册
void doSaveImage() async {
await _requestPermission();
Uint8List data = await getImageData();
String path = await saveImage(data);
final result = await ImageGallerySaver.saveFile(path);
showDialog(
context: context,
builder: (_) {
return AlertDialog(
title: Text("保存成功！"),
);
});
}
到这儿，同享卡片的功用就完成啦~
总结
在本文中，我们探究了运用Flutter完成卡片同享功用的过程。在开发app时，卡片同享功用可认为用户供给更好的交互和同享体会，我猜大家在开发的过程中也会有很大的概率碰上这样的需求。经过规划精巧的卡片款式，可以协助更快速的推广APP。
关于我
Hello，我是Taxze，如果您觉得文章对您有价值，希望您能给我的文章点个❤️，有问题需要联系我的话：我在这儿，也可以经过的新的私信功用联系到我。如果您觉得文章还差了那么点东西，也请经过关注督促我写出更好的文章~如果哪天我前进了呢？
