Flutter Linux平台使用ConstrainedBox无法限制窗口最小调整尺寸问题

ConstrainedBox是Flutter框架层的布局约束组件，仅作用于其嵌套的子组件，用于限制子组件在Flutter渲染画布内的尺寸范围，完全不涉及操作系统窗口层面的控制逻辑，因此无法阻止用户拖动窗口边缘修改系统窗口大小，最多会在窗口小于你设置的minWidth时，让子组件出现裁剪、溢出提示。

纯Flutter无第三方插件的实现逻辑是通过监听窗口尺寸变化，在窗口小于阈值时主动强制修改窗口尺寸回最低阈值，实现步骤如下：

• 给页面State混入WidgetsBindingObserver，监听窗口尺寸变更事件
• 初始化时注册监听器，页面销毁时移除监听器
• 重写didChangeMetrics方法，校验当前窗口尺寸，小于阈值时主动更新窗口尺寸

修改后的完整代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  int _counter = 0;
  // 自定义窗口最小阈值
  static const double _minWindowWidth = 500;
  static const double _minWindowHeight = 600;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  void initState() {
    super.initState();
    // 注册窗口事件监听
    WidgetsBinding.instance.addObserver(this);
    // 页面渲染完成后先校验一次初始窗口尺寸
    WidgetsBinding.instance.addPostFrameCallback((_) => _checkWindowSize());
  }

  @override
  void dispose() {
    // 移除监听避免内存泄漏
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    // 窗口尺寸变化时触发校验
    _checkWindowSize();
  }

  void _checkWindowSize() {
    final flutterView = View.of(context);
    // 转换为逻辑像素尺寸
    final currentWindowSize = flutterView.physicalSize / flutterView.devicePixelRatio;

    double targetWidth = currentWindowSize.width;
    double targetHeight = currentWindowSize.height;

    // 小于阈值时替换为最小阈值
    if (targetWidth < _minWindowWidth) targetWidth = _minWindowWidth;
    if (targetHeight < _minWindowHeight) targetHeight = _minWindowHeight;

    // 尺寸不符合则强制更新窗口尺寸
    if (targetWidth != currentWindowSize.width || targetHeight != currentWindowSize.height) {
      flutterView.viewConfiguration.update(size: Size(targetWidth, targetHeight));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

方案说明 #

• 该方案无需引入任何第三方插件，依赖Flutter自带API实现，支持Windows、macOS、Linux全桌面平台
• 由于是尺寸变更后触发回弹修正，拖动窗口边缘缩小到阈值以下时会有轻微的回弹效果，若需要完全阻止拖动到阈值以下，还是需要通过原生层配置窗口样式实现，一般需要借助第三方插件。

内容的提问来源于stack exchange，提问作者Murat Ursavaş