【自学Flutter】1.2 使用TextSpan处理段落中的某个文本

最新推荐文章于 2025-03-18 22:04:17 发布

技术宅-Nopi

最新推荐文章于 2025-03-18 22:04:17 发布

阅读量4.2k

点赞数 1

分类专栏：自学Flutter 文章标签： Flutter Android

本文链接：https://blog.youkuaiyun.com/weixin_43266090/article/details/93413390

版权

自学Flutter 专栏收录该内容

64 篇文章

订阅专栏

1.2 使用TextSpan处理段落中的某个文本

1.源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    return MaterialApp(
      title:'Text widget usage',
      home:Scaffold(
        body:
            Center(
              child: Text.rich(TextSpan(
                  children: [
                    TextSpan(
                        text: '网址：',
                        style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.blue
                        )
                    ),
                    TextSpan(
                        text: 'http://www.baidu.com/',
                        style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.red
                        )
                    ),
                  ]
              ),
              ),
            ),
      ),
    );
  }
}

2.解释源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    return MaterialApp(
      title:'Text widget usage',
      home:Scaffold(
        body:
            Center(
			  //Text.rich() 方法将TextSpan添加到Text中
              child: Text.rich(TextSpan(
                  children: [
                    TextSpan(
                        text: '网址：',
                        style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.blue
                        )
                    ),
                    TextSpan(
                        text: 'http://www.baidu.com/',
                        style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.red
                        )
                    ),
                  ]
              ),
              ),
            ),
      ),
    );
  }
}

3.效果图

效果图