Flutter页面出现Bottom Overflowed by pixels问题无法解决

问题根源 #

• 页面主体的Column未嵌套滚动组件，当内容高度超过屏幕可视区域时，无法滚动导致底部溢出
• 商品信息容器强制设置固定高度height: 300，内部描述文本内容超出该限制，无法正常显示

修复步骤 #

1. 添加滚动支持：将外层Padding包裹在SingleChildScrollView中，让整个页面内容可垂直滚动
2. 移除固定高度限制：删除商品信息容器的height: 300属性，让容器根据内部内容自动适配高度
3. 优化Row布局（可选）：将原Row中固定间距SizedBox(width:60)替换为Spacer()，避免小屏幕下布局挤压

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import '../appbar.dart';

class DetailProductHeading extends StatelessWidget {
  const DetailProductHeading({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(title: 'Detail Product'),
      // 包裹SingleChildScrollView实现页面滚动
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(35.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                decoration: BoxDecoration(
                  color: Color(0xFFFAFAFA),
                  borderRadius: BorderRadius.all(Radius.circular(30.0)),
                ),
                child: InkWell(
                  child: Center(
                    child: Image.asset(
                      'image/headphone.png',
                      height: 300,
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 25,
              ),
              Container(
                margin: EdgeInsets.symmetric(horizontal: 10),
                width: double.infinity,
                // 移除固定height属性
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'TMA-2HD Wireless',
                      style: TextStyle(
                        fontFamily: GoogleFonts.dmSans().fontFamily,
                        fontWeight: FontWeight.w600,
                        fontSize: 25,
                      ),
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    Text(
                      "Rp. 1.500.000",
                      style: TextStyle(
                        fontFamily: GoogleFonts.dmSans().fontFamily,
                        color: Color(0xFFFE3A30),
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    SizedBox(
                      height: 5,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.max,
                      children: [
                        Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Icon(
                              Icons.star,
                              color: Colors.yellow,
                            ),
                            SizedBox(
                              width: 5.0,
                            ),
                            Text('4.0')
                          ],
                        ),
                        Padding(padding: EdgeInsets.symmetric(horizontal: 5)),
                        Row(
                          children: [
                            Text(
                              '86 Reviews',
                              style: TextStyle(
                                fontFamily: GoogleFonts.dmSans().fontFamily,
                              ),
                            ),
                            // 替换固定间距为Spacer，自适应布局
                            Spacer(),
                            SizedBox(
                              width: 107,
                              height: 20,
                              child: OutlinedButton(
                                onPressed: () {},
                                style: OutlinedButton.styleFrom(
                                  backgroundColor: Color(0xFFE5F6DF),
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(30),
                                  ),
                                ),
                                child: Text(
                                  "Tersedia: 250",
                                  style: (TextStyle(
                                    fontFamily: GoogleFonts.dmSans().fontFamily,
                                    fontSize: 12,
                                    color: Colors.green,
                                  )),
                                ),
                              ),
                            )
                          ],
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 15,
                    ),
                    Divider(
                      color: Colors.grey,
                      thickness: 0.50,
                    ),
                    SizedBox(
                      height: 15,
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Description Product',
                          style: TextStyle(
                            fontFamily: GoogleFonts.dmSans().fontFamily,
                            fontWeight: FontWeight.bold,
                            fontSize: 18,
                          ),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Text(
                          'The speaker unit contains a diaphragm that is precision-grown from NAC Audio bio-cellulose, making it stiffer, lighter and stronger than regular PET speaker units, and allowing the sound-producing diaphragm to vibrate without the levels of distortion found in other speakers.',
                          style: TextStyle(
                            fontFamily: GoogleFonts.dmSans().fontFamily,
                            fontSize: 12,
                          ),
                        ),
                        SizedBox(
                          height: 8,
                        ),
                        Text(
                          'The speaker unit contains a diaphragm that is precision-grown from NAC Audio bio-cellulose, making it stiffer, lighter and stronger than regular PET speaker units, and allowing the sound-producing diaphragm to vibrate without the levels of distortion found in other speakers.',
                          style: TextStyle(
                            fontFamily: GoogleFonts.dmSans().fontFamily,
                            fontSize: 12,
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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