説明

最初のレンダリング

プロジェクトでは、@およびトピックがあり、あなたが編集しているときにエコーする必要がありますが、テキストの一部にTextFieldの公式のネイティブサポートは、異なるスタイルを定義し、そのパッケージはありません。？

注：これは、入力ボックス内の画像の表示をサポートしていないリッチテキストプラグインではありません、だけのTextField拡張、許可サポートカスタムTextSpan。

この記事では、プロジェクトに直接適用する場合は、次の方法で直接導入することができ、アイデアのパッケージについて説明します。

プラグ住所：https://pub.dev/packages/text_span_field

text_span_field：1.0.0

使用方法：

TextSpanField（
    コントローラ：TextEditingController（
      テキスト： "これは、あなたが彼の色をテスト・メッセージが表示される" 、
    ）、
    rangeStyles：[ 
      RangeStyle（
        範囲：TextRangeの（スタート： 0、終了：1 ）、
        スタイル：TEXTSTYLE（色：カラー（ 0xFF5BA2FF ））、 
      ）、
      RangeStyle（
        範囲：TextRangeの（スタート：。3、エンド:. 4 ）、
        スタイル：TEXTSTYLE（色：カラー（ 0xFF9C7BFF ））、 
      ）、
    ]、 
）、

テキスト

プロジェクト住所：https://github.com/JiangJuHong/FlutterTextSpanField

プロジェクト構造：

まず第一に、私たちは、ソースコードを表示するレンダリングされたビルドに直接ジャンプする必要はTextFieldに展開したい、私たちは、次のコードを見つけました：

次のようにTextFieldの内部使用はEditableText、公式サイトのフラッターであります：

「基本的なテキスト入力フィールド。」

EditableText内部コンポーネントは、書き換え可能な方法buildTextSpan有するデフォルトが処理されていないコンテンツは、入力ボックスに表示方法を定義するには、我々は異なるコンテンツを表示する必要があり、この方法は、必要に応じて書き換えて包装する必要があります。

最初のステップ：buildTextSpanプロパティを書き換えると継承EditableText

私たちは「EditableTextSpan」と呼ばれ、EditableText継承されたコンポーネントを作成したように、コードが書き換えられた後、次のように、buildTextSpanを書き換えます：

コード住所：https://github.com/JiangJuHong/FlutterTextSpanField/blob/master/lib/editable_text_span.dart

前記rangeStyleのカスタムスタイルは利便性、rangeStyleコードを使用して、クラスパスコンポーネントの範囲：

1インポート' パッケージ：フラッタ/ cupertino.dart ' ;
 2  
。3  /// スタイル、異なるスタイルの異なる所定の範囲の範囲
。4  クラス RangeStyle同等<RangeStyle>を延び{
 5    RangeStyle（{@が必要この .Range、この.styleを}）。
 6  
。7    /// 範囲
8    ファイナル範囲TextRangeの;
 9  
10    /// 指定されたスタイル
。11が   最終TEXTSTYLEスタイル、
 12は 
13である   @Override
 14    INT のcompareTo（RangeStyle OTHER）{
 15      リターンrange.start.compareTo（other.range.start）。
16    }
 17  
18    @Override
 19    列のtoString（）{
 20      リターン ' RangeStyle（範囲：$範囲、スタイル：$スタイル）' 。
21    }
 22 }

コード住所：https://github.com/JiangJuHong/FlutterTextSpanField/blob/master/lib/range_style.dart

BuildTextSpan主要なビジネスロジックを書き換えるTextRangeの定義された範囲、異なる用途に応じてTEXTSTYLE

ステップ2：TextFieldを再パッケージ

buildTextSpan書き換えが完了した後、我々はこれらの手順を実行する必要があるので、デフォルトのファイルのTextFieldと、私たちは、書き換え後に使用することはありません。

1.コピーしTextSpanFieldという名前のTextFieldアウトファイル、そして代替方法EditableTextビルドEditableTextSpanに。

開示されたrangeStyle TextSpanField特性2.、およびEditabledTextSpanに渡されます

コード住所：https://github.com/JiangJuHong/FlutterTextSpanField/blob/master/lib/text_span_field.dart

終了

この時点で、我々は完全なコンポーネントのパッケージを持っている、あなたは異なる範囲について異なるレンダリングスタイルを実現することができます。

どのように使用するには：

TextSpanField（
    コントローラ：TextEditingController（
      テキスト： "これはテストメッセージである、あなたが彼の色を見る"、 
    ）、
    rangeStyles：[ 
      RangeStyle（
        範囲：TextRangeの（スタート：0、終了：1）、
        スタイル：TEXTSTYLE（色：カラー（ 0xFF5BA2FF））、 
      ）、
      RangeStyle（
        範囲：TextRangeの（スタート:. 3、エンド:. 4）、
        スタイル：TEXTSTYLE（色：カラー（0xFF9C7BFF））、 
      ）、
    ]、 
）、

この記事は正確にコードの各行を説明していないので、ソースコードは、一緒に研究の組み合わせを必要とするかもしれない、ソースアドレスは次のとおりhttps://github.com/JiangJuHong/FlutterTextSpanField/tree/master/lib

コンテンツは、プラグインとしてパッケージ化された text_span_field はなく、理論的にテキストフィールドを持つように互換性の一次コンテンツの変更、、、テキストフィールドのサポート業務に起因し、またTextSpanFieldをサポートします。

マイホーム：https://github.com/JiangJuHong

フラッターは、ユーザー（TextFieldのTextSpanを追加する）、@、テキストフィールド（カスタマイズ可能）、同様のトピックの##のマイクロブログの（スタイルの）さまざまなスタイルを実現します

説明

テキスト

最初のステップ：buildTextSpanプロパティを書き換えると継承EditableText

ステップ2：TextFieldを再パッケージ

終了

おすすめ