颤动中文本上的纹理(图像)
Posted
技术标签:
【中文标题】颤动中文本上的纹理(图像)【英文标题】:texture (image) on text in flutter 【发布时间】:2019-04-03 14:57:15 【问题描述】:有没有办法将图像(纹理)放在 Flutter 中的文本上?
如下图所示
【问题讨论】:
【参考方案1】:在文本上绘制图像的操作是异步的,因为它等待图像加载并设置在TextStyle
的前景着色器上。
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;
String textureName = "images/texture.jpg";
Future<TextStyle> textureText(TextStyle textStyle,
) async
ui.Image img;
img = await ImageLoader.load(textureName);
Float64List matrix4 = new Matrix4.identity().storage;
return textStyle.copyWith(
foreground: Paint1()
..shader = ImageShader(img, TileMode.mirror, TileMode.mirror, matrix4));
下面,FutureBuilder
调用textureText
并使用返回的TextStyle
Widget tt = new FutureBuilder<TextStyle>(
future: texturedText(
TextStyle(fontSize: 70.0,), // a Future<String> or null
builder: (BuildContext context, AsyncSnapshot<TextStyle> snapshot)
switch (snapshot.connectionState)
case ConnectionState.waiting:
return new Text('Awaiting result...');
default:
if (snapshot.hasError)
return new Text('Error: $snapshot.error');
else
return new Text(
'TEXTURE',
style: snapshot.data,
);
,
);
您可以像使用普通小部件一样使用tt
(texturedText)。
complete example 也可以在此repo 中使用。
【讨论】:
谢谢,当我拖动这个文本时,纹理似乎也在移动。 我认为因为它是在文本上布局的,所以,当有文本位移时,纹理也会有相同的位移。 你能告诉我如何为 draggble 小部件做什么吗? 实际上,纹理并没有移动,如果纹理固定在自己的位置。但似乎纹理在移动。以上是关于颤动中文本上的纹理(图像)的主要内容,如果未能解决你的问题,请参考以下文章