05_Flutter屏幕适配

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    // 使用MediaQuery来获取设备的宽度
    double width = MediaQuery.of(context).size.width;
    // 设置一个基准的设计分辨率宽度（如：375代表iPhone 6的宽度）
    double baseWidth = 375;
    // 计算缩放比例
    double scale = width / baseWidth;
 
    return Scaffold(
      body: Container(
        // 使用CustomPaint来演示自定义绘制
        child: CustomPaint(
          size: Size(200 * scale, 200 * scale), // 根据缩放比例设置自定义绘制的大小
          painter: MyPainter(),
        ),
      ),
    );
  }
}
 
class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 绘制一个简单的正方形
    canvas.drawRect(
      Rect.fromLTWH(0, 0, size.width, size.height),
      Paint()..color = Colors.blue,
    );
  }
 
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

这段代码演示了如何在Flutter中使用MediaQuery来获取设备的屏幕宽度，并结合一个基准宽度来计算缩放比例，进而适配不同尺寸的屏幕。同时，使用CustomPaint来演示如何在自定义绘制中应用该缩放比例。这是一个简单的例子，但在实际应用中，可以根据具体需求进行更复杂的适配。