Flutter实现富文本效果

VincentStory

已于 2023-03-07 10:54:36 修改

阅读量1.3k

点赞数

分类专栏： flutter 文章标签： flutter android

于 2023-03-07 10:53:43 首次发布

本文链接：https://blog.youkuaiyun.com/wangwenbo1019/article/details/129377913

版权

flutter 专栏收录该内容

2 篇文章

订阅专栏

如图所示，我们希望让一段文字实现不同颜色展示，并且每个颜色有自己的点击事件，实现这个功能我们可以使用RichText，实现代码如下：


  _protocolText() {
    return Padding(
      padding: const EdgeInsets.only(
        top: 20,
      ),
      child: RichText(
        strutStyle:
            const StrutStyle(forceStrutHeight: true, height: 0.5, leading: 0.7),
        text: TextSpan(
          text: "富文本实现富文本实现富文本实现富文本",
          style: const TextStyle(
            fontSize: 11,
            fontWeight: FontWeight.normal,
            color: ConfigColor.normalTextColor,
          ),
          children: [
            TextSpan(
                text: "蓝色字体",
                style: const TextStyle(
                  color: Colors.blue,
                ),
                recognizer: TapGestureRecognizer()
                  ..onTap = () {
                    print("------------点击 1");
                  }),
            TextSpan(
                text: "红色字体",
                style: const TextStyle(
                  fontSize: 15,
                  color: Colors.red,
                ),
                recognizer: TapGestureRecognizer()
                  ..onTap = () {
                    print("------------点击 2");
                  }),
            const TextSpan(
              text: "黑色字体 ",
              style: TextStyle(
                fontSize: 10,
                color: Colors.black,
              ),
            ),
            TextSpan(
                text: "黄色字体",
                style: const TextStyle(
                    color: Colors.yellow,
                    fontSize: 20),
                recognizer: TapGestureRecognizer()
                  ..onTap = () {
                    print("------------点击 3");
                  }),
          ],
        ),
      ),
    );
  }