[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.レンダリング

レンダリング

おすすめ

転載: blog.csdn.net/weixin_43266090/article/details/93413390