Flutter-Text组件

1. 普通的文本组件


Text("默认样式文本组件")

2. 给文本组件添加一些属性


eg:
  Text(
    "测试文本"*10,	
    textAlign: TextAlign.start,	
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    textScaleFactor: 2,
    style: TextStyle(
        color: Colors.yellow,
        fontSize: 7.0,
        background: Paint()..color = Colors.blue,
        decoration: TextDecoration.underline
    ),
  ),
  • textAligin:属性定义文本对齐方式,start、end、center(起始位置对齐、结尾位置对齐和居中对齐)。起始位置对其等价于左对齐,结尾位置对齐等价于右对齐。如果文本本身已经相对于父组件居中对齐,那么问自己是设置了非居中对齐,最终也还是相对于父组件居中对齐。
  • maxLines:改属性定义文本组件最大显示行数,默认情况下自动换行。如果值为1,当文本长度超过1行,超出范围会被省略。
  • overflow:改属性知名文本超出范围的省略方式。TextOverflow.ellipsis值为(…)
  • textScaleFactor:该文字属性定义字体缩放比例,默认1.0。
  • Flutter支持定义属性,style: TextStyle,例如:color(字体颜色)、fontSize(字体大小,注意,这是精确的尺寸值,因此不会像textScaleFactor那样随系统变化而变化)、background(背景颜色)、decoration(背景装饰,上文时指下划线)

3. Text.rich,同时存在不同样式的文本


eg:
    Text.rich(
        TextSpan(children: [
          TextSpan(
            text: "Red text ",
            style: TextStyle(color: Colors.red, fontSize: 25.0),
          ),
          TextSpan(
            text:"Blue text ",
            style: TextStyle(color: Colors.blue, fontSize: 25.0),
            recognizer: TapGestureRecognizer()..onTap = (){
              debugPrint("Blue text clicked");
            }
          )
        ])
    ),
  • 上述代码中,TextSpan包含了两个子组件,每个TextSpan代表一个文本片段,其中第二文本片段中添加了触摸事件,然后在后台输出debug中的文字。

4. DefaltTextStyle,文本默认样式的继承


eg:
    DefaultTextStyle(
      style: TextStyle(
        color: Colors.green,
        fontSize: 20.0
      ),
      textAlign: TextAlign.start,
        child: Column(
          children: [
            Text("Green Text"),
            Text(
              "Another text",
              style: TextStyle(inherit:false, color:Colors.black),
            ),
            Text(
              "My color is not green",
              style: TextStyle(color:Colors.grey),
            )
          ],
        ),
    )
  • 上述代码中,在DefaultTextStyle中包裹的,未单独定义提到样式,全部会使用DefaultTextStyle 的样式,Another text中,“inherif:false”,意思是完全不继承, “My color is not green”, 单独添加了color,因此除了color以外的样式都会被继承。

代码样式


Flutter-Text组件_第1张图片

源码


import 'package:flutter/gestures.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Column(
            children: [
              Text(
                "测试文本"*10,
                textAlign: TextAlign.start,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                textScaleFactor: 2,
                style: TextStyle(
                    color: Colors.yellow,
                    fontSize: 7.0,
                    background: Paint()..color = Colors.blue,
                    decoration: TextDecoration.underline
                ),
              ),
              Text.rich(
                TextSpan(children: [
                  TextSpan(
                    text: "Red text ",
                    style: TextStyle(color: Colors.red, fontSize: 25.0),
                  ),
                  TextSpan(
                    text:"Blue text ",
                    style: TextStyle(color: Colors.blue, fontSize: 25.0),
                    recognizer: TapGestureRecognizer()..onTap = (){
                      debugPrint("Blue text clicked");
                    }
                  )
                ])
              ),
              DefaultTextStyle(
                style: TextStyle(
                  color: Colors.green,
                  fontSize: 20.0
                ),
                textAlign: TextAlign.start,
                  child: Column(
                    children: [
                      Text("Green Text"),
                      Text(
                        "Another text",
                        style: TextStyle(inherit:false, color:Colors.black),
                      ),
                      Text(
                        "My color is not green",
                        style: TextStyle(color:Colors.grey),
                      )
                    ],
                  ),
              )
            ],
          )
        ),
      ),
    );
  }
}

你可能感兴趣的:(Flutter,flutter,flutter)