如何在Flutter中水平对齐不同大小的图标？

Question

我正在尝试水平对齐图标并使其排成一行，使用 mainAxisAlignment: MainAxisAlignment.spaceEvenly 和 crossAxisAlignment: CrossAxisAlignment.center。

我得到的结果类似于这样： 但我想要的结果是这样的： 我的代码：

Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            IconButton(onPressed: ()=>{}, icon: Icon(Icons.home_sharp, color: Color(0xFFf1a40a), size: 40,)),
            IconButton(onPressed: ()=>{}, icon: Icon(Icons.search_sharp, color: Color(0xFFe7e5d3), size: 40,)),
            IconButton(onPressed: ()=>{}, icon: Icon(Icons.add_circle_outlined, color: Color(0xFFfad974), size: 60,)),
            IconButton(onPressed: ()=>{}, icon: Icon(Icons.notifications, color: Color(0xFFe7e5d3), size: 40,)),
            IconButton(onPressed: ()=>{}, icon: Icon(Icons.people_alt_sharp, color: Color(0xFFe7e5d3), size: 40,)),
          ],
        )

有人可以帮忙吗？

- Ivan Raphel Jaison

Answer 1

您应该将大小和颜色赋给IconButton，而不是Icon。例如：

  children: [
    IconButton(onPressed: ()=>{}, color: Color(0xFFf1a40a), iconSize: 40, icon: Icon(Icons.home_sharp)),
    IconButton(onPressed: ()=>{}, color: Color(0xFFe7e5d3), iconSize: 40, icon: Icon(Icons.search_sharp)),
    IconButton(onPressed: ()=>{}, color: Color(0xFFfad974), iconSize: 60, icon: Icon(Icons.add_circle_outlined)),
    IconButton(onPressed: ()=>{}, color: Color(0xFFe7e5d3), iconSize: 40, icon: Icon(Icons.notifications)),
    IconButton(onPressed: ()=>{}, color: Color(0xFFe7e5d3), iconSize: 40, icon: Icon(Icons.people_alt_sharp)),
  ],

来自 IconButton 文档：

  /// The icon to display inside the button.
  ///
  /// The [Icon.size] and [Icon.color] of the icon is configured automatically
  /// based on the [iconSize] and [color] properties of _this_ widget using an
  /// [IconTheme] and therefore should not be explicitly given in the icon
  /// widget.
  ///
  /// This property must not be null.
  ///
  /// See [Icon], [ImageIcon].
  final Widget icon;

- Ivo

Answer 2

在IconButton上使用iconSize而不是Icon的size

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    IconButton(
      iconSize: 40,
        onPressed: () => {},
        icon: Icon(
          Icons.home_sharp,
          color: Color(0xFFf1a40a),
          
        )),
    IconButton(
      iconSize: 40,
        onPressed: () => {},
        icon: Icon(
          Icons.search_sharp,
          color: Color(0xFFe7e5d3),
          
        )),
    IconButton(
        onPressed: () => {},
        iconSize: 60,
        icon: Icon(
          Icons.add_circle_outlined,
          color: Color(0xFFfad974),
        )),
    IconButton(
      iconSize: 40,
        onPressed: () => {},
        icon: Icon(
          Icons.notifications,
          color: Color(0xFFe7e5d3),
          
        )),
    IconButton(
      iconSize: 40,
        onPressed: () => {},
        icon: Icon(
          Icons.people_alt_sharp,
          color: Color(0xFFe7e5d3),
          
        )),
  ],
),

- Yeasin Sheikh

---

使用 mainAxisAlignment: MainAxisAlignment.spaceAround, 如果在你的情况下需要。 - Yeasin Sheikh

很高兴能帮忙，您可以在layout中找到更多相关信息。 - Yeasin Sheikh