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

Question

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

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

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

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

不指定颜色。

Answer 1

如果你看一下

源代码

中的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.surface

的内容作为

color

并不是一个选项，因为

Border

类无法访问

context

。

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

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,
),