[1.2] self-Flutter use a text processing TextSpan paragraph

1.2 Processing using a text paragraph TextSpan

1. Source Code

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. Explain the source code

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. renderings

Renderings

Guess you like

Origin blog.csdn.net/weixin_43266090/article/details/93413390