[英]Display a svg from a String in Flutter/Dart
我正在尝试将 svg 字符串中的图像显示到屏幕上。
我正在使用: https://pub.dartlang.org/packages/flutter_svg以获得 svg 支持。
final String svgAsString = '''<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="109" height="109" viewBox="0
0 109 109">
<g id="kvg:StrokePaths_080a1" style="fill:none;stroke:#000000;stroke-
width:3;stroke-linecap:round;stroke-linejoin:round;">
<path id="kvg:080a1-s1"
d="M20.22,18.74c0.77,0.77,0.79,2.14,0.8,3.05C21.38,62,20.62,75,11.5,89.39"/>
</g>
</svg>''';
我无法将其渲染到图像小部件或绘制到 canvas 上。我已经尝试了两种方法,但没有取得任何进展。
我将在下面粘贴完整代码:我不确定我是否在正确的轨道上。
import 'dart:async';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class KanjiGradeGenerator extends StatefulWidget {
@override
_KanjiGradeState createState() => _KanjiGradeState();
}
class _KanjiGradeState extends State<KanjiGradeGenerator> {
_KanjiGradeState() {}
displaySVG() async {
<g id="kvg:StrokePaths_080a1" style="fill:none;stroke:#000000;stroke-
width:3;stroke-linecap:round;stroke-linejoin:round;">
<path id="kvg:080a1-s1"
d="M20.22,18.74c0.77,0.77,0.79,2.14,0.8,3.05C21.38,62,20.62,75,11.5,89.39"/>
</g>
</svg>''';
final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);
final Picture picture = svgRoot.toPicture();
PictureRecorder picRec;
Canvas can = Canvas(picRec);
setState(() {
can.drawPicture(picture);
});
}
Widget build(BuildContext context) {
return new Scaffold(
body: Container(
child: displaySVG()
),
);
}
}
我收到的错误是:
I/flutter ( 7791 ): 类型 'Future' 不是类型 'Widget' 的子类型
您可以使用FutureBuilder
小部件来显示图像。
class KanjiGradeGenerator extends StatefulWidget {
@override
_KanjiGradeGeneratorState createState() => _KanjiGradeGeneratorState();
}
class _KanjiGradeGeneratorState extends State<KanjiGradeGenerator> {
final rawSvg = 'YOUR_PATH';
displaySvg() async {
final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);
return await svgRoot.toPicture().toImage(500, 500);
}
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: displaySvg(),
builder: (context,snapshot){
return Container(
child: snapshot.data,
);
},
);
}
}
尽管文档建议这样做:
final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);
我发现将其转换为Widget
可能会遇到困难。
如果您的图像串编码/从Base64编码解码,那么你可以做这个。
有了字符串后,您可以执行以下操作:
import 'package:flutter_svg/flutter_svg.dart';
String decoded; // Decoded image
@override
Widget build(BuildContext context) {
return new Scaffold(
body: Container(
child: SvgPicture.string(decoded)
),
);
}
你可以这样做:
SvgPicture.string(
'''<svg viewBox="...">...</svg>''' //Or your store it in a variable
)
那么完整的(在州内)示例用法将是:
class _SampleSvgState extends State<_SampleSvg> {
late String rawSvg;
@override
void initState() {
super.initState();
rawSvg = '''<svg viewBox="...">...</svg>''';
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(right: Const.space15),
child: InkWell(
onTap: (){},
borderRadius: BorderRadius.circular(Const.space12),
child: SizedBox(
width: 60,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 45,
height: 45,
padding: const EdgeInsets.all(Const.space12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(Const.space12),
),
child: SvgPicture.string(
rawSvg
),
),
const SizedBox(height: Const.space8),
Expanded(
child: Text(
"I am Sample Text",
maxLines: 1,
textAlign: TextAlign.center,
style: _theme.textTheme.subtitle2,
),
)
],
),
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.