面试题：Flutter响应式布局中MediaQuery的深入应用

MediaQuery在Flutter响应式布局中的作用

MediaQuery 是 Flutter 中用于获取设备屏幕信息的一个重要类，在响应式布局中起到关键作用。它能提供诸如屏幕尺寸、像素密度、设备方向等信息，开发者可根据这些信息动态调整 UI 布局，使应用在不同设备（手机、平板、桌面等）上都能呈现出合适的样式，实现响应式设计。

代码示例

import 'package:flutter/material.dart';

class ResponsiveImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    String imageUrl;
    if (width < 600) {
      imageUrl = '小尺寸图片链接';
    } else if (width >= 600 && width <= 900) {
      imageUrl = '中等尺寸图片链接';
    } else {
      imageUrl = '大尺寸图片链接';
    }
    return Image.network(
      imageUrl,
      fit: BoxFit.cover,
    );
  }
}

在上述代码中，首先通过 MediaQuery.of(context).size.width 获取当前屏幕宽度，然后根据不同的宽度范围设置不同的图片链接，最后通过 Image.network 来显示相应尺寸的图片。在实际应用中，需将 '小尺寸图片链接'、'中等尺寸图片链接'、'大尺寸图片链接' 替换为真实的图片链接地址。

如果要在页面中使用这个 ResponsiveImage 组件，可以像下面这样：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('响应式图片示例'),
        ),
        body: Center(
          child: ResponsiveImage(),
        ),
      ),
    );
  }
}

上述代码创建了一个简单的应用，将 ResponsiveImage 放置在页面中心展示不同尺寸的图片。

星途面试题库

面试题：Flutter响应式布局中MediaQuery的深入应用

知识考点

面试题答案

MediaQuery在Flutter响应式布局中的作用

代码示例