【问题标题】:Flutter - How to change IconButtons size with ThemeFlutter - 如何使用主题更改 IconButtons 的大小
【发布时间】: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 就不行。

我该如何解决?

【问题讨论】:

    标签: flutter iconbutton


    【解决方案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】:

      像这样使用iconThemeThemeData,您的所有图标都将是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);
            }
          }
          

          【讨论】:

            猜你喜欢
            • 2020-02-12
            • 2021-08-19
            • 2022-07-02
            • 2017-04-20
            • 1970-01-01
            • 2015-11-04
            • 2020-11-02
            • 2014-02-19
            • 2022-06-27
            相关资源
            最近更新 更多