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

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),
                      ),
                    ],
                  ),
                ),

如果我在IconButton中使用iconSize设置大小，它将起作用，但是如果使用IconTheme则不起作用。如何解决这个问题？

- matte_colo

Answer 1

根据官方文档所述，链接在此：

此属性不能为空，且默认为24.0。此处给定的大小将通过IconTheme传递到icon属性中的小部件。将大小设置在此处而不是在Icon.size属性中可以允许IconButton调整溅泼区域的大小以适应图标。如果您使用Icon.size来设置Icon的大小，则IconButton将默认为24.0，然后Icon本身可能会被裁剪。

因此，需要为IconButton提供iconSize属性，因为这将覆盖IconTheme大小属性。如果您希望按钮的大小从IconTheme派生，则应创建自定义的IconButton，该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);
  }
}

- Shubham Bhardwaj

Answer 2

使用ThemeData的iconTheme属性，如下所示，所有图标的大小都将是35：

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

- BenBITDesign

Answer 3

首先，请检查您所处的布局区域是否使用主题或默认主题。什么是主题？布局中使用主要颜色的地方。

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，因此任何人都可以编辑或发表评论

- Roger Gusmao

Answer 4

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

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

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

- Syed Assadullah Shah

Answer 5

将您的原始数据转换为图标行（而不是IconButton）。 然后使用可点击的小部件（如InkWell或GestureDetector）包装您的图标，以利用(onTap函数)。 实际上这不是一个好方法，但它可能会解决您的问题。

- user19030120

---

目前你的回答不够清晰。请编辑并添加更多细节，以帮助其他人理解它如何回答所提出的问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community