将长文本包装到容器中,导致 Flutter 溢出

All*_*nzo 1 overflow dart flutter

我正在为我的应用程序创建一个通知中心,它包含一些标题和正文的长字符串,它总是导致溢出,我尝试使用扩展小部件,以及以下堆栈溢出问题:问题 1 ,问题 2但我不能将它应用到我的代码中,现在它是这样的:

在此处输入图片说明

我从我的 firebase cloud firestore 获取文本,并使用列表视图输出文本。

标题文字是这样的:“艾伦Indefenzo已取消同意您访问他/她的数据”
正文是这样的:“他/她已经删除了所有的访问,您将不再能够查看/修改他的数据,再次访问要求用户再次向您提供他/她的特殊代码。”

这是我的代码:

Container(
        color: Colors.white,
        child: StreamBuilder(
          stream: db
              .collection('users')
              .document(userData.userID)
              .collection('notifications')
              .snapshots(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (!snapshot.hasData) {
              return Center(
                child: CircularProgressIndicator(),
              );
            }
            if (snapshot.data.documents.length != 0) {
              return ListView.builder(
                itemCount: snapshot.data.documents.length,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    child: Row(
                      children: <Widget>[
                        Container(
                          height: 150,
                          width: 100,
                          child: Image(
                            image: NetworkImage(
                                snapshot.data.documents[index]['dpURL']), fit: BoxFit.contain,
                          ),
                        ),
                        Column(
                          children: <Widget>[
                            Container(
                              height: 50,
                              width: MediaQuery.of(context).size.width * 0.8,
                              child:
                                  Text(snapshot.data.documents[index]['title']),
                            ),
                            Container(
                              height: 50,
                              width: MediaQuery.of(context).size.width * 0.8,
                              child:
                                  Text(snapshot.data.documents[index]['body']),
                            ),
                          ],
                        ),
                      ],
                    ),
                  );
                },
              );
            }
          },
        ),
      ),
Run Code Online (Sandbox Code Playgroud)

任何帮助表示赞赏,如果你能解释它会很棒!非常感谢!

Rav*_*mar 7

试着包裹你的Column内心Expanded

 Container(
              child: Row(
                children: <Widget>[
                  Container(
                    height: 150,
                    width: 100,
                    child: Image(
                      image: NetworkImage(
                          'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQLBtBU3nUOK7osT41ZsQhP4VBV7fd9euqXvXVKQH0Q7bl4txeD'),
                      fit: BoxFit.contain,
                    ),
                  ),
                  Expanded(
                    child: Column(
                      children: <Widget>[
                        Text(
                            'Reallly looooooooooooooooooooooooooooooong textttttttttttttttttttttttttttttttttttttttttttttttt'),
                        Text(
                            'Reallly looooooooooooooooooooooooooooooong textttttttttttttttttttttttttttttttttttttttttttttttt'),
                      ],
                    ),
                  ),
                ],
              ),
            );
Run Code Online (Sandbox Code Playgroud)

输出:

在此处输入图片说明


此外,如果您想限制Text使用线路,

  Text(
'Reallly looooooooooooooooooooooooooooooongtextttttttttttttttttttttttttttttttttttttttttttttttt',
    maxLines: 2,
    overflow: TextOverflow.ellipsis,
                        ),
Run Code Online (Sandbox Code Playgroud)

输出:

在此处输入图片说明