Flutter

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);
  }
}

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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
否则 primaryIconTheme

IconTheme暂时还不知道，欢迎编辑或评论

Answer 5

让你的原始图标排成一排（不是 IconButton）。然后用一个可以像 (InkWell 或 GestureDetector) 一样粘贴的小部件包裹您的图标，以利用 (onTap 函数)。这实际上不是一个好方法，但它可能会解决你的问题。

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

Flutter - How to change IconButtons size with Theme

iconbutton