Flutter UI组件库插件libadwaita_bitsdojo的使用

发布于 1周前 作者 gougou168 来自 Flutter

获取平台无关的应用窗口对象以供您的 libadwaita 应用程序使用，修复移动和 Web 平台上的编译错误。

使用方法 #

首先在 Dart 文件顶部导入此包：

import 'package:libadwaita_bitsdojo/libadwaita_bitsdojo.dart';

然后将它传递给 AdwHeaderBar 的 actions 参数：

AdwHeaderBar.bitsdojo(
    actions: AdwActions().bitsdojo,
//  ...
)

注意：此包会与 bitsdojo_window 的应用窗口对象冲突。因此，如果您想要跨平台编译，请使用此包；否则，请使用原始包。

其他信息 #

此包依赖于 bitsdojo_window 来提供应用窗口对象。因此，当 bitsdojo_window 更新时，此包也需要更新。

此包是 libadwaita 包的一部分。

```

最小化使用示例

#pubspec.yaml
dependencies:
  adwaita:
  libadwaita:
  libadwaita_bitsdojo:

// main.dart

import ‘package:adwaita/adwaita.dart’;
import ‘package:flutter/material.dart’;
import ‘package:libadwaita/libadwaita.dart’;
import ‘package:libadwaita_bitsdojo/libadwaita_bitsdojo.dart’;


void main() {
runApp(const MyApp());
doWhenWindowReady(() {
final win = appWindow!;
const initialSize = Size(400, 450);
const size = Size(1000, 600);


win
  ..title = '示例 Bitsdojo'
  ..size = size
  ..alignment = Alignment.center
  ..minSize = initialSize
  ..show();

});
}


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


@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: AdwaitaThemeData.light(),
darkTheme: AdwaitaThemeData.dark(),
home: MyHomePage(),
);
}
}


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


@override
Widget build(BuildContext context) {
return AdwScaffold(
actions: AdwActions().bitsdojo,
start: const [
AdwHeaderButton(
icon: Icon(Icons.nightlight_round, size: 15),
),
],
title: const Text(‘Bitsdojo 窗口’),
body: const Center(
child: Text(‘欢迎来到 Bitsdojo 窗口示例！’),
),
);
}
}


更多关于Flutter UI组件库插件libadwaita_bitsdojo的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter UI组件库插件libadwaita_bitsdojo的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用libadwaita_bitsdojo插件的示例代码。这个插件结合了Adwaita GTK主题和Bitsdojo的UI组件库，提供了一组现代化的Flutter组件。请注意，libadwaita_bitsdojo并不是官方的Flutter插件，所以我将基于假设的功能和组件给出一个示例。如果你指的是两个独立的库（libadwaita风格和Bitsdojo组件库），我将结合它们给出示例。

首先，确保你的pubspec.yaml文件中包含了所需的依赖项。由于libadwaita_bitsdojo不是一个确切的包名，我将分别添加bitsdojo_window（一个流行的Bitsdojo组件库，用于窗口管理）和一个假设的Adwaita风格主题包（实际上，你可能需要自定义主题来模仿Adwaita风格）。

dependencies:
  flutter:
    sdk: flutter
  bitsdojo_window: ^0.4.0  # 示例版本号，请检查最新版本
  provider: ^6.0.0  # 通常用于状态管理
  # 假设有一个自定义主题包来模仿Adwaita风格，实际中你可能需要手动设置主题

然后，运行flutter pub get来获取这些依赖项。

接下来，我们创建一个Flutter应用，使用Bitsdojo的窗口管理功能，并尝试自定义主题以模仿Adwaita风格。

import 'package:flutter/material.dart';
import 'package:bitsdojo_window/bitsdojo_window.dart';
import 'package:provider/provider.dart';

void main() {
  // 初始化BitsdojoWindow
  BitsdojoWindow.initialize();

  runApp(
    MultiProvider(
      providers: [
        // 可以在这里添加你的状态管理提供者
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 自定义主题以模仿Adwaita风格
    final ThemeData adwaitaTheme = ThemeData(
      primarySwatch: Colors.blueGrey, // Adwaita的主色调偏灰蓝
      scaffoldBackgroundColor: Color(0xFFEDEDED), // 背景色
      textTheme: TextTheme(
        bodyText1: TextStyle(color: Colors.black87),
        // 其他文本样式...
      ),
      // 其他主题设置...
    );

    return MaterialApp(
      title: 'Flutter Adwaita Style App',
      theme: adwaitaTheme,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Adwaita Style UI'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, Adwaita Style!',
              style: Theme.of(context).textTheme.headline4,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 打开一个新的Bitsdojo窗口
                BitsdojoWindow.window!.show();
              },
              child: Text('Open New Window'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 初始化了BitsdojoWindow。
  2. 创建了一个自定义的ThemeData来模仿Adwaita风格。
  3. 使用这个自定义主题构建了一个简单的Flutter应用。
  4. 在应用中添加了一个按钮，用于演示如何使用BitsdojoWindow打开一个新窗口（注意：这只是一个示例，实际功能可能需要更多代码）。

请注意，由于libadwaita_bitsdojo不是一个官方或广泛认可的插件名，上述代码是基于假设和现有库的组合。如果你指的是一个特定的、已经存在的插件，请提供准确的包名，以便给出更精确的代码示例。

回到顶部