Flutter-RichText的使用，并在上面添加手势

Flutter-RichText的使用，并在上面添加手势

1、RichText的定义

RichText在Flutter中类似于富文本的作用，可以利用RichText在一句话中展示各种不同样式的文字。
下面先看看RichText的常用定义：

RichText({
    Key key,
    @required this.text,//文本内容
    this.textAlign = TextAlign.start,//设置文字的起始位置,一共有left、right、start、end、center、justify几种情况
    this.textDirection,//设置文字流方向，当this.textAlign存在的时候，以this.textAlign为主
    this.overflow = TextOverflow.clip,//文字切割方式
    this.textScaleFactor = 1.0,//文字放大缩小倍数，默认为1.0
    this.maxLines,//最大展示行数
})

2、RichText的简单实用

RichText在这里以最简单的富文本的方式展示：

  Widget _richTextDemo(BuildContext context) {
    return Container(
        color: Colors.blueGrey,
        height: 100.0,
        width: MediaQuery.of(context).size.width,
        child: RichText(
            textAlign: TextAlign.right,
	//          textAlign: TextAlign.center,
            textDirection: TextDirection.ltr,
            text: TextSpan(
                text: 'RichText',
                style: TextStyle(
                    color: Colors.red,
                    fontSize: 30.0,
                    fontWeight: FontWeight.bold
                ),
                children: [
                  TextSpan(text: '.com',
                      style: TextStyle(
                          color: Colors.greenAccent,
                          fontSize: 20.0,
                          fontWeight: FontWeight.w300
                      )
                  )
                ]
            )
        )
    );
}

运行效果如下：

3、RichText上添加点击手势和长按手势

富文本一个重要的作用就是可以点击，这里做一个简单的点击手势作为引子。
演示代码如下：

class RichDemo1 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _RichDemo1State();
}

class _RichDemo1State extends State<RichDemo1> {
  TapGestureRecognizer _tapGestureRecognizer;
  TapGestureRecognizer _tapGestureRecognizer1;
//  LongPressGestureRecognizer _longPressGestureRecognizer;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tapGestureRecognizer = new TapGestureRecognizer();
    _tapGestureRecognizer1 = new TapGestureRecognizer()
    ..onTap = _handelLittleTapGes;
//    _longPressGestureRecognizer = new LongPressGestureRecognizer()
//    ..onLongPress = _handelLittleTapGes;
  }

  void dispose() {
    _tapGestureRecognizer.dispose();
    _tapGestureRecognizer1.dispose();
//    _longPressGestureRecognizer.dispose();
    super.dispose();
  }
  void _handelTapGes() {
    print('点击了大标题');
  }
  void _handelLittleTapGes() {
    print('点击了小标题');
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        color: Colors.blueGrey,
        height: 100.0,
        width: MediaQuery.of(context).size.width,
        child: RichText(
            textAlign: TextAlign.right,
	//          textAlign: TextAlign.center,
            textDirection: TextDirection.ltr,
            text: TextSpan(
                text: '可以点击的大标题',
                style: TextStyle(
                    color: Colors.red,
                    fontSize: 30.0,
                    fontWeight: FontWeight.bold
                ),
                recognizer: _tapGestureRecognizer..onTap = _handelTapGes,
                children: [
                  TextSpan(text: '点击小标题',
                      recognizer: _tapGestureRecognizer1,
                      style: TextStyle(
                          color: Colors.greenAccent,
                          fontSize: 20.0,
                          fontWeight: FontWeight.w300
                      )
                  )
                ]
            )
        )
    );
  }
}

运行代码，对大小标题进行点击，查看效果。