美文网首页Flutter
Flutter 之Text、TextSpan

Flutter 之Text、TextSpan

作者: yanshihao | 来源:发表于2020-11-26 17:35 被阅读0次

    Text组件常用属性

    属性 描述
    data 必填项 文本信息
    style 文本的样式信息
    strutStyle 文本字体的样式信息
    textAlign 文本应如何水平对齐
    textDirection 相对TextAlign中的start、end而言有用(当start使用了ltr相当于end使用了rtl,也相当于TextAlign使用了left)
    softWrap 某一行中文本过长,是否需要换行。默认为true,
    overflow 如何处理视觉溢出
    textScaleFactor 每个逻辑像素的字体像素数
    maxLines 本要跨越的可选最大行数

    TextStyle style 文本样式

    属性 说明
    Color color 文本颜色。如果指定了foreground,则此值必须为null。
    TextDecoration decoration 绘制文本装饰:
    下划线(TextDecoration.underline)
    上划线 TextDecoration.overline)
    删除线(TextDecoration.lineThrough)
    无(TextDecoration.none)
    Color decorationColor 绘制文本装饰的颜色
    TextDecorationStyle decorationStyle 绘制文本装饰的样式:
    画一条虚线 TextDecorationStyle.dashed
    画一条虚线 TextDecorationStyle.dotted
    画两条线 TextDecorationStyle.double
    画一条实线 TextDecorationStyle.solid
    画一条正弦线(波浪线) TextDecorationStyle.wavy
    FontWeight fontWeight 绘制文本时使用的字体粗细:
    FontWeight.bold 常用的字体重量比正常重。w700
    FontWeight.normal 默认字体粗细。w400
    FontWeight.w100 薄,最薄
    FontWeight.w200 特轻
    FontWeight.w300 轻
    FontWeight.w400 正常/普通/平原
    FontWeight.w500 较粗
    FontWeight.w600 半粗体
    FontWeight.w700 加粗
    FontWeight.w800 特粗
    FontWeight.w900 最粗
    FontStyle fontStyle 字体变体:
    FontStyle.italic 使用斜体
    FontStyle.normal 使用直立
    TextBaseline textBaseline 对齐文本的水平线:TextBaseline.alphabetic:文本基线是标准的字母基线TextBaseline.ideographic:文字基线是表意字基线;如果字符本身超出了alphabetic 基线,那么ideograhpic基线位置在字符本身的底部。
    String fontFamily 使用的字体名称(例如,Roboto)。如果字体是在包中定义的,那么它将以'packages / package_name /'为前缀(例如'packages / cool_fonts / Roboto')
    double fontSize 字体大小(pt、sp),默认为14个逻辑像素(14pt、14sp)
    double letterSpacing 水平字母之间的空间间隔(逻辑像素为单位)。可以使用负值来让字母更接近。
    double wordSpacing 单词之间添加的空间间隔(逻辑像素为单位)。可以使用负值来使单词更接近。
    double height 文本行与行的高度,作为字体大小的倍数(取值1~2,如1.2)
    Locale local 此属性很少设置,用于选择区域特定字形的语言环境
    Paint background 文本背景色
    Paint foreground 文本的前景色,不能与color共同设置(比文本颜色color区别在Paint功能多,后续会讲解)
    List<Shadow> shadows 详解:Flutter Decoration背景设定(边框、圆角、阴影、形状、渐变、背景图像等)

    TextAlign

    文本应如何水平对齐enum:

    • TextAlign.center :将文本对齐容器的中心。
    • TextAlign.end:对齐容器后缘上的文本。
    • TextAlign.justify:拉伸以结束的文本行以填充容器的宽度。即使用了decorationStyle才起效
    • TextAlign.left:对齐容器左边缘的文本。
    • TextAlign.right:对齐容器右边缘的文本。
    • TextAlign.start:对齐容器前缘上的文本。

    StrutStyle

    先来理解一下这张图(字体)


    字体

    演示效果

    简单效果图

    代码如下

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text("标题"),
            ),
            body: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(
                  "hello world",
                  textAlign: TextAlign.start,
                  style: TextStyle(color: Colors.green),
                ),
                Text(
                  "hello world" * 10,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
                Text(
                  "hello world",
                  textScaleFactor: 1.5,
                    semanticsLabel:"fasdhfadfadd"
                ),
                Text(r'$$', semanticsLabel: 'Double dollars'),
                Text.rich(TextSpan(children: [
                  TextSpan(text: "home:"),
                  TextSpan(
                      text: "https://flutterchina.club",
                      style: TextStyle(color: Colors.blue)),
                  WidgetSpan(child: Icon(Icons.home))
                ]))
              ],
            ),
          ),
        );
      }
    }
    
    

    参考

    相关文章

      网友评论

        本文标题:Flutter 之Text、TextSpan

        本文链接:https://www.haomeiwen.com/subject/dkkziktx.html