Web 開發者如何理解 Flutter 佈局之 —— 1. Text

弘樹發表於2019-10-15
WebFlutter

文字元件。

  • 通過 TextAlign(文字對齊) 設定對齊方式

  • 通過 TextOverflow(文字溢位) 設定溢位模式

  • 通過 TextStyle(文字樣式) 設定樣式

  • 通過 TextDirection(文字方向) 設定閱讀方向

1、對齊

1.1、右對齊

Text(
  "The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.",
  textAlign: TextAlign.right
)
複製程式碼
  • 下列示例中我們針對 html 內聯樣式進行了筆者並不推薦的縮排風格。

在後續的例子中依舊可能會有這種情況出現。 如果您閱讀至此提示到之後的章節, 除非另有說明, 我們認為您已經知曉這是為了您在視覺上能更直觀的理解而不得已採用的寫法, 後續將不再針對這類縮排問題單獨進行贅述說明。

等效於:

<div
  style=
  "text-align: right;"
>
  The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.
</div>
複製程式碼

*注: 若使用Text Widget,但文字不足以撐滿一行,則文字以行級樣式展現,由於未設寬度,因此不會應用右對齊的效果。

2、溢位處理

2.1、裁切(單行)

new Text(
  "The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.",
  maxLines: 1,
  overflow: TextOverflow.clip
)
複製程式碼

等效於:

<div
  style=
  "
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  "
>
  The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.
</div>
複製程式碼

2.2、裁切(多行)

new Text(
  "The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.",
  maxLines: 2,
  overflow: TextOverflow.clip
)
複製程式碼

等效於:

<div
  style=
  "
    --lines: 2;
    --line-height: 1.3em;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lines);
    overflow: hidden;
    line-height: --line-height;
    max-height: calc(var(--lines) * var(--line-height));
  "
>
  The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.
</div>
複製程式碼

2.3、省略(單行)

new Text(
  "The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.",
  maxLines: 1,
  overflow: TextOverflow.ellipsis
)
複製程式碼

等效於:

<div
  style=
  "
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  "
>The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.</div>
複製程式碼

2.4、省略(多行)

new Text(
  "The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.",
  maxLines: 2,
  overflow: TextOverflow.ellipsis
)
複製程式碼

等效於:

<div
  style=
  "
    --lines: 2;
    --line-height: 1.3em;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lines);
    overflow: hidden;
    line-height: --line-height;
    max-height: calc(var(--lines) * var(--line-height));
  "
>
  The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.
</div>
複製程式碼

3、樣式

new Text(
  "Hello Flutter!",
  style: TextStyle(
    //顏色
    color: new Color(0xFFFF6600),
    //字型尺寸
    fontSize: 20.0,
    //下劃線
    decoration: TextDecoration.underline,
    //裝飾型別:虛線
    decorationStyle: TextDecorationStyle.dashed,
    //裝飾顏色
    decorationColor: new Color(0xFF0000FF),
    //文字樣式: 傾斜
    fontStyle: FontStyle.italic,
    //投影:
    shadows: [
      new Shadow(
        color: new Color(0xFF0000FF),
        offset: Offset(1, 2)
      )
    ]
  )
)
複製程式碼

等效於:

<div
  style=
  "
    color: #FF6600FF;
    font-size: 20px;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: #0000FFFF;
    font-style: italic;
	text-shadow: 1px 1px 0 #0000FF;
  "
>
  Hello Flutter!
</div>
複製程式碼

4、方向

4.1、從右至左

new Text(
  "Hello Flutter!",
  textDirection: TextDirection.rtl
)
複製程式碼

等效於:

<div
  style=
  "direction: rtl;"
>
  Hello Flutter!
</div>
複製程式碼

參考文獻

[1] Flutter基礎視訊教程 技術胖 2018年11月 P7 06.Text Widget 使用 www.bilibili.com/video/av358…

[2] Flutter 學習之路 - Text 控制元件 2019年02月 Text Style 屬性 www.jianshu.com/p/23308cadc…

相關文章