教程错误 #13 - cfug/flutter-cn-codelabs

neromaycry neromaycry · Jun'19

教程题目：MDC Flutter 教程 3：Material 组件主题、形状、阴影和类型

错误1：
链接：https://codelabs.flutter-io.cn/codelabs/mdc-103-flutter-cn/index.html#3
错误描述：

final ThemeData _kShrineTheme = _buildShrineTheme();

ThemeData _buildShrineTheme() {
  final ThemeData base = ThemeData.light();
  return base.copyWith(
    accentColor: kShrineBrown900,
    primaryColor: kShrinePink100,
    buttonColor: kShrinePink100,
    scaffoldBackgroundColor: kShrineBackgroundWhite,
    cardColor: kShrineBackgroundWhite,
    textSelectionColor: kShrinePink100,
    errorColor: kShrineErrorRed,
    // TODO: Add the text themes (103)
    // TODO: Add the icon themes (103)
    // TODO: Decorate the inputs (103)
  );
}

上述代码中，

buttonColor: kShrinePink100,

此种写法不正确，应改为下面的写法：

buttonTheme: base.buttonTheme.copyWith(buttonColor: kShrinePink100),

错误2:
链接：https://codelabs.flutter-io.cn/codelabs/mdc-103-flutter-cn/index.html#4
错误描述：

class AccentColorOverride extends StatelessWidget {
  const AccentColorOverride({Key key, this.color, this.child})
      : super(key: key);

  final Color color;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Theme(
      child: child,
      data: Theme.of(context).copyWith(accentColor: color),
    );
  }
}

上面代码中，

data: Theme.of(context).copyWith(accentColor: color),

应把accentColor改为primaryColor，

data: Theme.of(context).copyWith(primaryColor: color),

2 likes

replies 5
views 6.2K
likes 5

Luke Cheng chenglu · Jun'19 Team

收到，感谢提出，我看一下之后回复。:thumbsup:

XinLei Vadaski · Jun'19

感谢你的反馈，我根据你的反馈查看了相关源码。

第一处：

// Used as the default color (fill color) for RaisedButtons. Computing the
    // default for ButtonThemeData for the sake of backwards compatibility.
    buttonColor ??= isDark ? primarySwatch[600] : Colors.grey[300];
    buttonTheme ??= ButtonThemeData(
      colorScheme: colorScheme,
      buttonColor: buttonColor,
      disabledColor: disabledColor,
      highlightColor: highlightColor,
      splashColor: splashColor,
      materialTapTargetSize: materialTapTargetSize,
    );

从源码可以发现，二者的效果是一样的。

第二处

教程中提到：让我们额外创建一个类，将 widget 的 Accent 颜色值改为设计师给我们的颜色。
这里应该是一个组件用于重写 accent color，所以我个人认为 data: Theme.of(context).copyWith(accentColor: color), 是正确的操作。
能谈一下为什么你觉得这两个地方有问题吗；）

neromaycry neromaycry · Jun'19 Author

@Vadaski
Hi,
因为这两处都是我按照教程所述亲自尝试发现的，实际运行效果与教程中展示的图片效果是不一致的。

因此我特地查看了一下此教程项目的源码，发现确实这两处与教程中所述是不一致的，如下：

第一处：

教程源码中多了这么几行代码：

buttonTheme: base.buttonTheme.copyWith(
    buttonColor: kShrinePink100,
    textTheme: ButtonTextTheme.normal,
),

这应该是与我之前所述是基本一致的，我猜应该是无法通过直接修改buttonColor值来修改Raise Button的颜色，必须要重新定义buttonTheme中的buttonColor属性来达到覆盖的目的

第二处：

教程源码中是这样写的：

data: Theme.of(context).copyWith(
    accentColor: color,
    brightness: Brightness.dark,
),

这样可以达到教程图片中所示的运行效果
但我个人认为不是很妥当，因为这里我理解应该是想要修改TextField这个组件的背景色，以达到教程图片中所示的效果，而重写accentColor并不会修改TextField的背景颜色，而是会修改其文字的颜色，所以这个地方改为重写primaryColor是更为合适的，即下面的写法：

data: Theme.of(context).copyWith(primaryColor: color),

当然我的理解可能比较粗浅，您可以不必采纳。但我的想法是，既然此教程是基于教程源码来编写的，为了避免给初学者带来不必要的烦恼，是否教程所述内容应与教程源码保持一致？

2 likes

Luke Cheng chenglu · Jun'19 Team

同意 codelab 教程要面向初学者友好，我最近三天都在会上，xinlei 抽空再看一下，如果有必要我会通知 global 的 codelabs 文档同步做修改。
谢谢两位。

XinLei Vadaski · Jun'19

Hi neromaycry！
我重新复现了你的反馈，确实和描述一致。抱歉，之前我直接根据代码进行推断，判断有误。
我们下午和一些开发者讨论了这个问题，最终确定这是 Flutter 的一个BUG。在 ThemeData.copyWith 的时候在构造器中声明的属性会丢失 ButtonColor 中的同名属性。具体可参见下面的 issue：

这个 Bug 目前仍未修复，官方建议直接通过设置 ThemeData 进行实现。
第二处同样也是，代码与行为表现不一致，需要使用 primaryColor。
建议采用 neromaycry 所给的方案，再次感谢你的时间与认真的态度！

1 likes