將長文本包裝到容器中，導致 Flutter 溢出

Question

我正在為我的應用程序創建一個通知中心，它包含一些標題和正文的長字符串，它總是導致溢出，我嘗試使用擴展小部件，以及以下堆棧溢出問題： 問題 1 , 問題 2但我不能將它應用到我的代碼中，現在它是這樣的：

我從我的 firebase cloud firestore 獲取文本，並使用列表視圖輸出文本。

標題文本是這樣的：“Allen 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']),
                            ),
                          ],
                        ),
                      ],
                    ),
                  );
                },
              );
            }
          },
        ),
      ),

任何幫助表示贊賞，如果你能解釋它會很棒！ 非常感謝！

Answer 1

嘗試將您的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'),
                      ],
                    ),
                  ),
                ],
              ),
            );

輸出：

---

此外，如果您想限制使用Text行數，

  Text(
'Reallly looooooooooooooooooooooooooooooongtextttttttttttttttttttttttttttttttttttttttttttttttt',
    maxLines: 2,
    overflow: TextOverflow.ellipsis,
                        ),

輸出：

Answer 2

只需將您的列包裹在展開的小部件中

Expanded(child: 
               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']),
                            ),
                          ],
      ),
),

當一個列或行小部件有 2 個或更多子小部件時，當您想要填充所有剩余空間時，擴展小部件很有用。 所以將一個孩子包裹在一個擴展的小部件中將相應地填滿剩余的空間。

Answer 3

return Container(child: Row(
                            children: <Widget>[
                              Container(
                                height: 150,
                                width: 100,
                                child: Image(
                                  image: NetworkImage(snapshot.data.documents[index]['dpURL']), fit: BoxFit.contain,
                                ),
                              ),
                             new Expanded(
                                child: Column(
                                  children: <Widget>[
                                    Padding(
                                      padding: const EdgeInsets.all(8.0),
                                      child: TitleText(
                                        text:snapshot.data.documents[index]['title'] ,
                                        maxLine: 5,
                                      ),
                                    ),
                                    Container(
                                      height: 50,
                                      width: MediaQuery.of(context).size.width * 0.8,
                                      child: TitleText(
                                          text:snapshot.data.documents[index]['body']),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        );