flutter Container組件和Text組件

在開始之前，我們先寫一個最簡單的入口文件：

   

后面，都是在這個結構的基礎上面完成的。

 由於Container組件和Text組件都是寫在body里面的，所以下面，先將body抽離成一個組件的形式。

 Container組件

在flutter里面Container組件是一個容器組件，類似於html中的div一樣。

在Center組件里面添加Container組件，然后再添加Text組件，和上面的效果是一樣的。

Container、Text這些自定義組件的本質都是類，有很多可選的命名參數，在Conrainer里面的常用參數包括：

• alignment ：對齊方式
• decoration：背景和邊框屬性
• margin：
• padding
• transfrom
• height
• width
• child

   

Text組件

 在Text組件中常用的參數如下：

• textAlign：文本對齊方式（center 居中，left 左對齊，right 右對齊，justfy 兩端對齊）
• textDirection：文本方向（ltr 從左至右，rtl 從右至左） 
• overflow：文字超出屏幕之后的處理方式（clip裁剪，fade 漸隱，ellipsis 省略號） 
• textScaleFactor：字體顯示倍率
• maxLines：文字顯示最大行數 
• style：字體的樣式設置

其中TextStyle又包括下面這些可選參數：

• decoration：文字裝飾線（none 沒有線，lineThrough 刪除線，overline 上划線，underline 下划線）
• decorationColor：文字裝飾線顏色
• decorationStyle ：文字裝飾線風格（[dashed,dotted]虛線，double 兩根線，solid 一根實線，wavy 波浪線） 
• 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,
          ),
    );
  }
}