Flutter - 如何使用主题更改 IconButtons 大小

Question

我有一个包含多个 IconButton 的行，我需要更改它们的颜色和大小。我设法更改了颜色，但无法更改图标大小。

IconTheme(
                  data: IconThemeData(size: 48.0, color: Colors.yellow),
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      IconButton(
                        icon: Icon(Icons.delete),
                        onPressed: () => null,
                      ),
                      IconButton(
                        icon: Icon(Icons.file_upload),
                        onPressed: () => _addPhoto(false),
                      ),
                      IconButton(
                        icon: Icon(Icons.camera_alt),
                        onPressed: () => _addPhoto(true),
                      ),
                    ],
                  ),
                ),

如果我使用 iconSize 在 IconButtons 中设置大小，它可以工作，但使用 IconTheme 则不行。

我该如何解决？

Answer 1

如官方文档中所定义，link here :

This property must not be null. It defaults to 24.0. The size given here is passed down to the widget in the icon property via an IconTheme. Setting the size here instead of in, for example, the Icon.size property allows the IconButton to size the splash area to fit the Icon. If you were to set the size of the Icon using Icon.size instead, then the IconButton would default to 24.0 and then the Icon itself would likely get clipped.

因此，需要为 IconButton 指定 iconSize 属性，因为它会覆盖 IconTheme 大小属性。如果您希望您的按钮具有从 IconTheme 派生的大小，那么您应该制作自定义 IconButton 来为您设置 iconSize。例如:

class CustomIconButton extends StatelessWidget {
  CustomIconButton({Key key, this.onPressed, this.icon});

  final Function onPressed;
  final Icon icon;

  @override
  Widget build(BuildContext context) {
    IconThemeData iconThemeData = IconTheme.of(context);
    return IconButton(
        onPressed: onPressed, iconSize: iconThemeData.size, icon: icon);
  }
}