30天学会Flutter-05：常用组件（Text、Image、Icon、Button）

1. Text组件的属性和使用方法

Text是什么？

Text Widget用于显示一段文本。它是Flutter中最基本的文本显示组件，可以用来展示静态文本、动态文本，并支持丰富的样式设置。

Text的常用属性

• data (第一个参数)：要显示的字符串内容。
• style：TextStyle对象，用于设置文本的样式，如颜色、字体大小、字体粗细、字体家族、字间距、行高、装饰线等。
• textAlign：文本的对齐方式，如TextAlign.left、TextAlign.center、TextAlign.right等。
• textDirection：文本的方向，如TextDirection.ltr（从左到右）或TextDirection.rtl（从右到左）。
• overflow：当文本超出可用空间时的处理方式，如TextOverflow.ellipsis（显示省略号）、TextOverflow.clip（裁剪）、TextOverflow.fade（渐隐）。
• maxLines：文本显示的最大行数。当文本超过这个行数时，会根据overflow属性进行处理。
• softWrap：是否允许文本自动换行。默认为true。
• textScaleFactor：文本的缩放因子，会影响文本的实际显示大小。

TextStyle的常用属性

• color：文本颜色。
• fontSize：字体大小。
• fontWeight：字体粗细，如FontWeight.bold、FontWeight.w400等。
• fontStyle：字体样式，如FontStyle.italic（斜体）。
• letterSpacing：字间距。
• wordSpacing：词间距。
• height：行高（倍数）。
• decoration：文本装饰线，如TextDecoration.underline（下划线）、TextDecoration.lineThrough（删除线）。
• decorationColor：装饰线颜色。
• decorationStyle：装饰线样式，如TextDecorationStyle.dashed（虚线）。
• fontFamily：字体家族。

Text示例

import 'package:flutter/material.dart';

class TextExample extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return Scaffold(
      appBar: AppBar(title: Text('Text Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Hello, Flutter!',
              style: TextStyle(
                fontSize: 24,
                color: Colors.blue,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 20),
            Text(
              'This is a long text that will be truncated with ellipsis if it exceeds one line.',
              textAlign: TextAlign.center,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 16,
                fontStyle: FontStyle.italic,
                color: Colors.grey[700],
              ),
            ),
            SizedBox(height: 20),
            Text.rich(
              TextSpan(
                text: 'Don\'t have an account? ',
                style: TextStyle(fontSize: 16, color: Colors.black),
                children: <TextSpan>[
                  TextSpan(
                    text: 'Sign Up',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.purple,
                      decoration