我想在文本小部件中展示一个图标，我该怎么做？
以下代码只显示IconData。
以下代码只显示IconData。
Text("Click ${Icons.add} to add");
10个回答
236
Flutter有WidgetSpan()可以在RichText()中添加小部件。
示例用法：
RichText(
text: TextSpan(
children: [
TextSpan(
text: "Click ",
),
WidgetSpan(
child: Icon(Icons.add, size: 14),
),
TextSpan(
text: " to add",
),
],
),
)
您可以像对待常规小部件一样对待WidgetSpan的子元素。- dennbagas
3
79
截图:
使用
Wrap:Wrap( crossAxisAlignment: WrapCrossAlignment.center, children: [ Text('Click'), Icon(Icons.add), Text('to add'), ], )使用
Row:Row( mainAxisSize: MainAxisSize.min, children: [ Text('Click'), Icon(Icons.add), Text('to add'), ], )使用
Text.rich：Text.rich( TextSpan( children: [ TextSpan(text: 'Click'), WidgetSpan(child: Icon(Icons.add)), TextSpan(text: 'to add'), ], ), )
- CopsOnRoad
7
@genericUser 这并不完全正确，你的文本有多长？ - CopsOnRoad
它是灵活的文本（可以是一行短文，也可以是非常长的文本。非常类似于 StackOverflow 上的评论）;) - genericUser
@genericUser 好的，那么使用
Wrap 有什么问题呢？你可以提一个单独的问题吗？ - CopsOnRoad1感谢帮助，text rich对我来说完美运作。 - Avadhesh Mourya
非常感谢。我在分页数据表中使用了wrap，效果非常好。注意：我的文本不是很长。但我不确定对于长文本会有怎样的表现。 - Jagadish Nallappa
显示剩余2条评论
41
另一种选择可能是使用表情符号。
在Dart中，字符串支持特殊字符的转义序列。对于Unicode表情符号，您可以使用\u和大括号，并在其中放置表情符号的十六进制代码。像这样：
Text('Click \u{2795} to add')
结果为：
你可以在这里找到完整的Unicode表情符号列表：http://unicode.org/Public/emoji/1.0/emoji-data.txt
- GaboBrandX
23
Row Widget可以是解决此问题的一种方案，但您需要使用不同的小部件来实现它。
请按照以下示例进行操作。
Row(
children: <Widget>[
Text("Hi"),
Icon(Icons.add),
Text("Hello")
]
)
- Viren V Varasadiya
3
11针对这个用户的特定情况，这种方法是有效的，因为文本非常短。但请记住，如果您需要将图标放置在更长的段落中，这种方法可能无法正常工作。 - GaboBrandX
我正在给答案点赞，但由于@GaboBrandX提出的问题，我不打算接受它。 - UVic
1图标也无法与文本水平对齐。 - Gstuntz
15
另一个选项是 String.fromCharCode(int charCode)
这是由Flutter团队创建的icons.dart，可以在此处找到charCodes。
RichText(
text: TextSpan(
style: TextStyle(
color: Colors.black,
fontSize: 24.0,
),
text: 'This is alarm icon : ',
children: <TextSpan>[
TextSpan(
text: String.fromCharCode(0xe190), //<-- charCode
style: TextStyle(
fontFamily: 'MaterialIcons', //<-- fontFamily
fontSize: 24.0,
color: Colors.red,
),
)
],
),
)
结果：
- blokberg
8
我认为最好使用Row小部件。这是一个例子：
Row(
children: [
Icon(Icons.download_rounded),
Text(" Download")
],
)
- Sammrafi
1
- genericUser
0
你可以使用这个函数：
Widget _spanIcon(String text, IconData icon, TextStyle st) {
return Row(
children: [
Text(text,style: st,),
Text(
String.fromCharCode(icon.codePoint), //<-- charCode from icon data
style: TextStyle(
fontFamily: icon.fontFamily, //<-- fontFamily from icon data
fontSize: st.fontSize! + 4.0,//you can increase font size for icon here
color: st.color,
),)
],
);}
然后使用它：
_spanIcon('11',Icons.access_alarm, TextStyle(fontSize: 14.0, color: Color.fromARGB(113, 0, 0, 0))),
- Adel Ben Hamadi
0
您可以使用this包来实现此功能。
我找不到这个包的发布版本。
以下是实现代码。
RealRichText(
[
TextSpan(
text: "A Text Link",
style: TextStyle(color: Colors.red, fontSize: 14),
recognizer: TapGestureRecognizer()
..onTap = () {
debugPrint("Link Clicked.");
},
),
ImageSpan(
AssetImage("packages/real_rich_text/images/emoji_9.png"),
imageWidth: 24,
imageHeight: 24,
),
ImageSpan(AssetImage("packages/real_rich_text/images/emoji_10.png"),
imageWidth: 24,
imageHeight: 24,
margin: EdgeInsets.symmetric(horizontal: 10)),
TextSpan(
text: "哈哈哈",
style: TextStyle(color: Colors.yellow, fontSize: 14),
),
TextSpan(
text: "@Somebody",
style: TextStyle(
color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold),
recognizer: TapGestureRecognizer()
..onTap = () {
debugPrint("Link Clicked");
},
),
TextSpan(
text: " #RealRichText# ",
style: TextStyle(color: Colors.blue, fontSize: 14),
recognizer: TapGestureRecognizer()
..onTap = () {
debugPrint("Link Clicked");
},
),
TextSpan(
text: "showing a bigger image",
style: TextStyle(color: Colors.black, fontSize: 14),
),
ImageSpan(AssetImage("packages/real_rich_text/images/emoji_10.png"),
imageWidth: 24,
imageHeight: 24,
margin: EdgeInsets.symmetric(horizontal: 5)),
TextSpan(
text: "and seems working perfect……",
style: TextStyle(color: Colors.black, fontSize: 14),
),
],
);
您还可以查看以下问题以获取更多信息：
- ibhavikmakwana
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
alignment: PlaceholderAlignment.middle,可以使垂直居中对齐。 - kuzey beytar