顫動一個RenderFlex在gridview右側溢出了113個像素

Question

我不明白為什么整個塊不適合容器的寬度，因為我已將所有子容器設置為容器的寬度

我收到錯誤 A RenderFlex 在右側溢出了 113 像素。

GridView.count(
                    shrinkWrap: true,
                    crossAxisCount: 3,
                    physics: const ClampingScrollPhysics(),
                    scrollDirection: Axis.horizontal,
                    crossAxisSpacing: 3,
                    mainAxisSpacing: 10,
                    children: [
                      for (var i = 0; i < genresColorsList.length; i++)
                        Container(
                          height: 75,
                          width: 250,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: Row(
                            children: [
                              Container(
                                width: 8,
                                height: 50,
                                color: genresColorsList[i]['color']
                                    .toString()
                                    .toColor(),
                              ),
                              Container(
                                width: 170,
                                height: 50,
                                alignment: Alignment.centerLeft,
                                decoration: BoxDecoration(color: Colors.brown),
                                child: Padding(
                                  padding: const EdgeInsets.only(left: 10),
                                  child: Text(
                                    genresColorsList[i]['genre'],
                                    style: TextStyle(color: Colors.white),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                    ]),

Answer 1

只需刪除父容器的寬度並用擴展的小部件包裝它。

 GridView.count(
      shrinkWrap: true,
      crossAxisCount: 3,
      physics: const ClampingScrollPhysics(),
      scrollDirection: Axis.horizontal,
      crossAxisSpacing: 3,
      mainAxisSpacing: 10,
      children: [
        for (var i = 0; i < genresColorsList.length; i++)
          Expanded(
            child: Container(
              height: 75,
              
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                children: [
                  Expanded(
                    child: Container(
                      height: 50,
                      color:
                          genresColorsList[i]['color'].toString().toColor(),
                    ),
                  ),
                  Expanded(flex: 3,
                    child: Container(
                      height: 50,
                      alignment: Alignment.centerLeft,
                      decoration: BoxDecoration(color: Colors.brown),
                      child: Padding(
                        padding: const EdgeInsets.only(left: 10),
                        child: Text(
                          genresColorsList[i]['genre'],
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
      ]),