Flutter 实现首字母下沉的效果

13 min read

height其实是最外层简单的属性。他实际设置的是StrutStyle中的height。StrutStyle可以设置总的行的空间样式（下面称为支柱样式），即简单来说，TextRich可以用它来指定一个行的总支柱，并且各个TextSpan依旧可以设定自己的TextStyle，但不会影响到支柱。

const Text.rich(
  TextSpan(
    text: '       he candle flickered\n',
    style: TextStyle(
      fontSize: 14,
      fontFamily: 'Serif'
    ),
    children: <TextSpan>[
      TextSpan(
        text: 'T',
        style: TextStyle(
          fontSize: 37,
          fontFamily: 'Serif'
        ),
      ),
      TextSpan(
        text: 'in the moonlight as\n',
        style: TextStyle(
          fontSize: 14,
          fontFamily: 'Serif'
        ),
      ),
      TextSpan(
        text: 'Dash the bird fluttered\n',
        style: TextStyle(
          fontSize: 14,
          fontFamily: 'Serif'
        ),
      ),
      TextSpan(
        text: 'off into the distance.',
        style: TextStyle(
          fontSize: 14,
          fontFamily: 'Serif'
         ),
      ),
     ],
   ),
   strutStyle: StrutStyle(
     fontFamily: 'Serif',
     fontSize: 14,
     forceStrutHeight: true,
   ),
)

image-20220924135555850