テキストフラッタコンテナコンポーネントとアセンブリ

我々が開始する前に、のは、単純なエントリファイルを書いてみましょう：

   

その後、上記構造物の基礎が完成されます。

 テキストコンテナコンポーネントのでアセンブリおよび内側本体内に書かれているので、以下では、第1の本体要素の形に引き込ま。

 コンテナコンポーネント

容器アセンブリたフラッタでのdiv HTMLと同様に、容器アセンブリです。

容器アセンブリ内部Centerコンポーネントを追加し、[テキストコンポーネントを追加し、上記の効果は同じです。

基本的に自己組織化されているコンテナ、テキストクラス定義、そこに多くのオプションの名前付きパラメータは、ある構成Conrainerで使用されるパラメータ：

• アライメント：アライメント
• 装飾：背景と境界のプロパティ
• マージン：
• パディング
• transfrom
• 高さ
• 幅
• 子

   

テキストコンポーネント

 次のパラメータで使用されるテキストコンポーネント：

• textAlign：テキストの配置（センター中心に整列左、右、または右に揃えjustfyアラインメントを左）
• textDirection：テキストの方向（左から右へLTR、左へRTL） 
• オーバーフロー：画面を超えた後、ワード処理モード（クリップカット、フェード、フェード、省略省略記号） 
• textScaleFactor：フォント倍率
• MAXLINES：テキスト表示の最大行数 
• スタイル：フォントスタイルの設定

前記TEXTSTYLEと以下のようなオプションのパラメータ：

• 装飾：テキストの装飾ライン（なしなしライン、lineThroughラインスルー、上線のダッシュ、下線下線）
• decorationColor：テキスト装飾線の色
• decorationStyle：テキストスタイルの装飾ライン（[破線、点線]点線、二重の二行、実線実線、波線波線） 
• wordSpacing：言葉のギャップ、それが負の場合（、単語がよりコンパクトになります
• letterSpacing：文字のクリアランス（負の場合は、文字がよりコンパクトになります）
• fontStyle ：文字样式（italic 斜体，normal 正常体）
• fontSize 
• color 
• fontWeight 

    

 

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title:Text("flutter demo")
        ),
        body:HomeContent() 
      )
    );
  }
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
          child: Container(
              child: Text(
                'flutter Container组件和Text组件，flutter Container组件和Text组件，flutter Container组件和Text组件',
                textAlign:TextAlign.left,
                overflow:TextOverflow.ellipsis ,
                // overflow:TextOverflow.fade ,
                maxLines: 2,
                textScaleFactor: 1.8,
                style:TextStyle(
                  fontSize: 16.0,
                  color:Colors.red,
                  // color:Color.fromARGB(a, r, g, b)
                  fontWeight: FontWeight.w800,
                  fontStyle: FontStyle.italic,
                  decoration:TextDecoration.lineThrough,
                  decorationColor:Colors.white,
                  decorationStyle: TextDecorationStyle.dashed,
                  letterSpacing: 5.0
                )
              ),
              height: 300.0,
              width: 300.0,
              decoration: BoxDecoration(
                color: Colors.yellow,
                border: Border.all(
                  color: Colors.blue,
                  width: 2.0
                ),
                borderRadius: BorderRadius.all(
                //  Radius.circular(150),    //圆形
                  Radius.circular(10),  
                )
              ),
              // padding:EdgeInsets.all(20),
              // padding:EdgeInsets.fromLTRB(10, 30, 5, 0)
              margin: EdgeInsets.fromLTRB(10, 30, 5, 0),
              // transform:Matrix4.translationValues(100,0,0)
              // transform:Matrix4.rotationZ(0.3)
              // transform:Matrix4.diagonal3Values(1.2, 1, 1)
              alignment: Alignment.bottomLeft,
          ),
    );
  }
}