Flutter：在文本小部件中添加新行

Question

我知道有很多這樣的問題，但所有這些答案都沒有幫助我。 我從我的 API 后端收到兩條文本，當我顯示它們時，一切正常，直到其中一個詞太長。 在那種情況下，我沒有設法自動跳到新行。 這是我的代碼的相關部分：

Text(
     item.brand + '\n' + item.model,
     style: const TextStyle(
     fontSize: 18,
     fontFamily: 'Avenir',
     fontWeight: FontWeight.bold),
     ),

有人可以幫我嗎？ 太感謝了！

Answer 1

如果我以正確的方式理解您的問題，那么當文本太長時您想跳到新行。 在這種情況下，您必須將文本包裝在具有定義大小的父窗口小部件中，例如 SizedBox：

const SizedBox(
  height: 200,
  width: 200,
  child: Text(
     item.brand + '\n' + item.model,
     style: const TextStyle(
     fontSize: 18,
     fontFamily: 'Avenir',
     fontWeight: FontWeight.bold),
     ))

當文本長度超過 200 像素時，文本現在將跳轉到新行

Answer 2

我不確定這是否能回答您的問題，但您可以嘗試使用下面的這個小部件

Text.rich(TextSpan(
    text: "${item.brand}\n",
    style: const TextStyle(
        fontSize: 18, fontFamily: 'Avenir', fontWeight: FontWeight.bold),
    children: [
      TextSpan(
        text: "${item.model}",
        style: const TextStyle(
            fontSize: 18,
            fontFamily: 'Avenir',
            fontWeight: FontWeight.bold),
      ),
    ]));

在此小部件中，您可以在文本中添加不同的 styles，並使用${}運算符允許您用\n換行。 或者您可以在Text小部件中執行此操作。

Text(
     "${item.brand}\n${item.model}",
     style: const TextStyle(
     fontSize: 18,
     fontFamily: 'Avenir',
     fontWeight: FontWeight.bold),
     ),

在 dart 中，您可以使用 + 運算符連接字符串，但這不是必需的

Answer 3

試試下面的代碼希望它對你有幫助。

在 Column 中聲明兩個Text小部件：

 Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Your First Text', //just change your text like item.brand
          style: TextStyle(
            fontSize: 18,
            fontFamily: 'Avenir',
            fontWeight: FontWeight.bold,
          ),
        ),
        Text(
          'Your Second Text', //just change your text like item.model
          style: TextStyle(
            fontSize: 18,
            fontFamily: 'Avenir',
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    ),

使用上述小部件的結果屏幕->

在 Text 小部件中也使用\n

Text(
          'Your First Text' + '\n' + 'Your Second Text',
          style: TextStyle(
            fontSize: 18,
            fontFamily: 'Avenir',
            fontWeight: FontWeight.bold,
          ),
        ),