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

我怀疑您遇到的问题是两件事之一......（但可能是下面的第二件事）

图片的固定高度为 100。尝试将其减少到 80，看看是否可以弥补。如果是这样，这是您需要考虑的事情。我创建了这个飞镖来测试这个理论：https://dartpad.dev/216440eee06d8fde3ef63f3845026946
我假设您有一长串正在离开屏幕的“文本”小部件。如果是这种情况，您可以将 Column 包装在 SingleChildScrollView 中，以便它可以滚出页面。我在这里创建了一个例子： https://dartpad.dev/cc724a72283b7b01cfd992fe80da5eb4

颤振卡渲染溢出问题

2 个答案: