更改 Flutter Windows 桌面中的标题栏颜色

Question

我正在开发一个 Windows 桌面应用程序，如果可能的话想更改标题栏颜色。例如我想从这样的事情开始：

像这样：

是否可以使用 flutter 以及如何操作？谢谢。

Answer 1

对于这种自定义，您将需要使用 bitsdojo_windows 社区包，它允许您自定义窗口的外观

Answer 2

聚会有点晚了，但你可以使用 window_manager 来实现你想要的。 为了隐藏标题栏，您应该在调用

setTitleBarStyle()

之前使用

runApp

方法，这样用户就不会在 UI 中看到滞后或延迟。 这是一个最小的例子：

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

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized(); //Must be called
  await windowManager.ensureInitialized(); //Must be called
  //waitUntilReadyToShow ==> Optional method to use, requires modification of native runner - Read docs of the package.
  await windowManager.waitUntilReadyToShow().then((_) async {
    await windowManager.setTitleBarStyle(TitleBarStyle.hidden); //Hiding the titlebar
    await windowManager.setTitle("I don't have a titlebar!"); //We don't have a titlebar, this title appears in Task Manager for example.
    await windowManager.show(); //Finally show app window.
  });
  runApp(const MyApp());
}


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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('My Titlebar-less app!'),
        ),
      ),
    );
  }
}

Answer 3

你可以使用

window_manager

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await windowManager.ensureInitialized();

  WindowOptions windowOptions = const WindowOptions(
    size: Size(800, 600),
    center: true,
    backgroundColor: Colors.transparent,
    skipTaskbar: false,
    titleBarStyle: TitleBarStyle.hidden,
  );
  windowManager.waitUntilReadyToShow(windowOptions, () async {
    await windowManager.focus();
  });
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: const Size(double.maxFinite, 50),
          child: DragToMoveArea(
            child: AppBar(
              backgroundColor: Colors.green,
              actions: [
                IconButton(
                  onPressed: () => windowManager.minimize(),
                  icon: const Icon(Icons.minimize),
                ),
                IconButton(
                  onPressed: () => windowManager.maximize(),
                  icon: const Icon(Icons.maximize),
                ),
                IconButton(
                  onPressed: () => windowManager.close(),
                  icon: const Icon(Icons.close),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}