Flutter：如何将ListView.builder的文本拼接为单段长文本？

你不需要用ListView.builder逐个生成TextScroll，而是先把所有需要滚动的文本拼接成一个长字符串，再传给单个TextScroll组件即可，这样就能实现整段文本滚动的效果。

修改后的代码如下：

class TopNewsBar extends StatelessWidget {
  const TopNewsBar({super.key});

  @override
  Widget build(BuildContext context) {
    var constraints = MediaQuery.of(context).size.width;
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: constraints * .03),
      child: Container(
        decoration:
            BoxDecoration(color: grey, borderRadius: BorderRadius.circular(14)),
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 14.0, horizontal: 25),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Expanded(
                flex: 1,
                child: Text(
                  'Trending Now: ',
                  style: h3b.copyWith(color: red),
                ),
              ),
              Flexible(
                flex: 11,
                child: StreamBuilder(
                  stream: FirebaseFirestore.instance
                      .collection("Posts")
                      .orderBy("timestamp", descending: true)
                      .snapshots(),
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      // 取前5条帖子的标题，拼接成分隔后的长文本
                      final posts = snapshot.data!.docs.take(5);
                      final fullScrollText = posts
                          .map((post) => post["title"])
                          .join("    •    ");
                      
                      // 用单个TextScroll包裹拼接好的长文本
                      return TextScroll(fullScrollText);
                    } else if (snapshot.hasError) {
                      return Center(
                        child: Text('Error${snapshot.error}'),
                      );
                    } else {
                      return const Center(
                        child: CircularProgressIndicator(),
                      );
                    }
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

修改说明 #

• 去掉了ListView.builder，改为直接处理数据：用take(5)获取前5条帖子，通过map提取每个帖子的标题，最后用join方法把所有标题用指定分隔符（" • "）拼接成一个长字符串。
• 把拼接好的fullScrollText直接传给单个TextScroll组件，这样就能实现整段滚动效果，不会再出现列表形式的多个滚动文本。

内容的提问来源于stack exchange，提问作者Ola Michalska