ListTile：在结尾的小部件中换行文字

Question

我试图使用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,
          ),
        ),
      ),
    ],
  ),
),

但是然后的问题是，即使文本被分成两行，它使用的空间也比需要的多，所以剩下的空间是空的：

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

Answer 1

Flexible展开以填充所有可用空间。因此，如果您希望两个小部件都具有相同的空间，则可以使用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代替“弹性”>