屏幕尺寸： MediaQuery

本课属于 Coddy Flutter 学习旅程的“适配不同屏幕的布局”单元。第 16 课，共 30 课。

手机的屏幕宽度各不相同。要根据屏幕调整大小，可以让 Flutter 告诉你屏幕有多大：

final size = MediaQuery.of(context).size;
final width = size.width;   // 这部手机上是 390
final height = size.height; // 844

MediaQuery.of(context) 会读取应用运行所在屏幕的信息。.size 表示屏幕的宽度和高度，单位与其他尺寸使用的像素相同。

context 是 build 接收的那个参数。这个应用将页面放在自己的组件 HomeScreen 中，并在其 build 的开头读取屏幕尺寸，紧邻使用这个尺寸的页面。

将宽度存入变量后，就可以通过计算来确定尺寸：size.width / 2 是任何手机屏幕的一半，平板电脑上也一样。

挑战

简单

横幅始终宽 200 像素。无论屏幕宽度是多少，都让它的宽度为屏幕的一半。

亲手试试

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(title: const Text('Screen Size')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('This screen is ${size.width.toStringAsFixed(0)} pixels wide'),
            const SizedBox(height: 16),
            Container(
              width: 200,
              height: 80,
              color: Colors.deepOrange,
              child: const Center(
                child: Text('Banner', style: TextStyle(color: Colors.white)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}