如何在顫動的文本小部件中顯示圖標？

Question

我想在文本小部件中顯示一個圖標。 我該怎么做呢 ？

以下代碼僅顯示IconData

Text("Click ${Icons.add} to add");

Answer 1

Flutter 有WidgetSpan()在RichText()中添加一個小部件。

示例使用：

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

上面的代碼將產生：

您可以將WidgetSpan的子級視為通常的小部件。

Answer 2

截屏：

---

• 使用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'), ], ), )

Answer 3

另一種方法可能是使用表情符號。

在 Dart 中，字符串支持特殊字符的轉義序列。 對於 unicode 表情符號，您可以使用 \u 和帶有表情符號十六進制代碼的花括號。 像這樣：

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

結果是：

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

Answer 4

Row Widget 可以是解決此問題的一種方法，但您必須使用不同的小部件來實現它。

按照下面的例子。

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

Answer 5

另一種選擇是String.fromCharCode(int charCode)

這是由顫振團隊創建的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 6

我認為最好使用 Row 小部件。 這是一個例子

Row(
  children: [
     Icon(Icons.download_rounded),
     Text(" Download")
  ],
)

Answer 7

您可以在 Text.rich() 上使用 WidgetSpan()。 這是 InlineSpan 類 的鏈接。

Answer 8

您可以使用此包來實現此目的。

我找不到這個包的 pub。

這是實施。

    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),
        ),
      ],
    );

您還可以查看以下問題以了解更多信息：

顫振問題 #2022

Answer 9

對於簡單的圖標，您可以使用 Unicode 字符作為常規文本，只需復制和粘貼即可。

您可以從此站點搜索和復制 Unicode

Text("Enjoy! 🔎❌💖🔥✅💜😍")

此方法適用於任何 Text 小部件和包。

Answer 10

String.fromCharCode(int charCode) 這是行不通的：/ 我需要這個

Answer 11

您可以使用此功能：

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))),