主页 / coding / 问题 / 79036180
Accepted
Geremia Moretti
Asked: 2024-09-29 18:38:37 +0800 CST

使用 ThemeData 管理容器的边框颜色

  • 772

我正在努力寻找一种解决方案来管理容器边框的颜色，而无需每次都对它们进行硬编码。

我想在 ThemeData 中为白天模式和夜间模式的边框定义自定义颜色，但我找不到正确的属性。目前 Dart 为边框选择的颜色是深色。

只是为了清楚起见...我想写一些这样的东西：

 border: Border.all(
   width: width * 0.002,
 ),

未指定颜色。

flutter

2 个回答

  1. Best Answer

    如果你看一下源代码Border.all中的构造函数，它看起来像这样：

    Border.all({
  Color color = const Color(0xFF000000),
  double width = 1.0,
  BorderStyle style = BorderStyle.solid,
  double strokeAlign = BorderSide.strokeAlignInside,
})

    如您所见，该color参数默认为Color(0xFF000000)，即纯黑色。这意味着它不会从应用程序继承或引用任何颜色ThemeData。不幸的是，此参数未链接到我们可以轻松自定义的主题属性。

    此外，扩展该类来创建使用类似Border的自定义边框不是一个选择，因为该类无权访问。Theme.of(context).colorScheme.surfacecolorBordercontext

    但是，如果您正在寻找一种更灵活的方式在整个应用中一致地应用边框，则可以创建一个全局函数。此函数可以从主题中提取颜色值并将其应用于边框，如下所示：

    Border getCustomBorder({
  required BuildContext context,
  double width = 1.0,
}) {
  return Border.all(
    width: width,
    color: Theme.of(context).colorScheme.surface, // Pull color from the theme
  );
}

    然后，您可以在小部件中像这样使用此功能：

    border: getCustomBorder(
  context: context,
  width: width * 0.002,
),
    • 0

  2. 您必须首先创建一个 dart 文件：

    import 'package:flutter/material.dart';

enum ThemeType { dark, light }

extension AppTheme on ThemeData {
  Color get blue => brightness == Brightness.light ? const Color(0xFF016BE7) : const Color(0xFF012EE9);
}

    您可以定义暗色或亮色模式下所需的每种颜色

    你可以使用这个

    Border.all(
    width: width,
    color: Theme.of(context).blue
  )

    当您更改主题（从亮到暗或从暗到亮）时，颜色可以自动更改。

    • 0

相关问题