ListTile：将文本包装在尾随小部件中答案

【问题标题】：ListTile: Wrap text in trailing widgetListTile：将文本包装在尾随小部件中
【发布时间】：2019-11-03 12:39:06
【问题描述】：

我试图使用 ListTile 在左侧显示一个小标题，然后在尾部小部件中显示一个较长的文本。如果没有足够的水平空间，我的想法是让尾随文本分成多行。

我还尝试使用以下代码创建自己的图块：

Container(
  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(right: 12),
        child: Text(
          "Campus",
          style: TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.w700,
          ),
        ),
      ),
      Text(
        "20h course - New students -",
        style: TextStyle(
          fontSize: 15,
          fontWeight: FontWeight.w400,
        ),
      ),
    ],
  ),
),

在 Pixel 2 XL 模拟器中使用此代码，因为有足够的空间，所以一切都与预期的一样：

但是当我在 Nexus One 模拟器中尝试它时，由于它的大小，这里是输出：

为了让文字分成多行，我把右边的文字包裹成一个灵活的小部件：

Container(
  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(right: 12),
        child: Text(
          "Campus",
          style: TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.w700,
          ),
        ),
      ),
      Flexible(
        child: Text(
          "20h course - New students -",
          style: TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.w400,
          ),
        ),
      ),
    ],
  ),
),

但问题是，即使文本被分成两行，它使用的空间也比需要的多，所以还有空白空间：

我也尝试使用对齐小部件将文本移动到末尾，但也没有运气。有什么想法吗？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

用容器包裹你的文本，并给它左对齐或右对齐。然后重要的部分是，将textWidthBasis: TextWidthBasis.longestLine, 添加到您的文本中。代码：

Container(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(right: 12),
                  child: Text(
                    "Campus",
                    style: TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                ),
                Flexible(
                  child: Container(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      "20h course - New students - sd f sdfsddssdfsdfs dfs df sf sdf sdf ",
                      style: TextStyle(
                        fontSize: 15,
                        fontWeight: FontWeight.w400,
                      ),
                      textWidthBasis: TextWidthBasis.longestLine,
                    ),
                  ),
                ),
              ],
            ),
          ),

【讨论】：

你帮我节省了时间

【解决方案2】：

Flexible 扩展以填充所有可用空间。因此，如果您希望两个小部件具有相同的空间，您可以使用灵活的包装。您也可以使用 softWrap 为您的文本。

Container(
  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Flexible(
        child: Padding(
          padding: const EdgeInsets.only(right: 12),
          child: Text(
            "Campus",
            style: TextStyle(
              fontSize: 15,
              fontWeight: FontWeight.w700,
            ),
          ),
        ),
      ),
      Flexible(
        child: Text(
          "20h course - New students -20h course - New students -20h course - New students -20h course - New students -20h course - New students -",
          softWrap: true,
          style: TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.w400,
          ),
        ),
      ),
    ],
  ),
),

你也可以用Expanded代替`Flexible

【讨论】：