の基本的なコンポーネントフラッターテキスト

1.Text

一般的な属性は:
textAlign::テキストの配置、参照フレーム整列テキストウィジェット自体は、5つの可能な値があることに留意されたい
TextAlign.center:センターのテキストを。
TextAlign.LEFTに:左揃えのテキスト。
TextAlign.right:右揃えのテキスト。
TextAlign.start:左揃えと同様開始位置をテキストの配置、。
TextAlign.end:右揃えに似たテキスト整列終了位置、。

textDirection:テキスト方向、側から表示されるテキストは、プロパティが新しいキーワードに追加された場合、その前のテキストを設定する必要があり、以下の2つのオプションの値:
TextDirection.ltr:左から右に、テキストが左から表示しました。
TextDirection.rtl:左へ右、テキストは左から表示され、その後、textAlign TextAlign.start、TextAlign.endにtextAlign再び同等に値を設定されています。TextAlign.endがTextAlign.start再びtextAlignに対応する場合textAlignは、その値が設定されます。

MAXLINES:指定したテキスト表示の最大行数は、intです。デフォルトでは、テキストが自動的にこのパラメータが指定されている場合は、テキストが最大の指定された行を超えていない、包まれています。余分なテキストがある場合は、あなたがオーバーフローによって切り捨てを指定することができ、デフォルトはダイレクトカットです

オーバーフロー:テキストは、Android ellipsizeプロパティに対応する行、ディスプレイの残りの内容の最大数を超えた場合に、以下の3つの値:
TextOverflow.clip:直接切断は、テキストのない残りの部分は存在しません。
TextOverflow.ellipsis:省略記号:後ろに省略記号。
TextOverflow.fade:結果があるだろう場合は、オーバーフローが効果が徐々に消滅の一部となる、softWrapプロパティはfalseです。

softWrapは:自動的にかどうかを、ブール値ラップ
表示をオーバーラップすることができ、テキストライン、およびオーバーフローがMAXLINESプロパティTextOverflow.ellipsis障害、及びディスプレイを提供されていない場合、テキストの1行部分表示楕円を超え:trueにします。
偽:テキストプロパティをオーバーフローオーバーフロープロパティ値の処理に応じて設定されている場合、デフォルトの処理の過剰な部分を切断、ラインディスプレイ、即ち、単一の行のディスプレイ上ラップしなくてもよいです。プロパティを設定し、オーバーフローがラップできTextOverflow.ellipsis MAXLINES障害である場合、行の最大数は、値MAXLINESプロパティです。

textScaleFactor:テキストフォントスケーリング係数、double型の値。

ロケール:テキストが領域に属する設定することで、フォントはこのプロパティに関連付けすることができる感覚が効果を見ていません。

semanticsLabel:テキストコンポーネント感が[設定]タブのためにある、プロパティが結果を見るためには至っていません。

スタイル:以下のAPI 2.1 TEXTSTYLEにテキストスタイル、特定の参照を設定します。

2.TextStyle

このクラスは、テキストは、テキストのフォントサイズ、フォントの色、フォント行間隔によって提供することができるスタイルを設定するために使用されます。
:共通の属性
、背景、背景色をペイントオブジェクトであるが、これは背景を設定し、私はお勧めかじるないようにいくつかのテキストは、問題のビットのように見えるが表示されます。

:文字の色は、Colorオブジェクトです。

debugLabel:感がタブスタイル、TEXTSTYLEの一部の人間が読める形式の説明のために提供されます。

デコレーション:追加の装飾は、可能な値は次のとおりです:
TextDecoration.none:デフォルト。
TextDecoration.overline:ダッシュで。
TextDecoration.lineThrough:取り消し線。
TextDecoration.underline:下線。
あなたはまた、より多くの装飾的な設定の集まりでTextDecoration.combine()メソッドの通過を呼び出すことができます。

decorationColor:装飾の色を設定するには、Colorオブジェクトです。

decorationStyle::スタイル、オプションの値がセットガーニッシュある
点線のように装飾的なスレッド:TextDecorationStyle.dashed。
TextDecorationStyle.dotted:ラインのドットの装飾的なライン。
TextDecorationStyle.double:装飾ライン2本のライン。
TextDecorationStyle.solid:装飾ライン実線。
TextDecorationStyle.wavy:装飾ライン波線。
設定のコレクションに様々なスタイルを渡しTextDecorationStyle.values()メソッドは、することができます。

fontFamily:カスタムフォント名は、パッケージプロパティで使用します。

以下のためのパッケージ変更カスタムフォントパス:。

fontSize:フォントサイズは、二重の値を入力します。

fontStyle:フォントスタイル、オプションの値は次のとおりです。
FontStyle.ITALIC:イタリック。
FontStyle.normal:ノーマル。

たfontWeight:文字フォント重み値はFontWeight.BOLD(太字)、FontWeight.NORMAL(正常)、加えてFontWeight.w100、FontWeight.w200 ... FontWeight.w900、請求FontWeight.w900等価FontWeight.bold使用されます。

継承:その後、スタイルの親クラスを使用してコントロールを置き換えるtrueの場合、デフォルト値にリセットfalseの場合はスタイルの親が、ヌル値(設定されていない値)を交換するかどうかを一見文書手段、白10pxの、フォントサンセリフ。

letterSpacing:単語の間隔を、二重です。

ロケール:テキストが領域に属する設定することで、フォントはこのプロパティに関連付けすることができる感覚が効果を見ていません。

:テキストの影、影のコレクションです。

TextBaseline:テキストのベースライン、多感覚で使用すべきではないこのような状況を理解していない、2つの値があります
TextBaseline.ideographic:フォントのアルファベット文字の下部の水平方向の配置が。
TextBaseline.alphabetic:表意文字の水平方向の位置合わせのため。
ベースラインの複数のセットを通過TextBaseline.values()メソッドもよいです。

wordSpacing:あなたは言葉を考えるとき、中国と比較すると、フォントの間隔を、double型の値が、テキストコンテンツので、簡単に世界は二つの単語、スペースで区切られていない中国語の単語をあるようにハローとして英語を理解するために、スペースで区切ってください少ないです。

高さ:行の高さ、double型の値は、この属性の最終値は、行の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 TEXTSTYLEは、カバーの属性、スタイルがTEXTSTYLEの使用を指定されていない場合。

認識機能:ジェスチャー認識は、このような使用方法の詳細を学ぶために聞くために使用されるジェスチャーの後ろに、リスナーである必要があります。

子供:息子TextSpan、あなたはより多くを指定することができます。

以下は、テキストコンポーネント作成した2番目のコンストラクタを持つリッチテキストで、デモの属性を設定します。

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