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

Question

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

文本在行内的行内的列内的容器内的位置内的堆栈内的卡片内（尽管我假设卡片部分与问题无关）。

问题如下：Text Widget内的String一旦超过一定字符数就会溢出，如下图所示：

我尝试使用灵活（或扩展）小部件包装文本、行、列小部件等，但我收到一条错误消息，提示“灵活小部件必须放在 Flex 小部件内”。我很确定我对我正在使用的小部件缺乏一些知识，但是我无法在颤振开发网站上找到这些知识，因此我决定在这里发布问题。这是 Stack 所在的 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 小部件（直接在有问题的小部件上方，直接在行（或列）下方的一个灵活（或扩展）小部件内） . 除此之外，可以而且应该添加到 Text 小部件的是溢出行为，例如以下解决方案：

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

希望这可以帮助其他偶然发现相同错误的人。 ^_^