从完成[flutter竖向显示文字]到对实现方式[Rich Text和Text Span]的一些整理

在Flutter中，我们可以使用RichText和TextSpan来实现竖向显示文字。以下是一个简单的例子：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            constraints: BoxConstraints.tightFor(width: 200.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                RichText(
                  text: TextSpan(
                    text: '这是一个',
                    style: DefaultTextStyle.of(context).style,
                    children: <TextSpan>[
                      TextSpan(text: '竖向', style: TextStyle(color: Colors.blue)),
                      TextSpan(text: '显示文字的例子。'),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们使用RichText和TextSpan来创建一个包含样式化文本的列。TextSpan允许我们创建一个树状结构的文本，每个节点可以有自己的样式。crossAxisAlignment: CrossAxisAlignment.start确保了列中的子元素垂直方向上对齐到开始位置，这样子元素（在这个例子中是RichText）就会竖向排列。