时间戳

首页 > 解决方案 > 如何获得文本的交错网格视图

flutter - 如何获得文本的交错网格视图

问题描述

我正在从在线 api 中提取书籍，但是这个 api 将其作为句子列表返回。我想在容器中显示这些句子，让它看起来像一个普通的段落，但每个句子都是可点击的。

预期结果： 每个都是一个单独的容器，以便可点击

Sentence number one. This is
sentence number two. And
this is sentence number three.
This sentence 4. This is 
sentence number 5

我尝试加入字符串，并将它们全部放在一个 Text 小部件中，这看起来像预期的那样，但失去了对每个句子的控制。我还尝试将每个句子放在 Text 小部件中，并用 Wrap() 小部件包装它们。

包装小部件结果

Sentence number 1. This is 2.
This is sentence number 3 and
it's long.
This is sentence number 4.
This is 5.
This is sentence number 6 and
its longer than all of them.

它离我们又近了一步，当句子长于屏幕宽度时，它开始看起来更像一个列表视图，我试图找到一种方法将这些文本小部件分成两部分，而不是在屏幕之外其中默认为 2 行。我想知道它是否可能，如果可能，如何？

标签： flutterflutter-layout

解决方案

List<TextSpan> reasonList = [];
                  snapshot.data!.forEach((element) {
                    reasonList.add(TextSpan(text: '${element.sentence}'));
                  });
                  return Container(
                    child: RichText(
                      text: TextSpan(
                          children: reasonList,
                          style: TextStyle(
                              color: Colors.black, fontSize: 16)),
                    ),
                  );

推荐阅读