Question

我想在文本小部件中显示一个图标。我该怎么做呢？

以下代码仅显示Text("Click ${Icons.add} to add");

SELECT columns
FROM TableA A
LEFT OUTER JOIN TableB B
  ON A.columnName = B.columnName
WHERE B.columnName IS NULL;

Answer 1

行小部件可以是解决此问题的一种方法，但是您必须使用不同的小部件才能实现。

请遵循以下示例。

Row(
   children: <Widget>[
     Text("Hi"),
     Icon(Icons.add),
     Text("Hello")
   ]
 )

Answer 2

尝试Wrap：

Wrap(
  crossAxisAlignment: WrapCrossAlignment.center,
  children: [
    Text('Click'),
    Icon(Icons.add),
    Text('to add'),
  ],
)

Answer 3

Flutter具有WidgetSpan()可以在RichText()内添加小部件。

示例用法：

RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: "Click ",
      ),
      WidgetSpan(
        child: Icon(Icons.add, size: 14),
      ),
      TextSpan(
        text: " to add",
      ),
    ],
  ),
)

以上代码将产生：

您可以像平常的小部件一样对待WidgetSpan的孩子。

Answer 4

另一个选项是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,
       ),
     )
   ],
  ),
)

结果：

Answer 5

另一种选择是使用表情符号。

在Dart中，字符串支持特殊字符的转义序列。对于Unicode表情符号，您可以在\ u和花括号内加上表情符号十六进制代码。像这样：

Text('Click \u{2795} to add')

结果是：

您可以在此处找到完整的Unicode表情符号列表：http://unicode.org/Public/emoji/1.0/emoji-data.txt

Answer 6

您可以使用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),
        ),
      ],
    );

您还可以查看以下问题以了解更多信息：

Flutter Issue #2022

Answer 7

您可以在Text.rich（）上使用WidgetSpan（）。这是a link（用于InlineSpan类）。

如何在颤动的文本小部件中显示图标？

7 个答案: