如何处理Flutter中堆栈内部列中行的溢出？

Question

我正在尝试创建一个简单的堆栈列表，由于特定的设计者原因，该列表具有以下结构：

[位于卡片内部堆栈内的容器内容器内的列内的行内的填充内的文本（尽管我认为卡片部分与问题无关]。

问题如下：一旦文本小部件内的字符串超过一定数量的字符，它就会溢出，如下图所示：

我曾尝试使用“灵活（或扩展）”小部件包装“文本”，“行”，“列”小部件等，但是收到一条错误消息，提示“必须将灵活小部件放置在Flex小部件中”。我敢肯定，我对所使用的Widget缺乏一些了解，但是我在flutter开发者网站上找不到这些知识，因此我决定在此处发布问题。这是堆栈所在的Card项目的代码（我没有粘贴整个类，因为不需要其他方法和构造函数来复制有问题的错误，并且我不希望人们对此感到困惑阅读与问题无关的代码）：

@override
  Widget build(BuildContext context) {
    return Card(
      child: Stack(
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            padding: EdgeInsets.only(bottom: 20.0),
            decoration: BoxDecoration(
              border: Border.all(width: 3.5, color: Colors.black87),
              shape: BoxShape.circle,
              image: DecorationImage(
                fit: BoxFit.cover,
                image: this.image ??
                    AssetImage(
                      'images/rolph.jpg',
                    ),
              ),
            ),
          ),
          Positioned(
            bottom: 0.0,
            left: 0.0,
            right: 0.0,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border(
                    top: BorderSide(width: 3.0, color: Colors.black),
                    bottom: BorderSide(width: 1.0, color: Colors.black),
                    right: BorderSide(width: 1.0, color: Colors.black),
                    left: BorderSide(width: 1.0, color: Colors.black)),
              ),
              child: Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(left: 2.0),
                        child: Text(
                          this.name,
                          overflow: TextOverflow.clip,
                          style: TextStyle(fontSize: 18.0),
                        ),
                      )
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(bottom: 2.0, left: 3.0),
                        child: Text(
                          this.email,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(fontSize: 16.0),
                        ),
                      )
                    ],
                  )
                ],
              ),
            ),
          ),
          _shouldIShowNotificationBubble(),
          Positioned(
            left: 0.0,
            right: 0.0,
            top: 0.0,
            bottom: 0.0,
            child: Container(
              color: Colors.transparent,
              child: InkWell(
                highlightColor: Colors.deepPurple,
                onTap: this.onTap ??
                    () {
                      debugPrint("Ink is, well, clicked.");
                    },
              ),
            ),
          )
        ],
      ),
      color: Colors.white,
      elevation: 4.0,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
    );
  }

我希望有人能回答我的问题，因为我无法在任何地方的互联网上找到合适的人。预先感谢所有参与回答的人！

Answer 1

因此，在进行了一些试验之后，需要在此处完成的操作是将Padding小部件（位于有问题的小部件的正上方，而位于Flexible（或扩展的）小部件内的Row（或Column）的正下方）。除此之外，可以而且应该添加到“文本”小部件中的是溢出行为，例如以下解决方案：

                Row(
                    children: <Widget>[
                      Flexible(
                        child: Padding(
                          padding: EdgeInsets.only(left: 2.0),
                          child: Text(
                            this.name,
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(fontSize: 18.0),
                          ),
                        ),
                      )
                    ],

希望这有助于其他偶然发现相同错误的人。 ^ _ ^