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

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.效果图