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
)
)
]
)
)
);
}
运行效果如下:
![](https://img.haomeiwen.com/i13196560/300aab110955628d.png)
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
)
)
]
)
)
);
}
}
运行代码,对大小标题进行点击,查看效果。
网友评论