Flutter学习笔记之Text(2)RichText

170 阅读1分钟

RichText

RichText组件可以用来显示一段包含不同样式的文本。

Text属性

RichText组件中需要显示的文本内容由text属性设置,不同于Text组件,RichText组件需要传入的文本信息不是简单的String类型,而是TextSpan类型。 TextSpan类型本身是一直可以无限递归的树状结构,每个节点除了可以通过text属性传入字符串外,还可以通过style属性自定义文字样式,甚至可以通过children属性传入一个TextSpan列表作为子节点,以实现叠加和嵌套文字样式功能。

RichText(
  text: TextSpan(
      text:("TextSpan1"),
     style:TextStyle(color: Colors.black),
  },
    children: [
      TextSpan(text: "和"),
      TextSpan(text: 'TextSpan2',style:TextStyle(color: Colors.red,decoration: TextDecoration.underline),
      ),
    ]
  ),
),

Text组件的Text.rich()构造函数

上面是通过text参数传给RichText组件的TextSpan类型只会继承上级TextSpan树中的样式,而不继承上级DefaultTextStyle组件提供的默认的样式。如果需要使用DefaultTextStyle组件统一设置样式,则可以考虑使用Text组件的Text.rich()构造函数。

Text.rich(
  TextSpan(
      style:TextStyle(
          fontSize:18,
          color:Colors.black,
      ),
      text:"textrich",
      children: [
      TextSpan(text: "和"),
      TextSpan(text: 'TextSpan2',style:TextStyle(color: Colors.red,decoration: TextDecoration.underline),
      ),
    ]
  ),

)

触碰检测

可以给文字中某一段文字加入链接:TextSpan中的recognizer参数支持传入一个GestureRecognizer类

RichText(
  text: TextSpan(
      text:("TextSpan"),
      style:TextStyle(color: Colors.black),
      recognizer: TapGestureRecognizer()..onTap=(){
        print("Tap1");
  },
    children: [
      TextSpan(text: "和"),
      TextSpan(text: name,style:TextStyle(
      color:Colors.red,
      decoration: TextDecoration.underline
      ),
      recognizer:TapGestureRecognizer()..onTap = (){
        print("Tap2");
      }
      ),
    ]
  ),
),