在 flutter 中使用 RichText 对齐文本

Question

Text UI

我想使用 RichText 小部件在 flutter 中创建类似这样的 UI。你能帮我写代码吗？我不明白如何设计这样的 UI?

Answer 1

使用WidgetSpan给出偏移量得到上标。操作如下：

Container(
            padding: EdgeInsets.all(10),
            child: Center(
              child: RichText(
                text: TextSpan(children: [
                  WidgetSpan(
                      child: Transform.translate(
                          offset: const Offset(0.0, -7.0), child:                               
                    Text("Rs"))),
                  TextSpan(
                      text: '1,500',
                      style: TextStyle(color: Colors.black,                             
                        fontSize: 18,fontWeight:FontWeight.bold),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          // navigate to desired screen
                        })
                ]),
              ),
            ))

Answer 2

或者如果你想在上标文本上使用识别器，那么你应该使用类似的东西：

  RichText(
        text: TextSpan(
          children: [
            WidgetSpan(
              child: Transform.translate(
                  offset: Offset(0.0, -7.0),
                  child: RichText(  // use RichText instead ot Text if you need recognizer on a superscripted text 
                    text: TextSpan(
                      text: "superscripted text",
                      //style: textStyle,
                      recognizer: tapGestureRecognizer,
                    ),
                  )
              ),
            ),
          ],
        ),
      );

重要提示：如果您需要对上标文本进行识别，请在内部块中使用 RichText 而不是 Text。

( 更简单的版本可以在 TextStyle 中使用 fontFeatures，但它没有提升我的解决方法中的文本，所以它对我来说无法正常工作。

TextStyle textStyle = TextStyle(...
      fontFeatures: (isSup ? [FontFeature.subscripts()] : (isSub ? [FontFeature.subscripts()] : null)),
    );

)

在 flutter 中使用 RichText 对齐文本

Aligning text using RichText in flutter

richtext

flutter