Flutter 风格文本

Question

我正在解决文本样式。我有这样的字符串： “@123 #123 文本正常 @tag #hashtag 文本正常” 内部插入标签文本正常时将为红色。 标签与标签将为红色但粗体。 在插入标签之外：正常文本将为黑色。主题标签与标签将为黑色但粗体。 有人有可以解决这个问题的解决方案或软件包吗？非常感谢。

Answer 1

据我了解，您想要具有不同文本样式的单个文本。在 Flutter 中，您可以通过使用 RichText 小部件和 TextSpan 将不同样式应用于文本的不同部分来实现所需的文本样式。

class StyledText extends StatelessWidget {
  const StyledText({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RichText(
          text: const TextSpan(
            children: [
              TextSpan(
                text: '@123 ',
                style: TextStyle(
                  color: Colors.red,
                  fontWeight: FontWeight.bold,
                ),
              ),
              TextSpan(
                text: '#123 ',
                style: TextStyle(
                  color: Colors.red,
                  fontWeight: FontWeight.bold,
                ),
              ),
              TextSpan(
                text: 'text normal ',
                style: TextStyle(
                  color: Colors.black,
                ),
              ),
              TextSpan(
                text: '@tag ',
                style: TextStyle(
                  color: Colors.red,
                ),
              ),
              TextSpan(
                text: '#hashtag ',
                style: TextStyle(
                  color: Colors.red,
                  fontWeight: FontWeight.bold,
                ),
              ),
              TextSpan(
                text: 'text normal',
                style: TextStyle(
                  color: Colors.black,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}