《Web 开发者如何理解 Flutter 布局》

本系列旨在帮助 Web 前端开发者更好的理解 Flutter 的布局组件,只做对应的语法映射描述和最基本的技术说明。

---

文本组件。

• 通过 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、裁切(单行)

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、裁切(多行)

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、省略(单行)

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、省略(多行)

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、样式

Text(
  "Hello Flutter!",
  style: TextStyle(
    //颜色
    color: Color(0xFFFF6600),
    //字体尺寸
    fontSize: 20.0,
    //下划线
    decoration: TextDecoration.underline,
    //装饰类型:虚线
    decorationStyle: TextDecorationStyle.dashed,
    //装饰颜色
    decorationColor: Color(0xFF0000FF),
    //文本样式: 倾斜
    fontStyle: FontStyle.italic,
    //投影:
    shadows: [
      Shadow(
        color: Color(0xFF0000FF),
        offset: Offset(1.0, 2.0)
      )
    ]
  )
)

等效于:

<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 #0000FFFF;
  "
>
  Hello Flutter!
</div>

4、方向

4.1、从右至左

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…