H5前端学习flutter系列3 - 获取屏幕宽高、状态栏高度、导航栏高度、组件宽高

717 阅读1分钟

获取屏幕宽高

import 'package:flutter/material.dart';
import 'dart:ui';
// 屏幕宽度
var _screenWidth = window.physicalSize.width / window.devicePixelRatio;
// 屏幕高度
var _screenHeight = window.physicalSize.height / window.devicePixelRatio;
// 状态栏高度
var _statusBarHeight = MediaQueryData.fromWindow(window).padding.top;
// 导航栏高度
var _navBarHeight = kToolbarHeight;

打印宽高

@override
void initState() {
    super.initState();
    print('_screenWidth - $_screenWidth - $_screenHeight');
    // 物理分辨率-宽
    print(window.physicalSize.width);
    // 物理分辨率-高
    print(window.physicalSize.height);
    // dpr
    print(window.devicePixelRatio);
    // 状态栏高度
    print(_statusBarHeight);
    // 导航栏高度
    print(kToolbarHeight);
 }

打印结果-模拟器

I/flutter ( 1943): _screenWidth - 480.0 - 853.3333333333334
I/flutter ( 1943): 720.0
I/flutter ( 1943): 1280.0
I/flutter ( 1943): 1.5
I/flutter ( 1943): 24.0
I/flutter ( 1943): 56.0

打印结果-真机

I/flutter ( 2911): _screenWidth - 392.72727272727275 - 856.7272727272727
I/flutter ( 2911): 1080.0
I/flutter ( 2911): 2356.0
I/flutter ( 2911): 2.75
I/flutter ( 2911): 29.09090909090909
I/flutter ( 2911): 56.0

注意:真机无法打印log的问题

flutter run --profile 执行


build方法中获取宽高(通过context获取)


@override
Widget build(BuildContext context) {
    // 屏幕宽度
    print(MediaQuery.of(context).size.width);
    // 屏幕高度
    print(MediaQuery.of(context).size.height);
    // 状态栏高度
    print(MediaQuery.of(context).padding.top);
    
    return ...
}

打印结果-真机

I/flutter ( 8133): 392.72727272727275
I/flutter ( 8133): 856.7272727272727
I/flutter ( 8133): 29.09090909090909

获取组件宽高

// 申明全局key
final GlobalKey _globalKey = GlobalKey();

// 将GlobalKey绑定组件节点
Container(
    key: _globalKey,
    child: 
)

// 打印内容,需等待内容渲染完成否则为null
print(_globalKey.currentContext);
print(_globalKey.currentContext?.size);
print(_globalKey.currentContext?.size?.height);

打印结果

I/flutter ( 7363): Widget-[GlobalKey#e21cb]
I/flutter ( 7363): Size(392.7, 280.0)
I/flutter ( 7363): 280.0