flutter 中的樣式

• flutter 中的樣式

樣式	值
width	320.0
height	240.0
color	Colors.white，Colors.grey[300]
textAlign	TextAlign.center
alignment	Alignment.center
padding	new EdgeInsets.all(16.0)
fontStyle	FontStyle.italic
fontSize	24.0
fontWeight	FontWeight.w900
fontFamily	"Georgia"
shape	BoxShape.circle
color	能夠在Container的 decoration 屬性中設置背景顏色

• 出處：https://flutterchina.club/web-analogs/

• 「Lorem ipsum」文本的默認樣式由bold24Roboto變量定義 以下:

TextStyle bold24Roboto = new TextStyle(
  color: Colors.white,
  fontSize: 24.0,
  fontWeight: FontWeight.w900,
);

• 在Flutter中模擬CSS中max-width屬性，請使用容器的constraints屬性。建立一個新的BoxConstraints來設置minWidth或maxWidth。

• 對於嵌套容器，若是父級的寬度小於子級寬度，則子級容器將自行調整大小以匹配父級。

• 設置絕對位置
  默認狀況下，widget相對於其父widget定位。
  要將widget的絕對位置指定爲x-y座標，請將其嵌套在Positioned widget中， 該widget又嵌套在Stack widget中。

• 旋轉組件
  要旋轉一個widget，將它嵌套在一個Transform中。設置其alignment和origin屬性分別以相對和絕對值指定變換原點。
  對於簡單的2D旋轉，widget在Z軸上旋轉。（度數×π/ 180）

• 縮放組件
  要向上或向下縮放widget，請將其嵌套在Transform中。 並設置其alignment和origin屬性分別以相對和絕對值指定變換原點。
  對於沿x軸的簡單縮放操做，請建立一個新的Matrix4， 標識對象並使用其scale（）方法指定縮放因子。
  當縮放父widget時，全部子widget都會相應地縮放。

• 圓角
  要給矩形添加圓角請使用BoxDecoration對象的borderRadius屬性 。 建立一個新的BorderRadius對象，給該對象指定一個的半徑（會四捨五入）。

• 添加陰影
  在CSS中，您能夠使用box-shadow屬性來快速指定陰影偏移和模糊。
  在Flutter中，每一個屬性和值都單獨指定。使用BoxDecoration的boxShadow屬性建立BoxShadow列表。 您能夠定義一個或多個BoxShadow，它們能夠疊加出自定義陰影深度、顏色等。

• 圓和橢圓
  在CSS中製做一個圓須要將矩形的四條邊的border-radius設置爲50%。
  雖然BoxDecoration的borderRadius屬性支持此方法，但Flutter爲此提供了一個shape屬性, 值爲BoxShape枚舉 。

• 調整文本間距
  在CSS中，經過分別給出letter-spacing和word-spacing屬性的長度值，指定每一個字母或單詞之間的空白間距。長度單位能夠是px，pt，cm，em等。
  在Flutter中，您將空白區域指定爲Text的TextStyle的letterSpacing和wordSpacing屬性， 值爲邏輯像素（容許爲負值）

• 轉換文本
  在HTML / CSS中，您能夠使用text-transform屬性執行簡單大小寫轉換
  在Flutter中，使用 dart:core庫中的String 類的方法來轉換Text的內容。
  "Lorem ipsum".toUpperCase()

• 進行內聯格式更改
  Text widget控件，能夠用相同的格式顯示文本。 要顯示使用多個樣式的文本（在本例中爲帶有重點的單個單詞），請改用RichText。 它的text屬性能夠指定一個或多個可單獨設置樣式的TextSpan widget。

• 建立文本摘要 摘錄顯示段落中文本的最初行，而且一般使用省略號處理溢出文本。在HTML / CSS中，摘要不能超過一行。截斷多行須要一些JavaScript代碼。 在Flutter中，使用Text小部件的maxLines屬性來指定要包含在摘要中的行數，以及用於處理溢出文本的屬性overflow。