Flutter：如何在明暗模式下为文本按钮设置 2 种不同样式

Question

我正在尝试创建类似这样的自定义主题数据。

    class CustomTheme {
      static ThemeData get lightTheme {
        return ThemeData(
          textTheme: TextTheme(
            headline1: h1.copyWith(color: Color(0xff444444)),
            headline2: h2.copyWith(color: Color(0xff444444)),
            headline3: h3.copyWith(color: Color(0xff444444)),
            headline4: h4.copyWith(color: Color(0xff444444)),
            headline5: h5.copyWith(color: Color(0xff444444)),
            headline6: h6.copyWith(color: Color(0xff444444)),
            subtitle1: TextStyle(color: Color(0xff444444)),
            subtitle2: TextStyle(color: Color(0xff444444)),
            bodyText1: TextStyle(color: Color(0xff444444)),
            bodyText2: TextStyle(color: Color(0xff444444)),
          ),
textButtonTheme: TextButtonThemeData(
  style: TextButton.styleFrom(
    shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(0.0),
          side: BorderSide(color: kButtonBorderColor)),
    backgroundColor: kButtonBackgroundColor,
  ),
),
        );
      }
      static ThemeData get darkTheme {
        return ThemeData(
          textTheme: TextTheme(
            headline1: h1.copyWith(color: Color(0xffebebeb)),
            headline2: h2.copyWith(color: Color(0xffebebeb)),
            headline3: h3.copyWith(color: Color(0xffebebeb)),
            headline4: h4.copyWith(color: Color(0xffebebeb)),
            headline5: h5.copyWith(color: Color(0xffebebeb)),
            headline6: h6.copyWith(color: Color(0xffebebeb)),
            subtitle1: TextStyle(color: Color(0xffebebeb)),
            subtitle2: TextStyle(color: Color(0xffebebeb)),
            bodyText1: TextStyle(color: Color(0xffebebeb)),
            bodyText2: TextStyle(color: Color(0xffebebeb)),
          ),
textButtonTheme: TextButtonThemeData(
  style: TextButton.styleFrom(
    shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(0.0),
          side: BorderSide(color: kButtonBorderColor)),
    backgroundColor: kButtonBackgroundColorDark,
  ),
),
        );
      }
    }

我的要求是，我有两种不同的按钮样式（明暗模式各 2 个），如下所示。

从我的代码中可以看出，对于明暗主题，我只能为按钮样式提供一种背景颜色。我无法在主题数据中设置额外的 textbuttontheme。如何在我的主题数据中设置这两种按钮样式？还是有任何其他方法可以处理浅色和深色主题的 2 种不同样式？

Answer 1

你不能那样做。正如您自己已经看到的那样，ThemeData 类对于每种类型的按钮主题只有 1 个属性。我对您的建议是为您的按钮创建一个自定义小部件，使用 TextButtonTheme 小部件来覆盖默认主题，并使用 Theme.of(context).brightness 来定义您是处于亮模式还是暗模式。

这是一个可以帮助您的代码示例：

class MyStyledButton extends StatelessWidget {
  final Widget child;
  final VoidCallback? onPressed;

  MyStyledButton({
    required this.child,
    required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    final currentTheme = Theme.of(context);
    final isDarkTheme = currentTheme.brightness == Brightness.dark;
    return TextButtonTheme(
      data: TextButtonThemeData(
        style: TextButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(0.0),
          ),
          backgroundColor: isDarkTheme ? Color(0xffebebeb) : Color(0xff444444),
        ),
      ),
      child: TextButton(
        child: child,
        onPressed: onPressed,
      ),
    );
  }
}