Flutter: переопределение стиля текста для пунктов выпадающего меню отменяет автоматическое отображение отключенного состояния

#flutter #flutter-layout

#flutter #flutter-layout

Вопрос:

У меня есть a PopupMenuButton с вложенными PopupMenuItem s, каждый из них, в свою очередь, имеет вложенный Text . Один из PopupMenuItem s может быть enabled / отключен, который управляется соответствующим свойством и отображается соответствующим образом (с ярким / бледным цветом).

 Widget popupMenu(SharedPreferences prefs) {
final themeManager = Provider.of<ThemeManager>(context);
return PopupMenuButton(
  onSelected: (selected) {
    switch (selected) {
      case MenuItems.switchTheme:
        themeManager.switchTheme();
        prefs.setBool(
            describeEnum(Prefs.manuallySetDark),
            themeManager.isThemeDark()
        );
        break;
      case MenuItems.autoSwitchTheme:
        prefs.setBool(
            describeEnum(Prefs.manuallySetDark),
            null
        );
        themeManager.updateTheme(null, _model.isDarkTimeOfDay);
        break;
    }
  },
  itemBuilder: (BuildContext context) =>
  [
    PopupMenuItem(
      value: MenuItems.switchTheme,
      child: Text('Switch color scheme'),
    ),
    PopupMenuItem(
      value: MenuItems.autoSwitchTheme,
      child: Text('Auto-switch color scheme'),
      enabled: prefs.getBool(describeEnum(Prefs.manuallySetDark)) != null,
    ),
  ],
);
}
  

Пока все хорошо. Но в следующей теме subtitle1 стиль применяется к Text in PopupMenuItem s, что не то, что я хотел бы там видеть.

 final darkTheme = ThemeData(
  brightness: Brightness.dark,
  appBarTheme: AppBarTheme(color: Colors.grey[800]),
  textTheme: TextTheme(
    subtitle1: TextStyle(color: Colors.indigo[800], fontSize: 22, fontWeight: FontWeight.bold),
    bodyText2: TextStyle(color: Colors.indigo, fontSize: 16),
    caption: TextStyle(color: Colors.indigo, fontSize: 16),
    button: TextStyle(color: Colors.white, fontSize: 16),
  ),
  

Если я переопределяю стиль для Text него, он отображается с правильным стилем, но он больше не учитывает enabled свойство.

 PopupMenuItem(
  value: MenuItems.switchTheme,
  child: Text('Auto-switch color scheme', style: Theme.of(context).textTheme.button),
  enabled: prefs.getBool(describeEnum(Prefs.manuallySetDark)) != null,
),
  

Разве это не ожидаемо? Стоит ли проблема на github?

Ответ №1:

Оказывается PopupMenuItem , есть textStyle свойство, говорящее:

Стиль текста элемента всплывающего меню. Если это свойство равно нулю, то используется PopupMenuThemeData.TextStyle . Если PopupMenuThemeData.TextStyle также имеет значение null, то используется ThemeData.textTheme.subtitle1 .

Итак, следующая тема работает как ожидалось, без изменения кода PopupMenuItem , который создает:

 final darkTheme = ThemeData(
  brightness: Brightness.dark,
  appBarTheme: AppBarTheme(color: Colors.grey[800]),
  textTheme: TextTheme(
    subtitle1: TextStyle(color: Colors.indigo[800], fontSize: 22, fontWeight: FontWeight.bold),
    bodyText2: TextStyle(color: Colors.indigo, fontSize: 16),
    caption: TextStyle(color: Colors.indigo, fontSize: 16),
    button: TextStyle(color: Colors.white, fontSize: 16),
  ),
  // addition:
  popupMenuTheme: PopupMenuThemeData(
    color: Colors.grey[800],
    textStyle: TextStyle(color: Colors.white, fontSize: 16),
  ),
);