将 flutter 中的图标大小加倍

Question

在 Flutter 中，想要一个比“通常”大固定系数的图标，例如 2 倍大小。我在图标构造函数中看到了

size

参数，并且根据此参数的文档，大小“默认为最接近的

IconTheme

的

IconThemeData.size

”。但是当我尝试使用

获取此默认值时

Theme.of(context).iconTheme.size

该表达式返回 null。但图标可以在上下文中创建，并且它们确实具有“一些”正常大小。那么如何确定正常尺寸呢？如何将图标的 size 设置为默认情况下正常大小的两倍？

我知道

Transform()

，这可能会起作用。但我仍然想知道如何根据具体的东西设置

Icon()

的大小参数。

Answer 1

  const IconThemeData.fallback() 
       : size = 24.0, 
         fill = 0.0, 
         weight = 400.0, 
         grade = 0.0, 
         opticalSize = 48.0, 
         color = const Color(0xFF000000), 
         _opacity = 1.0, 
         shadows = null;

来源

你可以使用

Transform.scale(
  scale: 1.0,//scalevalue here
  child: Icon(Icons.home),
),

Answer 2

enum IconSize {
  small(16),
  medium(24),
  large(32);

  final double value;
  const IconSize(this.value);
}

class MyIcon extends StatelessWidget {
  final IconData icon;
  final IconSize size;

  const MyIcon({super.key, required this.icon, this.size = IconSize.medium});

  @override
  Widget build(BuildContext context) {
    return Icon(
      icon,
      size: size.value,
    );
  }
}

Answer 3

import 'package:flutter/material.dart';

enum IconSize { small, medium, large }

class MyIcon extends StatelessWidget {
  final IconData icon;
  final IconSize size;

  const MyIcon({required this.icon, this.size = IconSize.medium});

  double getSizeValue(IconSize size) {
    switch (size) {
      case IconSize.small:
        return 16.0;
      case IconSize.medium:
        return 24.0;
      case IconSize.large:
        return 32.0;
    }
  }

  @override
  Widget build(BuildContext context) {
    final double iconSize = getSizeValue(size);

    return Icon(
      icon,
      size: iconSize,
    );
  }
}

 MyIcon(
icon: Icons.abc,
 size: IconSize.medium,
),

Answer 4

方法一：

size

参数

当您知道所需图标的确切大小并且不需要动态调整时，请使用此方法。

如果没有为图标设置大小参数，并且在小部件的上下文中没有指定 IconTheme，则默认大小将取决于呈现图标的布局上下文。它将回退到默认的 24.0 或由其父级的约束或布局确定。

要检索图标的最终大小并将其乘以一个因子，您可以使用

Transform.scale

小部件来使用 Kaushik Chandru 的答案：

Transform.scale(
  scale: 2.0,
  child: Icon(Icons.home),
),

或者您也可以使用 

LayoutBuilder

小部件来计算父级的约束或布局上下文，不建议动态更改。

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    double iconSize = constraints.maxWidth;
    return Icon(
      Icons.star,
      size: iconSize,
    );
  },
)

方法2：用布局小部件包裹图标

当您想要控制布局中图标的大小时，请使用此方法。这可能无法保持纵横比

布局小部件是指负责定义其子小部件的大小/约束的小部件。布局小部件的示例包括 SizedBox、Container、ConstrainedBox、Row/Column、Expanded、Flex、Listview 等。

SizedBox(
  height: MediaQuery.of(context).size.height * 2,
  width: MediaQuery.of(context).size.height * 2,
  child: Icon(),),

ressized_widget 包

就是一个很好的例子。它根据用户交互调整其子小部件的布局约束。 方法 3：使用

FittedBox

和布局小部件包裹图标

当您希望图标动态调整其大小以适应其父约束提供的可用空间时，请使用此方法。这保持了纵横比

如果未使用方法 2 调整图标，则可能是因为小部件树下方有一个父级控制其约束，例如“列”小部件。列小部件的垂直空间缩小或扩大，不允许图标扩大到其所需的大小。

为了解决这个问题，您需要将 Icon 小部件包装在 SizedBox 或 Container 内的 FittedBox 内，以强制图标大小缩放以适应 SizedBox 设置的约束。

SizedBox(
  height: MediaQuery.of(context).size.height * 2,
  width: MediaQuery.of(context).size.height * 2,
  child: FittedBox( 
           child: Icon(),),),

FittedBox 小部件动态调整图标的大小以适应其自身的边界，同时保持其纵横比。它不会强制执行特定的宽度或高度，而是缩放大小以适应其父级提供的可用空间，并根据 BoxFit 参数调整大小。它允许孩子放大或缩小