WidgetSpan 在 Flutter 中没有正确对齐答案

【问题标题】：WidgetSpan is not proper align in FlutterWidgetSpan 在 Flutter 中没有正确对齐
【发布时间】：2021-10-03 03:42:15
【问题描述】：

我想在“m”和“ms”之间设置一个黑色的心。而且我想使用“TextAlign.justify”。如果我使用“TextAlign.center”那么它工作正常。但是如果我使用“TextAlign.justify”，那么黑心就没有设置在正确的位置。如果我删除“WidgetSpan”小部件并为黑心添加“TextSpan”，那么它也可以正常工作。但我想添加底部填充。请大家帮帮我。谢谢

Text.rich(
              TextSpan(
                children: <InlineSpan>[
                  TextSpan(
                      text: MyString.txtAboutUs ,

                     style: TextStyle(
                          fontSize: FontSize.size14,
                          fontFamily: MyFont.poppins_regular)),
                  TextSpan(
                      text: " m",
                      children: <InlineSpan>[
                        WidgetSpan(
                          baseline: TextBaseline.ideographic,
                            alignment: PlaceholderAlignment.top,
                            child: Container(
                              padding: EdgeInsets.only(bottom: 3),
                              child: Text("????", style: TextStyle(
                                  fontSize: FontSize.size8,
                                  fontFamily: MyFont.poppins_regular) ),
                            )
                        ),
                       
                        TextSpan(
                            text: "ms ",
                            style: TextStyle(
                                fontSize: FontSize.size14,
                                fontFamily: MyFont.poppins_medium,
                                color: Colors.black,
                                fontWeight: FontWeight.bold)),
                      ],
                      style: TextStyle(
                          fontSize: FontSize.size14,
                          fontFamily: MyFont.poppins_medium,
                          color: Colors.black,
                          fontWeight: FontWeight.bold)),


                  TextSpan(
                      text: MyString.txtAboutImmediately,

                      style: TextStyle(
                          fontSize: FontSize.size14,
                          fontFamily: MyFont.poppins_regular)),
                ],
              ),
              textAlign: TextAlign.justify,
            ),

【问题讨论】：

标签： flutter dart text flutter-layout dart-pub

【解决方案1】：

尝试下面的简单文本小部件

Text('you add ? here'),
// OR 
Text('you add \u{2764} here} '),

使用 RichText

更新了答案

Center(
          child: Text.rich(
    TextSpan(
      children: <TextSpan>[
        TextSpan(
          text: 'You add ',
          style: TextStyle(
            fontSize: 10.0,
            color: Colors.black,
          ),
        ),
        TextSpan(
          text: '?',
        ),
        TextSpan(
          text: 'Here',
        ),
      ],
    ),
    textAlign: TextAlign.center,
    style: TextStyle(fontSize: 10.0,),
  ),
),

屏幕喜欢

【讨论】：

感谢您的回复，但我想为仅心脏设置一个小尺寸。
好的，你想要文本大小比心形图标大吗？
我已经这样做了，请在检查后使用“textAlign: TextAlign.justify”。请再次检查我的问题，我认为您错过了我的期望点。
你想要什么？我使用 RichText 和输出屏幕更新我的答案你也可以试试这个，或者你的问题解决了吗？
您能否将心脏垂直中心设置在“您添加”和“这里！”之间。现在在你的输出中，心脏看起来像在底部。

【解决方案2】：

将padding 替换为transform。

  WidgetSpan(
                      baseline: TextBaseline.ideographic,
                      alignment: PlaceholderAlignment.top,
                      child: Container(
                        transform: Matrix4.translationValues(0, -3, 0),
                        margin: EdgeInsets.only(bottom: 8),
                        child: Text(
                          "?",
                          style: TextStyle(
                              // fontSize: FontSize.size8,
                              // fontFamily: MyFont.poppins_regular,

                              ),
                        ),
                      ),
                    ),

【讨论】：