Flutter实现图片自动适配手机屏幕并添加边框的方法

你的代码存在两个核心问题：

1. 直接在main函数中使用MediaQuery.of(context)会报错，因为此时context还未被MaterialApp正确初始化
2. 没有扣除AppBar占用的空间，图片会覆盖到AppBar区域或者出现适配偏差

以下是修正后的完整实现：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red,
        appBar: AppBar(
          title: const Center(
            child: Text('lord thunder'),
          ),
          backgroundColor: Colors.white60,
        ),
        body: LayoutBuilder(
          builder: (context, constraints) {
            // 获取body区域的可用宽高，自动扣除AppBar和状态栏高度
            final bodyWidth = constraints.maxWidth;
            final bodyHeight = constraints.maxHeight;

            return Container(
              width: bodyWidth,
              height: bodyHeight,
              // 自定义边框：颜色、宽度可按需调整
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.black,
                  width: 4.0,
                ),
              ),
              child: Image.asset(
                'images/images.jpg',
                // 保持图片比例填充容器，超出部分裁剪，不会变形
                fit: BoxFit.cover,
                // 若需强制拉伸填充（允许变形），替换为BoxFit.fill
              ),
            );
          },
        ),
      ),
    );
  }
}

关键说明 #

• Context初始化问题：将UI逻辑封装到StatelessWidget的build方法中，此时context已完成初始化，可正常获取布局约束
• 精准适配主体区域：通过LayoutBuilder获取body的实际可用尺寸，自动适配不同手机屏幕，同时避开AppBar的占用空间
• 边框实现：利用Container的decoration属性添加边框，支持自定义颜色和宽度
• 图片适配模式：
  • BoxFit.cover：优先保持图片比例，完全覆盖容器，超出部分裁剪（推荐，避免图片变形）
  • BoxFit.fill：强制拉伸图片填满容器，会导致图片比例变形

注意事项 #

确保你的图片资源已在pubspec.yaml中正确配置：

flutter:
  assets:
    - images/images.jpg

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