Flutter笔记：谈Material状态属性-为什么FlatButton等旧版按钮就废弃了

FlatButton(
  color: Color,
  disabledColor: Color,
  focusColor: Color,
  highlightColor: Color,
  textColor: Color,
  disabledTextColor: Color,
  focusTextColor: Color,
  highlightTextColor: Color,
  borderColor: Color,
  disabledBorderColor: Color,
  focusBorderColor: Color,
  highlightBorderColor: Color,
)

Color? getColor(Set<MaterialState> states) {
  const Color defaultColor = Colors.blue; // 默认颜色
  const Color pressedColor = Colors.blueAccent; // 按压时的颜色
  const Color hoveredColor = Colors.lightBlue; // 悬停时的颜色
  const Color focusedColor = Colors.blueGrey; // 聚焦时的颜色
  const Color disabledColor = Colors.grey; // 禁用时的颜色

  if (states.contains(MaterialState.pressed)) {
    return pressedColor;
  } else if (states.contains(MaterialState.hovered)) {
    return hoveredColor;
  } else if (states.contains(MaterialState.focused)) {
    return focusedColor;
  } else if (states.contains(MaterialState.disabled)) {
    return disabledColor;
  }

  return defaultColor; // 如果没有特定状态，返回默认颜色
}

TextButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) {
      if (states.contains(MaterialState.pressed)) {
        return Colors.blue; // 按下状态下的颜色
      } else if (states.contains(MaterialState.disabled)) {
        return Colors.grey; // 禁用状态下的颜色
      }
      return Colors.red; // 默认颜色
    }),
  ),
  onPressed: () {},
  child: Text('点击我'),
)

ButtonStyle style = ButtonStyle(
  backgroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) {
    if (states.contains(MaterialState.pressed))
      return Theme.of(context).colorScheme.primary.withOpacity(0.5);
    else if (states.contains(MaterialState.disabled))
      return Colors.grey;
    return Theme.of(context).colorScheme.primary; // 默认颜色
  }),
);

class MaterialStatePropertyAll<T> implements MaterialStateProperty<T> {
  final T value;

  const MaterialStatePropertyAll(this.value);

  @override
  T resolve(Set<MaterialState> states) => value;

  @override
  String toString() {
    if (value is double) {
      return 'MaterialStatePropertyAll(${debugFormatDouble(value as double)})';
    } else {
      return 'MaterialStatePropertyAll($value)';
    }
  }
}

ButtonStyle flatButtonStyle = ButtonStyle(
  backgroundColor: MaterialStatePropertyAll(Colors.blue),
  foregroundColor: MaterialStatePropertyAll(Colors.white),
);

TextButton(
  style: flatButtonStyle,
  onPressed: () {},
  child: Text('Always Blue'),
)

abstract class MaterialStateColor extends Color implements MaterialStateProperty<Color> {
  /// 抽象常量构造函数。这个构造函数使得子类可以提供
  /// 常量构造函数，以便它们可以在常量表达式中使用。
  const MaterialStateColor(super.defaultValue);

  /// 从 [MaterialPropertyResolver<Color>] 回调函数创建一个 [MaterialStateColor]。
  ///
  /// 如果作为普通颜色使用，则在默认状态下（空状态集）解析的颜色将被使用。
  ///
  /// 给定的回调参数必须在默认状态下返回一个非空颜色。
  static MaterialStateColor resolveWith(MaterialPropertyResolver<Color> callback) => _MaterialStateColor(callback);

  /// 返回一个 [Color]，用于当 Material 组件处于指定状态时使用。
  @override
  Color resolve(Set<MaterialState> states);
}

ButtonStyle style = ButtonStyle(
  backgroundColor: MaterialStateColor.resolveWith((Set<MaterialState> states) {
    if (states.contains(MaterialState.pressed)) {
      return Colors.deepPurple; // 按下状态下的颜色
    } else if (states.contains(MaterialState.hovered)) {
      return Colors.deepPurpleAccent; // 悬停状态下的颜色
    }
    return Colors.purple; // 默认颜色
  }),
);

TextButton(
  style: style,
  onPressed: () {},
  child: Text('Press Me'),
)

abstract class MaterialStateColor extends Color implements MaterialStateProperty<Color> {
  const MaterialStateColor(super.defaultValue);

  /// 从回调函数创建 MaterialStateColor。
  static MaterialStateColor resolveWith(MaterialPropertyResolver<Color> callback) => _MaterialStateColor(callback);

  @override
  Color resolve(Set<MaterialState> states);
}

ButtonStyle style = ButtonStyle(
  backgroundColor: MaterialStateColor.resolveWith((Set<MaterialState> states) {
    if (states.contains(MaterialState.pressed)) {
      return Colors.deepPurple; // 按下状态下的颜色
    } else if (states.contains(MaterialState.hovered)) {
      return Colors.deepPurpleAccent; // 悬停状态下的颜色
    }
    return Colors.purple; // 默认颜色
  }),
);

TextButton(
  style: style,
  onPressed: () {},
  child: Text('Press Me'),
);

ButtonStyle style = ButtonStyle(
  mouseCursor: MaterialStateMouseCursor.resolveWith((Set<MaterialState> states) {
    if (states.contains(MaterialState.hovered)) {
      return SystemMouseCursors.click; // 悬停状态下的光标
    } else if (states.contains(MaterialState.pressed)) {
      return SystemMouseCursors.grabbing; // 按下状态下的光标
    }
    return MouseCursor.defer; // 默认光标
  }),
);

TextButton(
  style: style,
  onPressed: () {},
  child: Text('Hover or Press'),
)

ButtonStyle style = ButtonStyle(
  shape: MaterialStateOutlinedBorder.resolveWith((Set<MaterialState> states) {
    if (states.contains(MaterialState.pressed)) {
      return RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
        side: BorderSide(color: Colors.deepPurple, width: 2),
      ); // 按下状态下的边框样式
    } else if (states.contains(MaterialState.hovered)) {
      return RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
        side: BorderSide(color: Colors.deepPurpleAccent, width: 2),
      ); // 悬停状态下的边框样式
    }
    return RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
      side: BorderSide(color: Colors.purple, width: 1),
    ); // 默认边框样式
  }),
);

TextButton(
  style: style,
  onPressed: () {},
  child: Text('Press Me'),
)

InputDecoration inputDecoration = InputDecoration(
  border: MaterialStateOutlineInputBorder.resolveWith((Set<MaterialState> states) {
    if (states.contains(MaterialState.focused)) {
      return OutlineInputBorder(
        borderSide: BorderSide(color: Colors.blue, width: 2.0),
      ); // 聚焦状态下的边框样式
    } else if (states.contains(MaterialState.error)) {
      return OutlineInputBorder(
        borderSide: BorderSide(color: Colors.red, width: 2.0),
      ); // 错误状态下的边框样式
    }
    return OutlineInputBorder(
      borderSide: BorderSide(color: Colors.grey, width: 1.0),
    ); // 默认边框样式
  }),
);

TextField(
  decoration: inputDecoration,
)

ButtonStyle style = ButtonStyle(
  textStyle: MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
    if (states.contains(MaterialState.pressed)) {
      return TextStyle(
        color: Colors.white,
        fontSize: 16,
        fontWeight: FontWeight.bold
      ); // 按下状态下的文本样式
    } else if (states.contains(MaterialState.hovered)) {
      return TextStyle(
        color: Colors.white,
        fontSize: 14,
        decoration: TextDecoration.underline
      ); // 悬停状态下的文本样式
    }
    return TextStyle(
      color: Colors.black,
      fontSize: 14
    ); // 默认文本样式
  }),
);

TextButton(
  style: style,
  onPressed: () {},
  child: Text('Press Me'),
)

abstract class MaterialStateUnderlineInputBorder extends UnderlineInputBorder implements MaterialStateProperty<UnderlineInputBorder> {
  /// 抽象常量构造函数。这个构造函数使子类能够提供常量构造函数，以便它们可以在常量表达式中使用。
  const MaterialStateUnderlineInputBorder();

  /// 返回一个 [UnderlineInputBorder]，用于指定状态下使用的 Material 组件。
  @override
  UnderlineInputBorder resolve(Set<MaterialState> states);
}

class CustomUnderlineInputBorder extends MaterialStateUnderlineInputBorder {
  @override
  UnderlineInputBorder resolve(Set<MaterialState> states) {
    // 如果输入框处于聚焦状态，则返回蓝色边框
    if (states.contains(MaterialState.focused)) {
      return const UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.blue, width: 2.0),
      );
    }
    // 否则返回灰色边框
    return const UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.grey, width: 1.0),
    );
  }
}

TextField(
  decoration: InputDecoration(
    // 使用自定义的边框样式
    border: CustomUnderlineInputBorder(),
  ),
)

/// 交互状态，一些 Material 部件在接收用户输入时可以处于的状态。
///
/// 状态由 https://material.io/design/interaction/states.html#usage 定义。
///
/// 一些 Material 部件会在 `Set<MaterialState>` 中跟踪它们当前的状态。
///
enum MaterialState {
  /// 用户将鼠标光标拖动到给定部件上时的状态。
  ///
  /// 参见：https://material.io/design/interaction/states.html#hover.
  hovered,

  /// 用户使用键盘导航到给定部件时的状态。
  ///
  /// 有时也会在部件被点击时触发。例如，当 [TextField] 被点击时，它会变为 [focused]。
  ///
  /// 参见：https://material.io/design/interaction/states.html#focus.
  focused,

  /// 用户在给定部件上主动按下时的状态。
  ///
  /// 参见：https://material.io/design/interaction/states.html#pressed.
  pressed,

  /// 用户正在通过拖动将此部件从一个位置拖动到另一个位置时的状态。
  ///
  /// https://material.io/design/interaction/states.html#dragged.
  dragged,

  /// 当此项被选中时的状态。
  ///
  /// 适用于可以切换的内容（如芯片和复选框）以及从一组选项中选择的内容（如选项卡和单选按钮）。
  ///
  /// 参见：https://material.io/design/interaction/states.html#selected.
  selected,

  /// 当此部件与滚动视图下方的内容重叠时的状态。
  ///
  /// 由 [AppBar] 使用，指示主滚动视图的内容已向上滚动并位于应用栏后面。
  scrolledUnder,

  /// 当此部件被禁用且无法进行交互时的状态。
  ///
  /// 禁用的部件不应对悬停、聚焦、按压或拖动交互做出响应。
  ///
  /// 参见：https://material.io/design/interaction/states.html#disabled.
  disabled,

  /// 当部件进入某种无效状态时的状态。
  ///
  /// 参见 https://material.io/design/interaction/states.html#usage.
  error,
}

/// 用于根据部件的交互“状态”（定义为一组 MaterialState）返回类型为 `T` 的值的接口。
/// MaterialStateProperty 代表依赖于部件的材料“状态”的值。状态被编码为一组 MaterialState 值，如 MaterialState.focused、MaterialState.hovered、MaterialState.pressed。例如，InkWell.overlayColor 定义了当 InkWell 被按下（“涟漪颜色”）、聚焦或悬停时填充的颜色。InkWell 使用 overlay color 的 resolve 方法来计算当前状态下 InkWell 的颜色。
/// ButtonStyle 用于配置按钮（如 TextButton、ElevatedButton 和 OutlinedButton）的外观，具有许多 material state 属性。按钮部件会跟踪它们当前的 material state，并在需要值时解析按钮样式的 material state 属性。
abstract class MaterialStateProperty<T> {
  /// 根据 [states] 返回类型为 `T` 的值。
  ///
  /// 像 TextButton 和 ElevatedButton 这样的部件会将此方法应用于它们当前的 MaterialState，以在构建时计算颜色和其他视觉参数。
  T resolve(Set<MaterialState> states);

  /// 如果 `value` 是 MaterialStateProperty，则根据给定的状态集解析值，否则返回值本身。
  ///
  /// 对于那些参数可以选择是 MaterialStateProperty 的部件很有用。例如，InkWell.mouseCursor 可以是 MouseCursor 或 MaterialStateProperty<MouseCursor>。
  static T resolveAs<T>(T value, Set<MaterialState> states) {
    if (value is MaterialStateProperty<T>) {
      final MaterialStateProperty<T> property = value;
      return property.resolve(states);
    }
    return value;
  }

  /// 从仅有 MaterialPropertyResolver 函数创建 MaterialStateProperty 的便捷方法。
  /// Convenience method for creating a [MaterialStateProperty] that resolves
  /// to a single value for all states.
  ///
  /// If you need a const value, use [MaterialStatePropertyAll] directly.
  ///
  // TODO(darrenaustin): Deprecate this when we have the ability to create
  // a dart fix that will replace this with MaterialStatePropertyAll:
  // https://github.com/dart-lang/sdk/issues/49056.
  static MaterialStateProperty<T> all<T>(T value) => MaterialStatePropertyAll<T>(value);

  /// 在两个 [MaterialStateProperty] 之间进行线性插值。
  static MaterialStateProperty<T?>? lerp<T>(
    MaterialStateProperty<T>? a,
    MaterialStateProperty<T>? b,
    double t,
    T? Function(T?, T?, double) lerpFunction,
  ) {
    // 避免为常见情况创建 _LerpProperties 对象。
    if (a == null && b == null) {
      return null;
    }
    return _LerpProperties<T>(a, b, t, lerpFunction);
  }
}

class _LerpProperties<T> implements MaterialStateProperty<T?> {
  const _LerpProperties(this.a, this.b, this.t, this.lerpFunction);

  final MaterialStateProperty<T>? a;
  final MaterialStateProperty<T>? b;
  final double t;
  final T? Function(T?, T?, double) lerpFunction;

  @override
  T? resolve(Set<MaterialState> states) {
    final T? resolvedA = a?.resolve(states);
    final T? resolvedB = b?.resolve(states);
    return lerpFunction(resolvedA, resolvedB, t);
  }
}

class _MaterialStatePropertyWith<T> implements MaterialStateProperty<T> {
  _MaterialStatePropertyWith(this._resolve);

  final MaterialPropertyResolver<T> _resolve;

  @override
  T resolve(Set<MaterialState> states) => _resolve(states);
}

/// 用于创建一个 [MaterialStateProperty]，该属性对所有状态都解析为给定值的便利类。
class MaterialStatePropertyAll<T> implements MaterialStateProperty<T> {

  /// 构造一个总是解析为给定值的 [MaterialStateProperty]。
  const MaterialStatePropertyAll(this.value);

  /// 将用于所有状态的属性值。
  final T value;

  @override
  T resolve(Set<MaterialState> states) => value;

  @override
  String toString() {
    if (value is double) {
      return 'MaterialStatePropertyAll(${debugFormatDouble(value as double)})';
    } else {
      return 'MaterialStatePropertyAll($value)';
    }
  }
}

/// 管理一组 [MaterialState] 并在更改时通知监听器。
///
/// 由那些为了支持额外状态而公开其内部状态的扩展而使用。参见 [TextButton] 作为示例。
///
/// 控制器的 [value] 是其当前的状态集。每当 [value] 更改时，监听器都会收到通知。应该只使用 [update] 来更改 [value]；不应直接修改它。
///
/// 控制器的 [value] 表示一组状态，通常是 [MaterialStateProperty] 值解析的状态。它 _不是_ 组件的内在状态。组件负责确保控制器的 [value] 跟踪其内在状态。例如，不能通过将 [MaterialState.focused] 添加到其控制器来请求组件的键盘焦点。当组件获得焦点或失去焦点时，它将 [update] 其控制器的 [value] 并通知更改的监听器。
class MaterialStatesController extends ValueNotifier<Set<MaterialState>> {
  /// 创建一个 MaterialStatesController。
  MaterialStatesController([Set<MaterialState>? value]) : super(<MaterialState>{...?value});

  /// 如果 [add] 为 true，则将 [state] 添加到 [value]，否则将其移除，并在 [value] 更改时通知监听器。
  void update(MaterialState state, bool add) {
    final bool valueChanged = add ? value.add(state) : value.remove(state);
    if (valueChanged) {
      notifyListeners();
    }
  }
}