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

Posted 2023-02-23

【中文标题】Flutter - 如何使用主题更改 IconButtons 的大小

【英文标题】：Flutter - How to change IconButtons size with Theme

【发布时间】：2019-12-08 19:39:58

【问题描述】：

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

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 就不行。

我该如何解决？

【参考方案1】：

首先，检查您是否在使用主要或默认主题的布局区域中。那是什么？放置在使用原色的布局上。

ThemeData(

  primaryColorLight: Colors.blueAccent[100],
  primaryColor: Colors.blueAccent[200],
  primaryColorDark: Colors.blueAccent[700],
  accentColor: Colors.yellow[700],

  iconTheme: IconThemeData(
    color: Colors.yellow[700],
      size: 28
  ),
  accentIconTheme: IconThemeData(
    color: Colors.yellow[700],
    size: 32
  ),
  primaryIconTheme: IconThemeData(
    color: Colors.yellow[700],
      size: 24
  ),
 
);

如果您位于主要区域（放置在使用主要颜色的布局上），则将使用 AccentIconTheme 否则主图标主题

IconTheme 我暂时不知道，所以任何人都可以随意编辑或发表评论

【参考方案2】：

像这样使用iconTheme 或ThemeData，您的所有图标都将是35 号，代码如下：

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      theme: ThemeData(
          iconTheme: IconThemeData(
            size: 35.0,
        ),
      ),
      home: HomePage(),
    );
  

【参考方案3】：

图标按钮未选择主题中定义的图标大小。相反，我必须将图标包装在 iconThemeData 中的图标按钮内。

        icon: IconTheme(
          data: Theme.of(context).copyWith().iconTheme,
          child: Icon(
            Icons.search,
          ),
        ),
        onPressed: () ,
      ),

这解决了问题，但每次都为主题包装图标并不是一个好习惯。必须有一个适当的解决方案。

【参考方案4】：

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

此属性不能为空。它默认为 24​​.0。此处给出的大小通过 IconTheme 传递给图标属性中的小部件。例如，在此处而不是在 Icon.size 属性中设置大小允许 IconButton 调整启动区域的大小以适合图标。如果您改为使用 Icon.size 设置图标的大小，则 IconButton 将默认为 24​​.0，然后图标本身可能会被剪裁。

因此，需要为 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);