在 Flutter 中获取屏幕和部件的宽高

2023-11-16 19:20:03

前言

Flutter 是一款功能强大的 UI 框架，可用于构建跨平台应用。在 Flutter 中，我们可以使用多种方法来获取屏幕和部件的宽高。这些方法非常有用，可以帮助我们根据屏幕或部件的尺寸来调整布局和设计。

一、获取屏幕宽高

1. 使用 `MediaQuery`

MediaQuery 是 Flutter 中用于获取屏幕信息的一个类。我们可以使用 MediaQuery.of(context) 方法来获取当前屏幕的宽高。

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

2. 使用 `ScreenUtil`

ScreenUtil 是一个第三方库，可以帮助我们轻松地获取屏幕宽高。我们需要先安装这个库，然后才能使用它。

import 'package:flutter_screenutil/flutter_screenutil.dart';

double width = ScreenUtil().screenWidth;
double height = ScreenUtil().screenHeight;

二、获取部件宽高

1. 使用 `LayoutBuilder`

LayoutBuilder 是一个 Flutter 内置的部件，可以帮助我们获取其子部件的宽高。我们可以将 LayoutBuilder 作为子部件的父部件，然后在 LayoutBuilder 的 build 方法中获取子部件的宽高。

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    double width = constraints.maxWidth;
    double height = constraints.maxHeight;

    return Container(
      width: width,
      height: height,
      color: Colors.red,
    );
  },
);

2. 使用 `GlobalKey`

GlobalKey 是 Flutter 中用于获取部件状态的一个类。我们可以使用 GlobalKey 来获取部件的宽高。

final GlobalKey _key = GlobalKey();

@override
Widget build(BuildContext context) {
  return Container(
    key: _key,
    child: Text('Hello World!'),
  );
}

void getWidgetSize() {
  final RenderBox renderBox = _key.currentContext!.findRenderObject() as RenderBox;
  double width = renderBox.size.width;
  double height = renderBox.size.height;

  print('Width: $width, Height: $height');
}