如何在 Flutter 中均匀分布 RichText Widget 中的图标和文本？

Question

我正在使用 Dart 开发 Flutter 应用程序，并且遇到了特定的 UI 设计挑战。我的目标是实现一种布局，其中图标和文本在 RichText 小部件中均匀分布。下面的图片展示了我当前的设计和期望的结果。

当前设计：

期望的结果：

如图所示，我试图将图标和文本分开以匹配所需的布局。但是，我无法在

RichText

小部件内添加间距来实现此效果。

这是我正在使用的代码片段：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    RichText(
      text: TextSpan(
        style: GoogleFonts.questrial(),
        children: [
          WidgetSpan(
            child: Icon(FontAwesomeIcons.checkDouble,
                size: 40,
                color: Color(0xffD7D7D7)),
          ),
          TextSpan(
              text: "Timer",
              style: GoogleFonts.questrial(
                textStyle: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.normal,
                  color:Color(0xff3B3B3B),
                ),
              )
          ),
          WidgetSpan(
            child: Icon(FontAwesomeIcons.squareXmark,
                size: 40,
                color: Color(
                    0xffD7D7D7)),
          ),
        ],
      ),
    ),
  ],
),

我尝试修改

TextSpan

和

WidgetSpan

元素以包含填充或边距，但在这种情况下似乎都不适用。此外，我已经查看了类似的问题和文档，但尚未找到适用于

RichText

小部件内间距的解决方案。

如何在这个

RichText

小部件中的图标和文本之间添加空格以实现所需的布局？

感谢您的协助。

Answer 1

请使用 Row like

而不是 RichText

Row(         
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [                                   
  Icon(FontAwesomeIcons.checkDouble,size: 40, color: Color(0xffD7D7D7)),
 Text("Timer", textStyle: TextStyle(                                                 
  fontSize: 20,
  fontWeight: FontWeight.normal,                         
  color:Color(0xff3B3B3B),
 ),                                               
),
Icon(FontAwesomeIcons.squareXmark, size: 40,                                             color: Color(0xffD7D7D7)),
],
),