如何在 Flutter 中设置 AppBar 操作按钮颜色

Question

我正在尝试使用主题设置我的AppBar 操作图标的颜色，但由于某种原因它无法正常工作。这是我的最小代码示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        iconTheme: IconThemeData(color: Colors.purple),
        primaryIconTheme: IconThemeData(color: Colors.red),
        accentIconTheme: IconThemeData(color: Colors.amber)
      ),
    home: Scaffold(
      appBar: AppBar(
        iconTheme: IconThemeData(color: Colors.green),
        actionsIconTheme: IconThemeData(color: Colors.yellow),
        actions: [
          IconButton(icon: Icon(Icons.add))
        ]
      )
    ));
  }
}

• iconTheme 颜色值没有任何效果。
• 在MaterialApp.iconTheme、AppBar.iconTheme 或AppBar.actionsIconTheme 中设置不透明度确实会生效
• 明确设置 Icon.color 确实有效，但我认为我不应该这样做吗？

如何让IconButton 尊重我的主题？

谢谢 托马斯

编辑：通过直接使用Icon 而不是IconButton，我实际上可以让图标尊重我的主题，但我如何使它可点击？根据https://api.flutter.dev/flutter/material/AppBar/actions.html，IconButton 是AppBar.actions 中最常用的小部件。不对吗？

Answer 1

假设你的意思是尊重你的主题，当你的应用栏是黑暗的时候你希望它们是白色的，反之亦然，你只需要在应用栏中使用 brightness 属性

例如：

AppBar(
  backgroundColor: Color.fromARGB(1023, 255, 112, 5),
  brightness: Brightness.dark,
  title: Text(
    'title',
  ),
)

或者，如果您想继续使用现有的东西继续工作，您可以用 Inkwell 包裹您的图标，然后您将使用 onTap 来管理触摸！

Answer 2

所以，显然我的问题是我没有定义IconButton 的onPressed 属性。添加后，我的主题就被正确应用了。

我知道这是一个必需的属性，但在构建/运行应用程序时我没有收到任何错误。

Answer 3

为 App Bar Widget 制作通用类

enum ButtontType {
  back,
  menu
}

class topBarWidget {

//region TopBar
  static AppBar createTopBar(
  {
    String title,
    double elevation = 1.5,
    TextStyle titleStyle,
    Widget titleWidget,
    List<ButtontType> leftIcons = const [],
    List<ButtontType> rightIcons = const [],
    ButtonTapCallback action,
    EdgeInsetsDirectional padding = const EdgeInsetsDirectional.only(start: 10, end: 10.0),
    Color backgroundColor,
    Color iconColor,
    bool centerTitle = true}) {
var titleText = titleWidget;

if (titleText == null) {
  titleText = Text(
    title,
    softWrap: true,
    style: txtStyle,
    ),
  );
}

var leftmenuWidget;
List<Widget> rightRowChildern = [];

final size = 18.0;
final tapAreasize = 32.0;

if (leftIcons.length > 0) {
  List<Widget> mainRowChildern = [];
  mainRowChildern.add(Padding(padding: EdgeInsets.only(left: 10.0)));
  for (int i = 0; i < leftIcons.length; i++) {

    final menuIconImage = Image.asset(_getImageName(type: leftIcons[i]),color: Colors.black,);
    final menuIconImageSizeBox = SizedBox(child: menuIconImage, width: size, height: size,);
    // ignore: unnecessary_statements
    final menuIconAction = Container(color: Colors.transparent,child: InkWell(onTap: () {(action != null) ? action(leftIcons[i]) : null;},child: ClipOval(child: Container(alignment: Alignment.center,width: tapAreasize,height: tapAreasize,color: Colors.transparent,child:menuIconImageSizeBox,),),),);
    //final menuIconAction = InkWell(child: menuIconImageSizeBox, onTap: () => (action != null) ? action(leftIcons[i]) : null, );
    mainRowChildern.add(menuIconAction);
  }

  leftmenuWidget = Row(children: mainRowChildern, mainAxisAlignment: MainAxisAlignment.start,);
}

if (rightIcons.length > 0) {
  for (int i = 0; i < rightIcons.length; i++) {

    Widget menuIconImage = Image.asset(_getImageName(type: rightIcons[i]),color: Colors.black,);

    if(_getImageName(type: rightIcons[i]) == _getImageName(type: ButtontType.notificationUnread)){
      menuIconImage = Image.asset(_getImageName(type: rightIcons[i]),);
    } else{
      menuIconImage = Image.asset(_getImageName(type: rightIcons[i]),color: Colors.yellow,);
    }

    var menuIconImageSizeBox;
    menuIconImageSizeBox = SizedBox(child: menuIconImage, width: size * 1.5, height: size * 1.5,);
    final menuIconAction = InkWell(child: menuIconImageSizeBox, onTap: () => (action != null) ? action(rightIcons[i]) : null,);
    rightRowChildern.add(menuIconAction);

    if (i != (rightIcons.length - 1)) {
      rightRowChildern.add(Padding(padding: EdgeInsets.only(right: 12.0)));
    }
  }
  rightRowChildern.add(Padding(padding: EdgeInsets.only(right: 16.0)));
  rightRowChildern = [
    Row(
      children: rightRowChildern,
    )
  ];
}

var topBar = AppBar(
  elevation: elevation,
  brightness: Brightness.light,
  backgroundColor: backgroundColor ?? Colors.white,
  leading: leftmenuWidget ?? SizedBox(),
  actions: rightRowChildern,
  title: titleText,
  centerTitle: centerTitle,
  titleSpacing: 0,
);

return topBar;
  }
  //endregion


static String _getImageName({ButtontType type}) {
    var iconName;
   if (type == ButtontType.back) {
      iconName = 'images/back.png';
    } else if (type == ButtontType.menu) {
      iconName = 'images/menu.png';
    } 
    return iconName;
  }
}

如何使用

的示例

// Appbar for notes page
final appBar = topBarWidget.createTopBar(
    titleStyle: txtStyle,
    title: "App Bar",
    leftIcons: [ButtontType.back],
    backgroundColor: Colors.white,
    action: (ButtontType type) {
      Navigator.of(context).pop();
    });

   var scaffold = Scaffold(
      appBar: appBar,
      body: scaffoldBuilder,
    );

希望对您有所帮助！