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小部件（位于有问题的小部件正上方，Row（或列）的正下方，位于Flexible（或Expanded）小部件内的位置）除此之外，可以并且应该添加到“文本”小部件中的是溢出行为，例如以下解决方案：

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

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

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

1 个答案: