如何在颤动中水平对齐不同大小的图标？答案

【问题标题】：how to horizontally align icons with different sizes in flutter?如何在颤动中水平对齐不同大小的图标？
【发布时间】：2022-11-10 21:09:39
【问题描述】：

我正在尝试像这样水平对齐图标，使用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,)),
          ],
        )

有人可以帮忙吗？

【问题讨论】：

标签： android ios flutter flutter-layout

【解决方案1】：

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

【讨论】：

如果您的情况需要，请使用mainAxisAlignment: MainAxisAlignment.spaceAround,

【解决方案2】：

您应该为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)),
  ],

【讨论】：