Flutter窗口缩放插件scaled_window的使用

flutter_scaled_window 插件用于在指定分辨率下渲染小部件或应用。这对于多平台开发非常有用。

使用

ScaledWindow(
  barrierColor: Colors.transparent,
  resolution: Size(1366, 768),
  builder: (context, scale) => MyComponent(),
);

完整示例代码

import 'package:flutter/material.dart';
import 'package:scaled_window/scaled_window.dart';

void main() {
  runApp(
    ScaledWindow(
      resolution: Size(1366, 768),
      builder: (_, scale) => MyApp(scale: scale),
    ),
  );
}

class MyApp extends StatelessWidget {
  double scale;
  MyApp({Key? key, required this.scale}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 获取当前屏幕宽度并减去50作为计算基准
    final width = MediaQuery.of(context).size.width - 50;
    // 定义文本样式
    final textStyle = TextStyle(fontSize: 40, );

    return MaterialApp(
      home: Scaffold(
        // 设置背景颜色为浅灰色
        backgroundColor: Colors.grey.shade200,
        appBar: AppBar(title: const Text('一个桌面应用')),
        body: Padding(
          padding: const EdgeInsets.all(10),
          // 布局主界面
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // 左侧边栏
              Material(
                elevation: 10,
                child: SizedBox(
                  width: width / 4,
                  child: const RotatedBox(
                    quarterTurns: 1,
                    child: FittedBox(
                      child: Text('左侧面板'),
                    ),
                  ),
                ),
              ),
              const SizedBox(width: 15),
              // 主视图
              Material(
                elevation: 10,
                child: SizedBox(
                  width: width / 2,
                  child: Column(
                    children: [
                      Text("主视图", style: textStyle),
                      SizedBox(height: 40),
                      Text("此应用认为它在一个1366x768的窗口中运行", style: textStyle, textAlign: TextAlign.center,),
                      SizedBox(height: 40),
                      Text("窗口比例: ${scale.toStringAsFixed(2)}", style: textStyle, textAlign: TextAlign.center,),
                    ],
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                  ),
                ),
              ),
              const SizedBox(width: 15),
              // 右侧边栏
              Material(
                elevation: 10,
                child: SizedBox(
                  width: width / 4,
                  child: const RotatedBox(
                    quarterTurns: 1,
                    child: FittedBox(
                      child: Text('右侧面板'),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}