第二章●第六节:文本(Text)

文本组件显示一个但一样式的文本字符串,字符串可能多行显示,也可能全部显示在一行中,具体取决于布局约束。其提供两种构造函数。
样式参数时可选的。当省略时,文本将使用最接近的DefaultTextStyle中的样式。如果给定样式的TextStyle.inherit属性为true(默认),则给定样式将于最接近的DefaultTextStyle的样式合并。这种合并行为是很有用的,例如,使用默认字体系列和大小时使文本粗体显示。
  • 若使用文本对触摸事件作出反应,请将其包装在GestureDetector组件中,并使用GestureDetector.onTap处理。
  • 在Material Design应用程序中,考虑使用FlatButton代替,或者如果不适用,至少使用InkWell来代替GestureDetector
  • 若使用部分文本做交互,需要使用RichText,并将TapeReservator指定为文本相关部分的TextSpan.recognizer
    • RichText:提供了对文本样式的更多控制;
    • DefaultTextStyle:为文本组件提供默认样式。

1. new Text():创建一个文本组件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Text组件"),
        ),
        body: Center(
          child: Text(
            "Hello world",
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              fontSize: 24.0,
              fontWeight: FontWeight.bold
            ),
          ),
        ),
      ),
    );
  }
}
new Text

2. new Text.rich():使用TextSpan创建文本组件

Text.rich(
  TextSpan(text: "Text.rich",children: [
    TextSpan(text: "01",style: TextStyle(fontSize: 25.0)),
    TextSpan(text: "02"),
    TextSpan(text: "03"),
    TextSpan(text: "04")
  ]),
  textAlign: TextAlign.center,
  textDirection: TextDirection.ltr,
  overflow: TextOverflow.ellipsis,
)
new Text.rich

Text属性

Text属性

本节内容到此结束,若在使用过程中遇到问题,欢迎留言交流,我们一起成长。


总目录结构

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容