의 텍스트 플러터 기본 구성 요소

1.Text

공통 속성 :
textAlign을 : 텍스트 정렬, 참조 프레임 정렬 텍스트 위젯 자체가 다섯 개 가지 값을 가지고 있음을 알 수있다
TextAlign.center : 센터 텍스트를.
TextAlign.left는 : 왼쪽 정렬 텍스트를.
TextAlign.right : 오른쪽 정렬 텍스트입니다.
TextAlign.start는 : 텍스트 정렬은 왼쪽 정렬과 비슷한 위치를 시작.
TextAlign.end : 오른쪽 정렬과 같은 텍스트 정렬 끝 위치.

textDirection : 텍스트 방향, 속성이 새로운 키워드에 추가 된 경우, 측면에서 표시되는 텍스트가 다음 앞 텍스트 설정해야합니다 다음과 같은 두 가지 옵션 값 :
TextDirection.ltr : 왼쪽에서 오른쪽으로는, 텍스트가 왼쪽에서 표시됩니다.
TextDirection.rtl는 : 왼쪽에서 오른쪽에 텍스트가 왼쪽에서 표시하고 textAlign을 TextAlign.start, TextAlign.end에 다시 textAlign과 동등한 값을 1로 설정됩니다. TextAlign.end가 TextAlign.start 다시 textAlign과 대응 textAlign을 때 그 값이 설정된다.

maxLines : 지정 텍스트 디스플레이의 라인의 최대 수는 int이며. 기본적으로 텍스트는 자동으로이 매개 변수를 지정하는 경우, 텍스트는 최대 지정된 행을 초과하지 않는, 싸여있다. 여분의 텍스트가있는 경우, 당신은 오버 플로우에 의한 절단을 지정할 수 있습니다, 기본은 직접 컷입니다

오버플 : 텍스트 안드로이드 ellipsize 속성에 대응하는 행에, 디스플레이의 나머지 내용물의 최대 개수를 초과하는 경우, 다음의 세 가지 값 :
TextOverflow.clip : 직접 절삭, 텍스트 안식 없다.
TextOverflow.ellipsis : 생략 : 뒤에 생략.
TextOverflow.fade는 : 결과가 될 경우 오버 플로우 효과의 점진적인 소멸의 일부가, softWrap 속성은 거짓이다.

softWrap은 : 자동할지 여부 부울 값 랩
디스플레이상에서 래핑 할 수 텍스트 광고, 어떤 오버플 maxLines 속성 TextOverflow.ellipsis 장애 및 디스플레이가 제공되지 않는 경우 텍스트의 단일 라인의 부분 표시 타원 초과 : 사실에있다.
거짓 텍스트 속성이 오버 플로우 오버 플로우 특성 값 처리에 따라 설정하면, 기본 프로세싱의 초과 부분을 절단, 즉, 광고 표시, 오직 하나의 라인 디스플레이를 통해 포장하지있다. 속성 설정 및 오버플로 래핑 할 수 TextOverflow.ellipsis maxLines 실패 인 경우, 행의 최대 수는 값 maxLines 속성이다.

textScaleFactor : 텍스트 글꼴 배율, double 형의 값.

로케일 : 느낌이 글꼴은 효과를 보지 못했다이 속성과 관련 될 수있다, 텍스트 영역에 속하는 설정하는 것입니다.

semanticsLabel : 텍스트 구성 요소를 의미 설정 탭을위한, 속성은 결과를 볼 못하고있다.

스타일 : 설정 텍스트 스타일, 다음 API 2.1 문자 유형에 고유 한 참조입니다.

2.TextStyle

이 클래스는 텍스트의 글꼴 크기, 글꼴 색상, 글꼴 줄 간격에 의해 제공 될 수있다 스타일의 텍스트를 설정하는 데 사용됩니다.
공통 속성 :
배경 : 배경 색상은 페인트 객체이지만,이 세트 배경과 약간의 문제처럼 보이는이 표시됩니다 일부 텍스트, 그래서 추천 갉아 먹다하지 않습니다.

색상 : 텍스트의 색상, Color 객체입니다.

debugLabel : 느낌은 탭 스타일의 텍스트 스타일의 어떤 사람이 읽을 수있는 설명을 제공한다.

장식 : 추가 장식, 가능한 값은 없습니다 :
TextDecoration.none : 디폴트.
TextDecoration.overline : 대시에.
TextDecoration.lineThrough : 취소 선.
TextDecoration.underline : 밑줄.
당신은 또한 더 장식 설정 모음에 TextDecoration.combine () 메소드 통과를 호출 할 수 있습니다.

decorationColor은 다음 장식의 색상을 설정, Color 객체입니다.

decorationStyle : 스타일, 옵션 값 세트 장식되어
점선으로 장식 스레드 : TextDecorationStyle.dashed.
TextDecorationStyle.dotted : 라인의 도트 장식 라인.
TextDecorationStyle.double : 장식 라인 두 줄.
TextDecorationStyle.solid : 장식 라인 실선.
TextDecorationStyle.wavy는 : 장식 라인은 라인을 물결 모양.
설정 모음의 수 TextDecorationStyle.values () 메소드에 전달 다양한 스타일.

다 fontFamily : 사용자 정의 글꼴 이름, 패키지 속성과 함께 사용할 수 있습니다.

에 대한 패키지 페널티 사용자의 글꼴 경로 :.

fontSize는 : 글꼴 크기는 두 배 값을 입력합니다.

fontStyle로는 : 글꼴 스타일, 옵션 값은 다음과 같습니다
FontStyle.ITALIC : 이탤릭체.
FontStyle.normal : 정상.

으로 fontWeight : 문자 폰트 가중치는 상기 FontWeight.w900 등가 FontWeight.bold FontWeight.w100 또한, FontWeight.w200 ... FontWeight.w900에서는 (굵게) FontWeight.BOLD (정상) FontWeight.NORMAL 사용된다.

상속 : 다음 스타일 부모 클래스를 사용하여 컨트롤을 대체 true의 경우, 디폴트 값으로 재설정 경우는 false 스타일의 부모가, 널 값 (설정되지 않음 값)을 대체할지 여부를 보이는 문서 수단, 흰색 10px 폰트 세리프체.

의 letterSpacing : 단어 간격을 두 번이다.

로케일 : 느낌이 글꼴은 효과를 보지 못했다이 속성과 관련 될 수있다, 텍스트 영역에 속하는 설정하는 것입니다.

그림자 : 텍스트 그림자, 그림자의 모음입니다.

이 TextBaseline : 텍스트 기준선, 다중 감각으로 사용할 수 없습니다 이러한 상황을 이해하지 못하고, 두 가지 값이 있습니다
TextBaseline.ideographic : 글꼴 알파벳 문자의 하단 수평 정렬.
TextBaseline.alphabetic : 표의 문자의 수평 정렬.
기준선의 복수의 세트를 전달하는 일 TextBaseline.values () 메소드.

wordSpacing : 당신이 단어를 생각하면 중국어에 비해 글꼴 간격을 두 번 유형의 값은, 텍스트 내용 때문에, 쉽게 세계 두 단어, 공백으로 구분되지 중국어 단어입니다 같은 안녕하세요 영어를 이해하고, 공백으로 구분되어야한다 적은.

높이 : 라인 높이, 이중형 값이 속성의 최종 값은 행 fontSize는 높은 곱한 값보다 높은 계수의 행과 같다.

다음은 하나의 형식을 만들 수있는 첫 번째 생성자와 텍스트 구성 요소이며 데모의 속성을 설정합니다 :

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Paint backgroundPaint = new Paint();
    backgroundPaint.color = new Color(0xFFFFFFFF);
    List<Shadow> shadowList = new List();
    shadowList.add(new Shadow(
        //阴影颜色
        color: new Color(0xFFFF0000),
        //模糊程度
        blurRadius: 2.0));
    return MaterialApp(
      //是否显示 debug 标签
      debugShowCheckedModeBanner: false,
      title: 'Text widget',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('Text widget'),
        ),
        body: new Text(
          //单一格式文本框,第一个参数为文本内容
          "我是一段测试文本Hello World!我是一段测试文本 Hello World!我是一段测试文本 Hello World!我是一段测试文本 Hello World!我是一段测试文本 Hello World!",
          //文字对齐方式,可选值有如下五个:
          //TextAlign.center: 文本居中对齐
          //TextAlign.left: 文本左对齐
          //TextAlign.right: 文本右对齐
          //TextAlign.start: 文本开始位置对齐,类似左对齐
          //TextAlign.end: 文本结束位置对齐,类似右对齐
          //TextAlign.justify: 文本两端对齐
          textAlign: TextAlign.start,
          //文字方向,即文字从那边开始显示,该属性必须设置,可选值有如下两个:
          //TextDirection.ltr:left to right,文本从左边开始显示
          //TextDirection.rtl:right to left,文本从左边开始显示,textAlign 为 TextAlign.start 时再设置该值,相当于又把 textAlign 设置为 TextAlign.end。textAlign 为 TextAlign.end 时再设置该值,相当于又把 textAlign 设置为 TextAlign.start
          textDirection: TextDirection.ltr,
          //文字最多显示行数,值为 int 型
          maxLines: 3,
          //当文本内容超过最大行数时,剩余内容的显示方式,相当于Android 的 ellipsize 属性,可选值有如下三个:
          //TextOverflow.clip:直接切断,剩下的文字就没有了
          //TextOverflow.ellipsis:ellipsis:在后边显示省略号
          //TextOverflow.fade: 溢出的部分会进行一个渐变消失的效果,softWrap 属性为 false 时才会有效果
          overflow: TextOverflow.ellipsis,
          //是否自动换行,值为 boolean 型:
          //true:文本内容超过一行后可以换行显示,
          //当没有设置 maxLines 属性且 overflow 为 TextOverflow.ellipsis 失效,显示单行且文本超出的部分显示为省略号。
          //false:文本内容超过一行后不可以换行显示,即只能单行显示,超出的部分默认切断处理,如果设置了 overflow 属性则按照 overflow 属性值处理。
          //当设置了 maxLines 属性且 overflow 为 TextOverflow.ellipsis 失效,即可以换行,最大行数为 maxLines 属性的值。
//      softWrap: false,
          //文本字体缩放倍数,值为 double 型
//      textScaleFactor: 1.2,
          //感觉是设置文本所属区域,可能跟字体有关,这个属性还没有看到效果。
          //locale
          //感觉是为该 Text 组件设置标签,这个属性还没有看到效果。
          //semanticsLabel
          //文本样式
          style: new TextStyle(
//        //背景颜色,但是这样设置背景有些文本显示貌似会有点问题,值为一个 Paint 对象
//        background: backgroundPaint,
              //文字颜色,值为一个 Color 对象
              color: new Color(0xFF000000),
              //感觉是为该 Style 设置标签,一段对人可读的对该 TextStyle 的描述
              //debugLabel
              //添加装饰物,可选值有:
              //TextDecoration.none:无,默认
              //TextDecoration.overline:上划线
              //TextDecoration.lineThrough:删除线
              //TextDecoration.underline:下划线
              //也可以调用 TextDecoration.combine() 方法传入一个集合设置多个装饰
              decoration: TextDecoration.underline,
              //设置装饰物的颜色,值为一个 Color 对象
              decorationColor: new Color(0xFF00FFFF),
              //设置装饰物的样式,可选值有:
              //TextDecorationStyle.dashed:装饰线为虚线
              //TextDecorationStyle.dotted :装饰线为点构成的线
              //TextDecorationStyle.double :装饰线为两根线
              //TextDecorationStyle.solid :装饰线为实心线
              //TextDecorationStyle.wavy :装饰线为波浪线
              //也可以 TextDecorationStyle.values() 方法传入一个集合设置多种样式
              decorationStyle: TextDecorationStyle.dashed,
              //自定义字体的名字,搭配 package 属性使用
//        fontFamily: ,
              //自定义字体的路径
//        package: ,
              //字体大小,值为 double 类型
              fontSize: 20.0,
              //字体样式,可选值有:
              //FontStyle.italic:斜体
              //FontStyle.normal:正常
              fontStyle: FontStyle.italic,
              //字体字重,常用值有 FontWeight.bold(加粗)
              fontWeight: FontWeight.bold,
              //貌似文档中的意思是是否使用父类的样式来替换空值(没有设置的值)
              //如果为 true 则使用父类的样式来替换控制
              //如果为 false,则恢复成默认值,白色 10px,字体为 sans-serif
              inherit: false,
              //字间距,值为 double 类型
              letterSpacing: 2.0,
              //感觉是设置文字所属区域,可能跟字体有关
              //locale
              //文字阴影,值为一个 Shadow 集合
              shadows: shadowList,
              //文本基线,这个不太理解,感觉用到的情况应该也不多,可选值有两个
              //TextBaseline.ideographic:用于对齐字母字符的字形底部的水平线
              //TextBaseline.alphabetic:用于对齐表意字符的水平线
              //也可以 TextBaseline.values() 方法传入一个集合设置多个基线
              textBaseline: TextBaseline.ideographic,
              //字体间距,值为 double 类型,应该是用空格隔开时就认为一个单词,英文容易理解,如 Hello World 就是两个单词,中文的词不用空格隔开,所以文本内容为中文时使用较少
              wordSpacing: 10.0,
              //行高,值为 double 类型,最终是该属性的值乘以 fontSize 作为行高,所以该值更像是一个行高系数
              height: 2.0),
        ),
      ),
    );
  }
}

3.TextSpan

TextSpan 텍스트의 조각을 설정, 그 사용의 정도도 매우 간단합니다 속성.

텍스트 : 텍스트 내용.

스타일 : 후자가 아닌 경우 텍스트 스타일, TextSpan 텍스트 스타일이 덮개의 속성, 그 스타일은 텍스트 스타일 사용을 지정했습니다.

인식기는 : 제스처는 이러한 사용에 대한 자세한 내용을 들어하는 데 사용 뒤에 제스처 인식, 청취자해야합니다.

어린이 : 아들 TextSpan, 당신은 더 지정할 수 있습니다.

다음은 두 번째 생성자 생성 된 텍스트 구성 요소 서식있는 텍스트, 그리고 데모의 속성을 설정합니다 :

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Paint backgroundPaint = new Paint();
    backgroundPaint.color = new Color(0xFFFFFFFF);
    List<Shadow> shadowList = new List();
    shadowList.add(new Shadow(
        //阴影颜色
        color: new Color(0xFFFF0000),
        //模糊程度
        blurRadius: 2.0));
    return MaterialApp(
      //是否显示 debug 标签
      debugShowCheckedModeBanner: false,
      title: 'Text widget',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('Text widget'),
        ),
        body: new Text.rich(
          //富文本文本框构造方法,可以显示多种样式的text,第一个参数为 TextSpan
          new TextSpan(
              text: "我是一段测试文本",
              //文字样式,如果后面的子 TextSpan 没有覆盖该 TextStyle 中的属性,则使用该 TextStyle 指定的样式
              style: new TextStyle(
                  //文字颜色,整体的文字颜色,如果后面的子 TextSpan 没有覆盖该属性,则使用该文字颜色
                  color: new Color(0xFF000000),
                  //同上
                  fontSize: 20.0,
                  //同上
                  decoration: TextDecoration.underline),
              //应该是手势识别监听器,后面用到手势监听再详细学习该类用法
//          recognizer: ,
              //子 TextSpan,可以指定多个
              children: <TextSpan>[
                new TextSpan(
                    text: "Hello",
                    style: new TextStyle(
                        color: new Color(0xFFFF0000),
                        fontSize: 30.0,
                        fontStyle: FontStyle.italic)),
                new TextSpan(
                    text: "World",
                    style: new TextStyle(
                        color: new Color(0xFFFFFF00),
                        fontSize: 40.0,
                        fontWeight: FontWeight.bold)),
              ]),
          textDirection: TextDirection.ltr,
        ),
      ),
    );
  }
}

게시 13 개 원래 기사 · 원의 찬양 (38) · 전망 2555

추천

출처blog.csdn.net/m0_46369686/article/details/104600780