颤振中的上标和下标

Question

我使用this question的答案并插入一个上标，就像这样

现在，可以编辑上标 fontFamily 吗？我试过了，但它不起作用。我唯一可以编辑的是颜色。

Text("2500"+"TND", style: TextStyle(fontFamily: 'Avenir',color: Colors.blue)),

这段代码会返回这个结果：

Answer 1

AFAIK，下标和上标是not yet supported by Flutter，它们仍在进行中，如this GitHub thread中所述：

对于那些特定的示例，您可以使用相关的 Unicode 人物。对于通用解决方案，我们目前没有办法 控制文本跨度的垂直对齐方式；这是子弹之一 点在#224。

作为一种解决方法，您可以使用RichText 和Transform.translate 尝试this GitHub comment 中的示例；

您可以尝试使用 RichText 小部件和 Transform.transalte 小部件：

RichText(
  text: TextSpan(
    style: TextStyle(color: Colors.red, fontSize: 16),
    children: [
      TextSpan(
        text: 'Some text ',
      ),
      WidgetSpan(
        child: Transform.translate(
          offset: const Offset(0.0, 4.0),
          child: Text(
            'subscripts',
            style: TextStyle(fontSize: 11),
          ),
        ),
      ),
      WidgetSpan(
        child: Transform.translate(
          offset: const Offset(0.0, -7.0),
          child: Text(
            'supscripts',
            style: TextStyle(fontSize: 11),
          ),
        ),
      ),
      TextSpan(
        text: 'Some text ',
      ),
    ],
  ),
);

one of the answer 中的this SO post 也使用了相同的解决方法；

测试解决方法，您现在可以更改上标/下标的字体系列：

import 'dart:ui';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: 'RobotoMono',
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Column(
              children: [
                RichText(
                  text: TextSpan(
                    style: TextStyle(
                      color: Colors.blue,
                      fontSize: 16,
                      fontFamily: 'Shizuru',
                    ),
                    children: [
                      TextSpan(
                        text: '-2,500',
                      ),
                      WidgetSpan(
                        child: Transform.translate(
                          offset: const Offset(0.0, -7.0),
                          child: Text(
                            'TND',
                            style: TextStyle(
                              fontSize: 11,
                              fontFamily: 'RobotoMono',
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

输出：

注意：我使用了Shizuru 和Roboto Mono 字体系列来直观地比较差异。