Flutter 文本溢出

原创

Jimmy_Pang 2022-11-01 09:51:40 ©著作权

文章标签 前端 Flutter flutter 滚动效果 文章分类 开源

©著作权归作者所有：来自51CTO博客作者Jimmy_Pang的原创作品，请联系作者获取转载授权，否则将追究法律责任

问题

在 Flutter 中，我们应该怎么使用 Text 挂件来处理文本溢出问题呢？

在这篇文章中，我们将使用不同的方法来解决 Flutter 中文本的溢出问题。

Row(
  children: const [
    Text(
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis temporibus alias eligendi quas ullam atque numquam repudiandae est minima doloribus!",
    ),
  ],
),

当文本占据的位置比 Row 挂件的可用位置多的时候，文本溢出就会发生。

Flutter 文本溢出_flutter

解决方案

1. 使用 Expanded 挂件包裹 Text 挂件

Row(
  children: const [
    Expanded(
      child: Text(
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis temporibus alias eligendi quas ullam atque numquam repudiandae est minima doloribus!",
      ),
    ),
  ],
),

这会使得文本可多行展示：

Flutter 文本溢出_Flutter_02

2. 使用 Expanded 挂件包裹 Text 挂件，并使用 maxLine

Row(
  children: const [
    Expanded(
      child: Text(
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis temporibus alias eligendi quas ullam atque numquam repudiandae est minima doloribus!",
        maxLines: 1,
      ),
    ),
  ],
),

使用 maxLines: 1 使得我们的文本当单行展示，而不是多行完全展示。

Flutter 文本溢出_前端_03

3. 使用 Expanded 挂件包裹 Text 挂件，并使用 Text 挂件的 ellipsis 属性

Row(
  children: const [
    Expanded(
      child: Text(
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis temporibus alias eligendi quas ullam atque numquam repudiandae est minima doloribus!",
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ),
    ),
  ],
),

使用 overflow: TextOverflow.ellipsis，如果文本不在特定的最大宽度内，则超出的范围的字符串将会被替代，如下：

Flutter 文本溢出_滚动效果_04

4. 使用 SingleChildScrollView 挂件包裹 Text 挂件，并被放在 Expended 挂件中，然后设定其水平属性

Row(
  children: const [
    Expanded(
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Text(
          "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis temporibus alias eligendi quas ullam atque numquam repudiandae est minima doloribus!",
        ),
      ),
    ),
  ],
),

这会使得文本在一行滚动展示：

Flutter 文本溢出_前端_05

5. 使用 SingleChildScrollView 挂件包裹 Text 挂件，并被放在 Expended 挂件中，然后设定垂直滚动

Row(
  children: [
    Expanded(
      child: Container(
        height: 60,
        child: const SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Text(
          "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis temporibus alias eligendi quas ullam atque numquam repudiandae est minima doloribus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis temporibus alias eligendi quas ullam atque numquam repudiandae est minima doloribus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis temporibus alias eligendi quas ullam atque numquam repudiandae est minima doloribus!",
          ),
        ),
      ),
    ),
  ],
),

如果文本放在 container中，并设定了高度，就像上面代码，设定了文本垂直滚动效果：

Flutter 文本溢出_Flutter_06