为什么在Flutter中使用颜色方案时不应用primarySwatch颜色?

Question

我是新手，非常困惑在MaterialApp内设置主题属性的颜色。

这是我的代码。

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Playground',
theme: ThemeData(
primarySwatch: Colors.red,
colorScheme: ThemeData().colorScheme.copyWith(
secondary: Colors.pink[300],
tertiary: Colors.purple[200],
),
canvasColor: Color.fromARGB(249, 220, 224, 220),
// brightness: Brightness.dark),
),
initialRoute: '/',
routes: {
'/': (context) => Tabs(),
GridItemDetailList.routeName: (context) => GridItemDetailList()
},
);
}
}

在ThemeData中，我使用primarySwatch和colorScheme。原来我使用的是accentColor，但改为colorScheme，因为它已被弃用。

然而，colorScheme属性不像我预期的那样工作。

当我注释掉colorScheme时，primarySwatch的红色很好地应用到了appBar上。

但是当colorScheme被使用时，primarySwatch的颜色不会应用到appBar上，它会显示material app的默认颜色。

为什么colorScheme不能像accentColor一样工作?我不应该使用primarySwatch和colorScheme来定制它的颜色吗?

Answer 1

因为所有Material组件都使用'ColorScheme'和'Text Theme'默认为UI视觉属性。

官方文件说:

材质组件使用[colorScheme]和[textTheme]来计算视觉属性的默认值。见图片

在指定了ColorScheme之后，你可以使用它的primarySwatch构造函数来提供primarySwatch，但是primary swatch是打开的ThemeData类在这种情况下不起作用。

ThemeData(
fontFamily: 'Lato',
colorScheme: ColorScheme.fromSwatch(primarySwatch: AppColors.primary).copyWith(
secondary: AppColors.secondary,
).copyWith(primary: Colors.amber, secondary: Colors.red,));

关于PrimarySwtach的官方文档:

由于历史原因，您可以提供[primaryColor]或[primarySwatch]来构造[colorScheme]，而不是使用[colorSchemeSeed]或[colorScheme]来构造[colorScheme]，但结果不会像使用种子颜色生成时那样完整。见图片