flutter 卡渲染溢出問題

Question

我有一個網格視圖，並且我一直在列上遇到這個溢出問題。 我不知道如何解決這個問題，並嘗試了盡可能多的方法。

GestureDetector(
                    onTap: () => {print('clicked')},
                    child: Container(
                      child: Padding(
                        padding: EdgeInsets.fromLTRB(6, 6, 6, 6),
                        child: Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(4.5),
                                topRight: Radius.circular(4.5),
                                bottomLeft: Radius.zero,
                                bottomRight: Radius.zero,
                              ),
                              child: Image.network(
                                prop.thumbnail,
                                fit: BoxFit.fill,
                                width: double.infinity,
                                height: 100,
                              ),
                            ),
                            Container(
                              color: Colors.orange,
                              child: Center(
                                child: Padding(
                                  padding: EdgeInsets.fromLTRB(0, 6, 0, 6),
                                  child: Text(
                                    prop.description,
                                    style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.white,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                            Row(
                              children: [
                                Text('text'),
                              ],
                            ),
                            Row(
                              children: [
                                Text('text'),
                              ],
                            ),
                            Row(
                              children: [
                                Expanded(
                                  flex: 9,
                                  child: Text('text'),,
                                ),
                                Expanded(
                                  flex: 1,
                                  child: Icon(
                                    Icons.audiotrack,
                                    color: Colors.green,
                                    size: 30.0,
                                  ),
                                )
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),

Answer 1

我已經編輯了你的代碼，請試試這個並告訴我。

GestureDetector(
          onTap: () => {print('clicked')},
          child: Container(
            child: Padding(
              padding: EdgeInsets.fromLTRB(6, 6, 6, 6),
              child: Column(
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(4.5),
                      topRight: Radius.circular(4.5),
                      bottomLeft: Radius.zero,
                      bottomRight: Radius.zero,
                    ),
                    child: Image.network(
                      prop.thumbnail,
                      fit: BoxFit.fill,
                      width: double.infinity,
                      height: 100,
                    ),
                  ),
                  Container(
                    color: Colors.orange,
                    child: Center(
                      child: Padding(
                        padding: EdgeInsets.fromLTRB(0, 6, 0, 6),
                        child: Text(
                          prop.description,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                  ),
                  Text('text'),
                  Text('text'),
                  Row(
                    children: [
                      Expanded(
                        flex: 9,
                        child: Text('text'),
                      ),
                      Expanded(
                        flex: 1,
                        child: Icon(
                          Icons.audiotrack,
                          color: Colors.green,
                          size: 30.0,
                        ),
                      )
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),

Answer 2

我懷疑您遇到的問題是兩件事之一……（但可能是下面的第二件事）

1. 您的圖片的固定高度為 100。 嘗試將其減少到 80，看看是否可以彌補。 如果是這樣，這是您需要考慮的事情。 我創建了這個 dartpad 來測試這個理論： https://dartpad.dev/216440eee06d8fde3ef63f3845026946

2. 我假設您有一長串正在離開屏幕的“文本”小部件。 如果是這種情況，您可以將 Column 包裝在SingleChildScrollView中，以便它可以滾動頁面。 我在這里創建了一個示例： https://dartpad.dev/cc724a72283b7b01cfd992fe80da5eb4