如何使長文本水平滾動以避免Flutter中的Renderflex溢出

Question

正如您在我的應用程序中看到的，第二個Text()小部件太長並溢出屏幕。
我想要實現的是在Text()上有一個 animation 自動水平連續滾動，以便用戶閱讀。

請注意，animation 應該只在溢出屏幕的小部件上實現（在我的情況下是在第二個文本小部件上）。

這是我的代碼：

InkWell(
  onTap: () {/* do something */},
  child: Container(
    width: 500.0,
    child: Row(
      children: [
        Icon(icon),
        const SizedBox(width: 20.0),
        Text(title, style: const TextStyle(fontSize: 25.0)),
      ],
    ),
  )

Answer 1

我還不能發表評論，但我相信這可以幫助你:)

無限滾動文本的 Flutter 小部件。 提供許多自定義，包括自定義滾動方向、持續時間、曲線以及每輪后的暫停。

Answer 2

您可以將Text小部件包裝在SingleChildScrollView中，例如：

SingleChildScrollView(
 scrollDirection: Axis.horizontal,
 child: Text(
   'Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very Very long string',
  ),
)

在您的情況下，您可以使用SingleChildScrollView包裝Row 。

Answer 3

如果您不想使用任何第三方 package 並且需要一個簡單的水平滾動小部件，您可以將您的Row包裝在SingleChildScrollView中，如下所示：

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [
      Text(veryLongText),
    ],
  ),
)

Answer 4

用SingleChildScrollView包裝使其可滾動，然后用Expanded包裝以獲得可用大小。

InkWell(
    onTap: () {/* do something */},
    child: Container(
      width: 500.0,
      child: Row(
        children: const [
          Icon(Icons.ac_unit),
          SizedBox(width: 20.0),
          Expanded(
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              // primary: false, // may needed
              child: Text(
                "title lonmggggggggggggssssssssssasdasdaasdasds323423sss756g",
                style: TextStyle(fontSize: 25.0),
              ),
            ),
          ),
        ],
      ),
    ))