flutter - FloatingActionButton backgroundColor 默认为 accentColor

标签 flutter material-design

我已经从 https://github.com/flutter/flutter/issues/28138 重定向了到这里。

通常我的问题是我不认为 FloatingActionButton backgroundColor 和 FlatButton 文本颜色继承自 ThemeData 中定义的正确值。

  1. 创建一个应用,您将在其中使用主要的红色(应用栏、按钮背景、卡片)、黄色作为强调色(图标、应用栏标题)、黑色用于一般文本、白色/浅灰色用于脚手架主体等背景。
  2. 使用主题 (primaryColor) 将 AppBar BG 颜色设置为红色
  3. 使用主题 (accentColor) 将 AppBar 标题颜色设置为黄色
  4. 将图标的颜色设置为与 accentColor 相同的颜色,因为如果使用原色,它们将在 AppBar 中不可见
  5. 创建一个带有图标的 floatingActionButton。
  6. floatingActionButton 中的图标不可见,因为小部件的 backgroundColor 使用黄色的 ThemeData.accentColor 而不是 ThemeData.primaryColor

前景和背景都默认为 accentColor。

 /// The color to use when filling the button.
 ///
 /// Defaults to **[ThemeData.accentColor**] for the current theme.
 final Color backgroundColor;

我在对话框中发现 FlatButton 有类似的问题,默认情况下文本的颜色是强调色,它是黄色(在白色背景上),如果我将它覆盖为主要颜色,它是红色的,但我不想它是红色的,因为它旁边的删除按钮是红色的。所以我需要将它设置为正常,所以它是黑色的,这是正确的,但是:

flat_button.dart:127

 textStyle: theme.textTheme.button.copyWith(color: buttonTheme.getTextColor(this)),

我的主题:

buttonTheme: ButtonThemeData(
            textTheme: ButtonTextTheme.normal,
            buttonColor: primary, // Red
          ),

textTheme: TextTheme(
           ...
            button: TextStyle(color: black), // Black
          ),

new FlatButton(
              //textTheme: ButtonTextTheme.normal,
              child: new Text("Ponechať"),
              onPressed: () {
                Navigator.of(context).pop();
                onKeep();
              },
            )

理论上,弹出对话框中的 FlatButton 应该是黑色或红色。但强调色是黄色。

要重现尝试以下示例: https://gist.github.com/erikkubica/45fc8acdce1f8a25cd5258e8b3a0e1f3

最佳答案

如果您希望 float 按钮的颜色是主要的,请添加以下内容。

  floatingActionButton: FloatingActionButton(
    backgroundColor: Theme.of(context).primaryColor,

如果想把对话框中FlatButton的颜色改成黑色,添加如下内容。

  theme: ThemeData(
    colorScheme: ColorScheme.light(
      primary: primary,
      secondary: Colors.black,
    ),

最好用 ColorScheme() 实例化它,这样它就不会影响其他小部件。

关于flutter - FloatingActionButton backgroundColor 默认为 accentColor,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54767363/

相关文章:

dart - 如何在flutter中通过webview下载/创建pdf

android - 新的 android 支持设计库,屏幕外滚动 tablayout 不工作

Angular 2 Material 前景

Dart Angular 2 和 Material Design 组件

flutter - 如何在布局阶段读取小部件的大小并在 drawFrame() 之前的构建阶段使用另一个小部件的大小

flutter - 如何使用GetX存储保存和写入数据?

flutter - 如何使用标题调用http-get api?

android - 函数在 android 中返回负值,但在 flutter 应用程序中的 web 上返回正值

reactjs - 使用 Reactjs Material-UI 滚动时如何自动隐藏 AppBar

android - 如何包含 Material 设计库