Flutter6:Text

最新推荐文章于 2025-03-11 09:00:00 发布

原创最新推荐文章于 2025-03-11 09:00:00 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

Flutter 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一个使用Flutter框架实现的富文本显示及URL点击功能的示例。通过RichText组件结合TextSpan和GestureRecognizer，实现了不同文本样式和响应用户点击跳转至外部链接的功能。示例中详细展示了如何设置文本样式、处理文本溢出、添加点击事件监听等。

ex:

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:url_launcher/url_launcher.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
//  debugPaintSizeEnable = true;
  @override
  Widget build(BuildContext context) {
//    debugPaintSizeEnabled = true;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Text ex'),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              Text('Be a master, be a useful man from HUST！',
                maxLines:1,
                overflow: TextOverflow.ellipsis,
                softWrap: true,//自动换行
                style: TextStyle(
                  fontSize: 30.0,
                  decoration: TextDecoration.lineThrough,//删除画线
                  decorationStyle: TextDecorationStyle.wavy),
                ),
              SizedBox(//间隔
                height: 30.0,
              ),
              RichText(text: TextSpan(//富文本
                text: 'Be a master',
                style: TextStyle(color: Color(0xffff0000), fontSize: 20.0),
                children: <TextSpan>[
                  TextSpan(
                    text:'I am a master',
                  ),
                  TextSpan(
                    text: 'HUST',
                    style: TextStyle(color: Color(0xff0000ff)),
                    recognizer: TapGestureRecognizer()
                      ..onTap = () async {//点击事件
                        String url = 'https://www.hust.edu.cn/';
                        if (await canLaunch(url)){
                          await launch(url);//加载网页
                        }else{
                          throw 'error: $url';
                        }
                      }),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

效果