Flutter的TextSpan 小部件

TextSpan是一个不可变的文本跨度。它具有 style 属性来为文本提供样式。它还具有children属性来向这个小部件添加更多文本并为孩子们提供样式。让我们借助示例来理解这一点。

构造函数：

Syntax:
TextSpan({String text, 
List children, 
TextStyle style, 
GestureRecognizer recognizer, 
String semanticsLabel})

特性：

• 文本：包含在跨度中的文本。
• 儿童：包含更多跨度作为儿童。
• style:赋予文本的 TextStyle。
• 识别器：用户点击 TextSpan 小部件时的手势检测器。
• 语义标签：此小部件的替代语义标签。

例子：

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // This widget is 
  //the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextSpan',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green
        ),
        body: Center(
          child: Text.rich(
            TextSpan(
              text: 'This is textspan ',
              children: [
                TextSpan(
                  text: 'Widget in flutter',
                  style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),
                )
              ]
            )
          ),
        ),
        backgroundColor: Colors.lightBlue[50],
    );
  }
}

输出：

如果属性定义如下：

TextSpan(
              text: 'This is textspan ',
              style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),
              children: [
                TextSpan(
                  text: 'Widget in flutter',
                )
              ]
            )

可以观察到以下设计更改：

如果属性定义如下：

TextSpan(
              text: 'This is textspan ',
              children: [
                TextSpan(
                  text: 'Widget in flutter',
                  style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),
                )
              ]
            )

可以观察到以下设计更改：

解释：

• 创建TextSpan小部件并用Text.rich()小部件包装它。
• 将文本提供给 TextSpan 并向其添加更多内联子项。
• 为文本指定样式并查看输出。

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！