Flutter UI元素颜色管理插件appkit_ui_element_colors的使用

Flutter UI元素颜色管理插件appkit_ui_element_colors的使用

appkit_ui_element_colors 是一个Flutter插件，用于访问AppKit的“UI元素颜色”，方便在您的应用中检索标准的颜色对象，例如窗口、控件、标签、文本、选择和其他内容。

截图示例项目

截图

开始使用

首先，将插件添加到您的项目中：

flutter pub add appkit_ui_element_colors

然后，在Dart代码中导入该插件：

import 'package:appkit_ui_element_colors/appkit_ui_element_colors.dart';

特性

获取UI元素颜色

以下是一些可用的颜色：

  • labelColor
  • secondaryLabelColor
  • tertiaryLabelColor
  • quaternaryLabelColor
  • textColor
  • placeholderTextColor
  • selectedTextColor
  • textBackgroundColor
  • selectedTextBackgroundColor
  • keyboardFocusIndicatorColor
  • unemphasizedSelectedTextColor
  • unemphasizedSelectedTextBackgroundColor
  • linkColor
  • separatorColor
  • selectedContentBackgroundColor
  • unemphasizedSelectedContentBackgroundColor
  • selectedMenuItemTextColor
  • gridColor
  • headerTextColor
  • alternatingContentBackgroundColors0
  • alternatingContentBackgroundColors1
  • controlAccentColor
  • controlColor
  • controlBackgroundColor
  • controlTextColor
  • disabledControlTextColor
  • currentControlTint
  • selectedControlColor
  • selectedControlTextColor
  • alternateSelectedControlTextColor
  • scrubberTexturedBackground
  • windowBackgroundColor
  • windowFrameTextColor
  • underPageBackgroundColor
  • findHighlightColor
  • highlightColor
  • shadowColor

每个颜色都可以通过AppkitUiElementColors.getColor方法获取为Color对象：

final darkWindowBackgroundColor = await AppkitUiElementColors.getColor(
  uiElementColor: UiElementColor.windowBackgroundColor,
  appearance: NSAppearanceName.darkAqua,
);

还可以将其转换为任何可用的NSColorSpace并以请求的NSColorComponent形式获取为映射：

final components = await AppkitUiElementColors.getColorComponents(
  uiElementColor: UiElementColor.selectedControlColor,
  components: {
    NSColorComponent.redComponent,
    NSColorComponent.greenComponent,
    NSColorComponent.blueComponent,
  },
  colorSpace: NSColorSpace.sRGB,
  appearance: NSAppearanceName.aqua,
);

// 输出: {blueComponent: 0.7450980544090271, redComponent: 1.0, greenComponent: 0.9333333373069763}
print(components);

观察系统颜色变化

某些事件（如用户更改首选强调色）可能会触发系统颜色的变化。您可以使用SystemColorObserver类来观察这些变化。AppkitUiElementColors类提供了一个全局共享实例的SystemColorObserver，可以通过以下方式访问：

AppkitUiElementColors.systemColorObserver.stream
    .listen((_) => print('System colors changed.'));

使用UiElementColorBuilder构建小部件

UiElementColorBuilder类提供了一种方便的方式来构建依赖于appkit_ui_element_colors提供的UI元素颜色的小部件：

UiElementColorBuilder(
  builder: (context, colorContainer) => Container(
    color: colorContainer.windowBackgroundColor,
  ),
);

默认情况下，UiElementColorBuilder使用SharedUiElementColorContainerInstanceProvider来提供全局共享的UiElementColorContainer实例。如果您的应用包含具有不同MediaQueryData覆盖的表面，请改用OwnedUiElementColorContainerInstanceProvider：

// 一个深色的cupertino主题。
CupertinoTheme(
  data: const CupertinoThemeData(
    brightness: Brightness.dark,
  ),
  // 覆盖platformBrightness为深色。
  child: MediaQuery(
    data: MediaQuery.of(context).copyWith(
      platformBrightness: Brightness.dark,
    ),
    child: UiElementColorBuilder(
      // 由于应用内可能有不覆盖亮度的表面，请使用OwnedUiElementColorContainerInstanceProvider。
      uiElementColorContainerInstanceProvider:
          OwnedUiElementColorContainerInstanceProvider(),
      builder: (context, colorContainer) => Container(
        color: colorContainer.windowBackgroundColor,
      ),
    ),
  ),
);

错误地使用SharedUiElementColorContainerInstanceProvider会抛出以下断言错误：

“在SharedUiElementColorContainerInstanceProvider中发现冲突的MediaQueryData。如果您在具有不同MediaQueryData（如不同的主题亮度或辅助功能设置）的widget子树中使用UiElementColorBuilder，请使用OwnedUiElementColorContainerInstanceProvider。”

完整示例

以下是一个完整的示例，展示了如何使用appkit_ui_element_colors插件来显示所有UI元素颜色及其名称和哈希值。

import 'package:flutter/cupertino.dart';
import 'package:appkit_ui_element_colors/appkit_ui_element_colors.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('appkit_ui_element_colors example'),
        ),
        child: _UiElementColorList(),
      ),
    );
  }
}

/// 显示所有UI元素颜色的列表。
class _UiElementColorList extends StatelessWidget {
  const _UiElementColorList();

  [@override](/user/override)
  Widget build(BuildContext context) {
    // UiElementBuilder 提供了一种方便的方式来构建依赖于UI元素颜色的小部件。
    return UiElementColorBuilder(
      builder: (context, colorContainer) {
        return ListView.builder(
          itemCount: UiElementColor.values.length,
          itemBuilder: (context, index) {
            final uiElementColor = UiElementColor.values[index];

            return Container(
              color: index % 2 == 0
                  ? colorContainer.alternatingContentBackgroundColors0
                  : colorContainer.alternatingContentBackgroundColors1,
              padding: const EdgeInsets.symmetric(
                horizontal: 8.0,
                vertical: 4.0,
              ),
              child: Row(
                children: [
                  _ColorPreview(
                    uiElementColor: colorContainer
                        .getColorFromUiElementColor(uiElementColor),
                  ),
                  const SizedBox(width: 12.0),
                  Expanded(
                    child: _UiElementColorNameText(
                      colorContainer: colorContainer,
                      uiElementColor: uiElementColor,
                    ),
                  ),
                  _ColorHashText(
                    colorContainer: colorContainer,
                    uiElementColor: uiElementColor,
                  ),
                ],
              ),
            );
          },
        );
      },
    );
  }
}

/// 显示一个[uiElementColor]名称的部件。
class _UiElementColorNameText extends StatelessWidget {
  /// 创建一个[_UiElementColorNameText]用于[uiElementColor]。
  const _UiElementColorNameText({
    required this.colorContainer,
    required this.uiElementColor,
  });

  /// 用于样式化文本的颜色容器。
  final UiElementColorContainer colorContainer;

  /// 应显示其名称的色彩。
  final UiElementColor uiElementColor;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Text(
      uiElementColor.name,
      softWrap: false,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(
        color: colorContainer.textColor,
      ),
    );
  }
}

/// 显示颜色的哈希文本的部件。
class _ColorHashText extends StatelessWidget {
  /// 创建一个[_ColorHashText]用于[uiElementColor]。
  const _ColorHashText({
    required this.colorContainer,
    required this.uiElementColor,
  });

  /// 用于样式化文本的颜色容器。
  final UiElementColorContainer colorContainer;

  /// 应显示其哈希文本的颜色。
  final UiElementColor uiElementColor;

  [@override](/user/override)
  Widget build(BuildContext context) {
    final text = colorContainer
        .getColorFromUiElementColor(uiElementColor)
        .value
        .toRadixString(16)
        .padLeft(8, '0');

    return Text(
      '#$text',
      style: TextStyle(
        color: colorContainer.textColor.withOpacity(0.5),
      ),
    );
  }
}

/// 显示给定颜色的正方形。
///
/// 如果颜色透明，则会在正方形下方显示棋盘图案。
class _ColorPreview extends StatelessWidget {
  /// 创建一个[_ColorPreview]，带有指定的UI元素颜色。
  const _ColorPreview({
    required this.uiElementColor,
  });

  /// 预览的颜色。
  final Color uiElementColor;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: const BoxDecoration(
        color: Color.fromRGBO(255, 255, 255, 1.0),
      ),
      child: Stack(
        children: [
          Container(
            width: 8.0,
            height: 8.0,
            color: const Color.fromRGBO(0, 0, 0, 1.0),
          ),
          Positioned(
            right: 0.0,
            bottom: 0.0,
            child: Container(
              width: 8.0,
              height: 8.0,
              color: const Color.fromRGBO(0, 0, 0, 1.0),
            ),
          ),
          Container(
            decoration: BoxDecoration(
              border: const Border.fromBorderSide(
                BorderSide(
                  color: Color.fromRGBO(128, 128, 128, 1.0),
                ),
              ),
              color: uiElementColor,
            ),
            width: 16.0,
            height: 16.0,
          ),
        ],
      ),
    );
  }
}

更多关于Flutter UI元素颜色管理插件appkit_ui_element_colors的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter UI元素颜色管理插件appkit_ui_element_colors的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用appkit_ui_element_colors插件进行UI元素颜色管理的代码示例。请注意，假设appkit_ui_element_colors插件已经存在并且配置正确，这里我们主要展示如何使用它来管理UI元素的颜色。

首先，确保在pubspec.yaml文件中添加依赖项（如果插件存在的话，以下是一个假设的依赖项添加方式）：

dependencies:
  flutter:
    sdk: flutter
  appkit_ui_element_colors: ^x.y.z  # 替换为实际版本号

然后运行flutter pub get来安装依赖。

接下来，我们假设appkit_ui_element_colors提供了一个ThemeColors类，该类包含了应用中所有UI元素的颜色定义。以下是如何在Flutter应用中使用这个插件来管理颜色的示例代码：

import 'package:flutter/material.dart';
import 'package:appkit_ui_element_colors/appkit_ui_element_colors.dart';  // 假设的导入路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 使用ThemeData来应用全局主题颜色
    return MaterialApp(
      title: 'Flutter Color Management Demo',
      theme: ThemeData(
        // 使用appkit_ui_element_colors插件提供的颜色
        primaryColor: ThemeColors.primaryColor,
        accentColor: ThemeColors.accentColor,
        scaffoldBackgroundColor: ThemeColors.backgroundColor,
        // 可以继续添加其他颜色定义
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Color Management Demo'),
        backgroundColor: ThemeColors.appBarColor,  // 使用插件提供的颜色
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, Flutter!',
              style: TextStyle(color: ThemeColors.textColor),  // 使用插件提供的文本颜色
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text('Button'),
              style: ElevatedButton.styleFrom(
                primary: ThemeColors.buttonColor,  // 使用插件提供的按钮颜色
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们假设ThemeColors类包含了一些静态属性，如primaryColor、accentColor、backgroundColor、appBarColor、textColor和buttonColor等，这些属性分别定义了应用中不同UI元素的颜色。我们通过ThemeData将这些颜色应用到整个应用的主题中，并在具体的UI组件中使用这些颜色。

请注意，由于appkit_ui_element_colors插件是假设的，因此实际的类名、属性名和导入路径可能会有所不同。你需要根据插件的实际文档和API来调整代码。如果插件提供了其他更高级的功能，如动态主题切换等，你也可以参考插件的文档进行相应的实现。

回到顶部