如何在Flutter中处理Stack内Column中Row的溢出？

Question

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

文本位于填充内，填充位于行内，行位于列内，列位于容器内，容器位于定位内，定位位于堆栈内，堆栈位于卡片内（虽然我认为卡片部分与问题无关）。

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

我尝试使用Flexible（或Expanded） Widget包装Text、Row、Column Widget等，但是出现错误消息，提示“Flexible widgets must be placed inside Flex widgets”。我相信我缺少一些关于正在使用的Widgets的知识，但是我无法在flutter dev网站上找到这些知识，因此我决定在这里发布问题。这是Card项的代码，在其中Stack位于（我没有粘贴整个类，因为其他方法和构造函数不需要复制有关问题的错误，并且我不希望人们通过阅读与问题无关的代码而感到困惑）：

@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)),
    );
  }

我希望有人能回答我的问题，因为我在互联网上找不到合适的答案。提前感谢所有参与回答的人！

- LeoLyo

---

你是否已经给容器小部件分配了高度和宽度属性？ - biniyam112

Answer 1

经过一些尝试，需要在有问题的小部件上面直接放置Padding小部件，在行（或列）下方直接放置一个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),
                          ),
                        ),
                      )
                    ],

希望这能帮助那些遇到相同错误的人。 ^_^

- LeoLyo