Flutter双列卡片布局RenderFlex右侧溢出问题求助

问题说明 #

使用自定义可复用SubjectCard组件构建双列卡片布局时，出现RenderFlex右侧溢出99853像素的错误，问题出在Row组件（路径：lib\…\student\subjects.dart:158）。尝试缩小组件尺寸可解决溢出，但无法达到预期布局效果，现提供相关报错信息、代码及修改后的版本，以解决问题并实现理想布局。

报错详情 #

════════ 渲染库捕获异常 ═════════════════════════════════
RenderFlex右侧溢出99853像素。
相关错误触发组件为：
Row
lib\…\student\subjects.dart:158
════════════════════════════════════════════════════════════════════════════════

原始subjects.dart代码 #

SingleChildScrollView(
                      child: Container(
                        padding: const EdgeInsets.symmetric(horizontal: 32),
                        child: Column(
                          children : [
                              // 顶部行
                              Row(children: [ 
                                SubjectCard(link: '', source: '', subjectNo: 'SUBJECT 1'),
                                const SizedBox(width: 5,),
                                SubjectCard(link: '', source: '', subjectNo: 'SUBJECT 1')
                                ] 
                              ),
                              const SizedBox(height: 5,),
                              
                              Row(children: [ 
                                SubjectCard(link: '', source: '', subjectNo: 'SUBJECT 2'),
                                const SizedBox(width: 5,),
                                SubjectCard(link: '', source: '', subjectNo: 'SUBJECT 2')
                                ] 
                              ),
                            ],
                          ),
                        ),
                      )

SubjectCard组件代码 #

return SizedBox(
      height: 140,
      width: width * 0.4,
      child: Card(
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12)
          ),
        child: Stack(
          alignment: Alignment.topLeft,
          children: [
            // Ink.image(
            //   // image: NetworkImage(link),
            //   image: AssetImage(widget.link),
            //   height: 200,
            //   fit: BoxFit.cover,
            //   //colorFilter: ColorFilters.greyscale,
            //   child: InkWell(
            //     onTap: () => Navigator.of(context).pushNamed(
            //       widget.source,
            //       arguments: 'Text from homepage',
            //     ),
            //   ),
            // ),
            Padding(
              padding:const EdgeInsets.only(top: 0),
              child: Container(
                color: Colors.white60,
                height: 50,
                width: double.infinity,
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 10, top: 5, bottom: 0),
              child: Text(subjectName,
                style: GoogleFonts.smoochSans(
                  textStyle: const TextStyle(color: Colors.black,fontWeight: FontWeight.bold, fontSize: 30),
                )
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 10, top: 28, bottom: 0),
              child: Text(profesor,
                style: GoogleFonts.smoochSans(
                  textStyle: const TextStyle(color: Colors.black,fontWeight: FontWeight.bold, fontSize: 18),
                )
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 10, top: 43, bottom: 0),
              child: Text('$start -',
                style: GoogleFonts.smoochSans(
                  textStyle: const TextStyle(color: Colors.black,fontWeight: FontWeight.bold, fontSize: 18),
                )
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 10, top: 56, bottom: 0),
              child: Text('$end',
                style: GoogleFonts.smoochSans(
                  textStyle: const TextStyle(color: Colors.black,fontWeight: FontWeight.bold, fontSize: 18),
                )
              ),
            ),
          ],
        ),
      ),
    );

官方错误提示（翻译后） #

溢出的RenderFlex边缘已在渲染中标记为黄黑条纹图案，通常是因为内容超出了RenderFlex的可用空间。

建议使用弹性因子（比如Expanded组件）强制RenderFlex的子组件适配可用空间，而非使用其自然尺寸。
这属于错误状态，因为它意味着有内容无法被看到。如果内容确实大于可用空间，可考虑在放入Flex前用ClipRect组件裁剪，或者使用可滚动容器替代Flex，比如ListView。

涉及的RenderFlex具体信息：RenderFlex#8390f OVERFLOWING
════════════════════════════════════════════════════════════════════════════════

修改后的代码 #

Expanded(
                      flex: 1,
                      child: SingleChildScrollView(
                        child: SizedBox(
                          // height: height,
                          width: MediaQuery.of(context).size.width,
                              child: SizedBox(
                                child: Column(
                                  children : [
                                      // 顶部行
                                      Row(
                                        children: const [ 
                                        SubjectCard(link: "assets/images/subject.jpg", source: '', subjectNo: 'SUBJECT 1'),
                                        SizedBox(width: 10,),
                                        SubjectCard(link: "assets/images/subject.jpg", source: '', subjectNo: 'SUBJECT 1')
                                        ] 
                                      ),
                                      const SizedBox(height: 10,),
                                      
                                      Row(
                                        children: const [ 
                                        SubjectCard(link: "assets/images/subject.jpg", source: '', subjectNo: 'SUBJECT 1'),
                                        SizedBox(width: 10,),
                                        SubjectCard(link: "assets/images/subject.jpg", source: '', subjectNo: 'SUBJECT 1')
                                        ] 
                                      ),
                                      const SizedBox(height: 10,),
                                      
                                      Row(children: const [ 
                                        SubjectCard(link: "assets/images/Student.JPG", source: '', subjectNo: 'SUBJECT 2'),
                                        SizedBox(width: 10,),
                                        SubjectCard(link: "assets/images/subject.jpg", source: '', subjectNo: 'SUBJECT 1')
                                        ] 
                                      ),
                                      const SizedBox(height: 10,),
                                      
                                      Row(children: const [ 
                                        SubjectCard(link: "assets/images/subject.jpg", source: '', subjectNo: 'SUBJECT 1'),
                                        SizedBox(width: 10,),
                                        SubjectCard(link: "assets/images/Student.JPG", source: '', subjectNo: 'SUBJECT 2')
                                        ] 
                                      ),const SizedBox(height: 10,),
                                      
                                      Row(children: const [ 
                                        SubjectCard(link: "assets/images/subject.jpg", source: '', subjectNo: 'SUBJECT 1'),
                                        SizedBox(width: 10,),
                                        SubjectCard(link: "assets/images/Student.JPG", source: '', subjectNo: 'SUBJECT 2')
                                        ] 
                                      ),const SizedBox(height: 10,),
                                      
                                      Row(children: const [ 
                                        SubjectCard(link: "assets/images/subject.jpg", source: '', subjectNo: 'SUBJECT 1'),
                                        SizedBox(width: 10,),
                                        SubjectCard(link: "assets/images/Student.JPG", source: '', subjectNo: 'SUBJECT 2')
                                        ] 
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                      ),
                    )

内容的提问来源于stack exchange，提问作者Polly