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

Question

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

Padding 内 Padding 内 Column 内 Container 内 Positioned inside a Stack 内的文本（尽管我认为 Card 部分与问题无关）。

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

我试过用一个灵活的（或扩展的）小部件包装文本、行、列小部件等，但我收到一条错误消息，指出“灵活的小部件必须放置在 Flex 小部件内”。我很确定我对我正在使用的小部件缺乏一些知识，但是我无法在 flutter dev 网站上找到这些知识，因此我决定在这里发布问题。这是 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 小部件（直接在有问题的小部件上方和直接在 Row（或 Column）下方的一个 Flexible（或 Expanded）小部件内。随着也就是说，可以并且应该添加到 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),
                          ),
                        ),
                      )
                    ],

希望这可以帮助那些偶然发现同样错误的人。^_^