如何使长文本水平滚动以避免Flutter中的Renderflex溢出[重复]答案

【问题标题】：How to make a long text horizontally scrollable to avoid Renderflex overflow in Flutter [duplicate]如何使长文本水平滚动以避免Flutter中的Renderflex溢出[重复]
【发布时间】：2022-01-13 19:13:28
【问题描述】：

正如您在我的应用程序中看到的那样，第二个 Text() 小部件太长并溢出屏幕。
我想要实现的是在Text() 上制作一个动画，它会自动水平连续滚动，以便用户阅读。

请注意，动画应该只在溢出屏幕的小部件上实现（在我的例子中是在第二个文本小部件上）。

这是我的代码：

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)),
      ],
    ),
  )

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

我还不能发表评论，但我相信this 可以帮助你:)

无限滚动文本的 Flutter 小部件。提供许多自定义，包括自定义滚动方向、持续时间、曲线以及每轮后暂停。

【讨论】：

谢谢，但我想要的是只为那些太大的小部件设置动画，我想我不知道小部件是否会溢出布局以在其上实现此动画
Marquee 正是那个动画。ATM 它甚至可以滚动单个单词字符串，但解决方案是可用的github.com/MarcelGarus/marquee/issues/25#issuecomment-623213095

【解决方案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。

【讨论】：

同一个答案，不知道谁先发帖，你还是我
非常感谢，但这不起作用，首先，你应该用Expanded()包裹你的SingleChildScrollView()，否则会报错，我想实现的是让文本仅当文本过大时自动滚动

【解决方案3】：

如果您不想使用任何第三方软件包并且需要一个简单的水平滚动小部件，您可以将您的 Row 包装在 SingleChildScrollView 中，如下所示：

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

【讨论】：

非常感谢，但这不起作用，首先，你应该用Expanded()包裹你的SingleChildScrollView()，否则会报错，我想实现的是让文本仅当文本过大时自动滚动
@arrmani88 不，它不会给你一个错误，因为我没有在任何 flex 小部件中使用 SingleChildScrollView，所以我不需要将它包装在 Expanded 或 @ 987654330@。我知道您需要字幕效果，所以这个问题肯定不会回答您帖子的内容，但它确实回答了您发布的标题。因此，如果您打算更改帖子的标题，我将删除我的答案。谢谢

【解决方案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),
              ),
            ),
          ),
        ],
      ),
    ))

【讨论】：

非常感谢，但我只想在小部件上应用动画，这会溢出布局，并且动画应该自动无限滚动
动画结束？