如何解决Flutter中的Widget像素溢出问题？

你的页面出现像素溢出，核心原因有两个：

• 页面内容高度超过屏幕时，外层Column没有滚动容器支撑，导致纵向溢出；
• 第二个Row里集中了图片、电话、邮箱、地址等大量元素，横向空间不足触发横向溢出，进一步导致整体布局高度异常。

结合你的需求，以下是修复后的代码，同时修正了位置图标点击区域无效的问题：

import 'package:flutter/material.dart';
import 'package:social_media_flutter/social_media_flutter.dart';
import 'package:url_launcher/url_launcher.dart';

class AboutScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('About'),
      ),
      // 用SingleChildScrollView包裹，解决纵向溢出
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            // 社交媒体与营业时间行
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: const [
                    Icon(Icons.access_time),
                    SizedBox(width: 16.0),
                    Text(
                      'Monday - Friday 06:00am - 22:00pm',
                      style: TextStyle(fontSize: 15.0),
                    ),
                  ],
                ),
                const SizedBox(width: 15.0),
                SocialWidget(
                  placeholderText: 'agile-logistix',
                  iconData: SocialIconsFlutter.instagram,
                  iconColor: Colors.purple,
                  link: 'https://instagram.com/agile-logistics',
                  placeholderStyle: const TextStyle(color: Colors.blue, fontSize: 15),
                ),
                const SizedBox(width: 10.0),
                SocialWidget(
                  iconData: SocialIconsFlutter.facebook,
                  iconColor: Colors.blue,
                  placeholderText: 'agile-logistix',
                  link: 'https://facebook.com/agile-logistics',
                  placeholderStyle: const TextStyle(color: Colors.green, fontSize: 15),
                ),
                const SizedBox(width: 10.0),
                SocialWidget(
                  iconData: SocialIconsFlutter.twitter,
                  placeholderText: 'agile-logistix',
                  link: 'https://twitter.com/agile-logistix',
                  placeholderStyle: const TextStyle(color: Colors.blue, fontSize: 15),
                ),
              ],
            ),
            const SizedBox(height: 20.0), // 增加模块间距

            // 拆分原大Row为多个模块，避免横向溢出
            // 公司Logo行
            Center(
              child: Image.asset('assets/images/agile.jpg', width: 175, height: 175),
            ),
            const SizedBox(height: 20.0),

            // 电话模块
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Icon(Icons.phone, size: 35, color: Colors.lightBlue),
                SizedBox(width: 16.0),
                Text('Call US Now', style: TextStyle(fontSize: 16.0)),
                SizedBox(width: 16.0),
                Text('0878221281', style: TextStyle(fontSize: 16.0)),
              ],
            ),
            const SizedBox(height: 15.0),

            // 邮箱模块
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Icon(Icons.email, size: 35, color: Colors.lightBlue),
                SizedBox(width: 16.0),
                Text('Email Us Today', style: TextStyle(fontSize: 16.0)),
                SizedBox(width: 16.0),
                Text('info@agilelogistix.co.za', style: TextStyle(fontSize: 16.0)),
              ],
            ),
            const SizedBox(height: 15.0),

            // 位置模块（修复点击区域）
            InkWell(
              onTap: () {
                launch('https://www.google.com/maps/place/292+Surrey+Ave,+Ferndale,+Randburg,+2194/@-26.0954782,27.9952438,17z/data=!3m1!4b1!4m6!3m5!1s0x1e9574948a4c7c03:0x1b0f3d39f41eb77b!8m2!3d-26.095483!4d27.9978187!16s%2Fg%2F11c5nzy24_?entry=ttu');
              },
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Icon(Icons.location_on, size: 35, color: Colors.green),
                  SizedBox(width: 16.0),
                  Text('Company Location', style: TextStyle(fontSize: 16.0)),
                  SizedBox(width: 16.0),
                  Text('292 Surrey Avenue Ferndale, Randburg 2194', style: TextStyle(fontSize: 16.0)),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

主要修改点：

1. 用SingleChildScrollView包裹整个内容区域，解决纵向内容溢出问题；
2. 将原有的大Row拆分为独立的Logo行、电话行、邮箱行、位置行，避免横向空间不足；
3. 把InkWell正确包裹住位置图标和文字，确保点击区域有效；
4. 增加模块间的间距，提升页面可读性。

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