flutter如何获取屏幕宽度

在Flutter开发中，我需要动态获取当前设备的屏幕宽度来调整布局。试过使用MediaQuery.of(context).size.width，但在某些页面中返回值为0。请问正确的获取方法是什么？是否需要注意调用时机或上下文环境？

2 回复

使用MediaQuery.of(context).size.width获取屏幕宽度。例如：

double screenWidth = MediaQuery.of(context).size.width;

注意：需要在BuildContext可用时调用。

更多关于flutter如何获取屏幕宽度的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中获取屏幕宽度可以通过以下几种方式：

1. 使用 MediaQuery（推荐）

import 'package:flutter/material.dart';

double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;

// 使用示例
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    
    return Container(
      width: screenWidth * 0.8, // 屏幕宽度的80%
      child: Text('屏幕宽度: $screenWidth'),
    );
  }
}

2. 在 initState 中获取

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  double screenWidth = 0;
  
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        screenWidth = MediaQuery.of(context).size.width;
      });
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Container(
      width: screenWidth,
      child: Text('屏幕宽度: $screenWidth'),
    );
  }
}

3. 响应屏幕尺寸变化

class ResponsiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        double maxWidth = constraints.maxWidth;
        
        return Container(
          width: maxWidth,
          child: Text('可用宽度: $maxWidth'),
        );
      },
    );
  }
}

注意事项：

  • MediaQuery.of(context) 需要在 build 方法或拥有有效 context 的地方使用
  • 屏幕宽度单位是逻辑像素（与设备像素密度无关）
  • 考虑安全区域：MediaQuery.of(context).padding 可以获取刘海屏等安全区域信息

推荐使用第一种方法，因为它简单直接且性能最佳。

回到顶部