Flutter Wayland显示层管理插件wayland_layer_shell的使用

Flutter Wayland显示层管理插件wayland_layer_shell的使用

本插件通过使用gtk-layer-shell库来暴露zwlr_layer_shell_v1协议，使开发者能够在Wayland系统上使用Flutter创建桌面组件，如面板、任务栏、应用程序启动器等。

支持的合成器

该插件仅在Wayland系统上运行，并且只与支持zwlr_layer_shell_v1协议的Wayland合成器兼容。支持的合成器包括：

• 基于wlroots的合成器（如Sway、Hyprland等）
• 在Wayland上的KDE Plasma
• 基于Mir的合成器（某些可能默认不启用该协议，需要使用--add-wayland-extension zwlr_layer_shell_v1）

不支持的合成器包括：

• Gnome-on-Wayland
• 任何X11桌面

入门指南

使用gtk标题栏并在初始化图层表面之前显示gtk窗口会阻止图层表面的初始化，因此需要对Flutter的gtk窗口初始化代码进行一些更改。

更新文件linux/my_application.cc如下所示：

...

// Implements GApplication::activate.
static void my_application_activate(GApplication* application) {

  ...

- gboolean use_header_bar = TRUE;
+ gboolean use_header_bar = FALSE;

  ...
  
  gtk_window_set_default_size(window, 1280, 720);
- gtk_widget_show(GTK_WIDGET(window));
+ gtk_widget_realize(GTK_WIDGET(window));

  g_autoptr(FlDartProject) project = fl_dart_project_new();

...

依赖项

该插件依赖于gtk-layer-shell-0库。确保在安装使用此插件的应用程序的平台上可用。该库可以在主要发行版的存储库中找到：发行版包

使用方法

要了解如何使用，请查看example文件夹内的示例应用。

完整示例Demo

以下是一个完整的示例代码，展示了如何使用wayland_layer_shell插件。

import 'package:flutter/material.dart';
import 'package:wayland_layer_shell/types.dart';
import 'dart:async';

import 'package:wayland_layer_shell/wayland_layer_shell.dart';
import 'package:wayland_layer_shell_example/set_exclusive_zone.dart';
import 'package:wayland_layer_shell_example/set_keyboard.dart';
import 'package:wayland_layer_shell_example/set_monitor.dart';
import 'package:wayland_layer_shell_example/set_anchors.dart';
import 'package:wayland_layer_shell_example/set_layer.dart';
import 'package:wayland_layer_shell_example/set_margins.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final waylandLayerShellPlugin = WaylandLayerShell();
  bool isSupported = await waylandLayerShellPlugin.initialize(650, 600);
  if (!isSupported) {
    runApp(const MaterialApp(home: Center(child: Text('Not supported'))));
    return;
  }
  await waylandLayerShellPlugin
      .setKeyboardMode(ShellKeyboardMode.keyboardModeExclusive);
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Wayland Layer Shell example'),
        ),
        body: const Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SetMonitor(),
                  SizedBox(width: 40),
                  SetExclusiveZone(),
                ],
              ),
              SizedBox(height: 20),
              SetLayer(),
              SizedBox(height: 10),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SetKeyboard(),
                  SizedBox(
                    width: 120,
                    child: TextField(
                      autofocus: true,
                      decoration:
                          InputDecoration(labelText: 'Test Keyboard Mode'),
                    ),
                  )
                ],
              ),
              SizedBox(height: 20),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [SetAnchors(), SizedBox(width: 40), SetMargins()],
              ),
            ],
          ),
        ),
      ),
    );
  }
}