如何在 Flutter 中使图标居中

Question

我正在研究 Flutter 应用程序中的相机部分。在底部，有两个图标。一个用于闪光灯，一个用于相机按钮。我想让他们在屏幕上居中。我试图让红色相机按钮出现在中央，黄色闪光灯图标会出现在靠近左侧相机按钮的地方。

Widget controlRow() {
    return Ink(
        color: Colors.black,
        child: Row(
          //mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            const IconButton(
             
              onPressed: null,
              
              icon: Icon(
              
                //Icons.margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
                Icons.flash_auto,
                color: Colors.yellow,
              ),
              iconSize: 50,
            ),

            IconButton( // circle button
                // padding: new EdgeInsets.all(0.0),
                onPressed: takePicPressed,
                icon: const Icon( // icon: const Icon( 
                  Icons.lens_outlined,
                  color: Colors.red,

                  
                  
                
                ),
                iconSize: 90),

            const SizedBox(width: 50, height: 25) // 50 and 25
          ],
        ));
  }

I tried with the padding and Edge Insets but I do not understand what exactly Edge Insets do. Below I have listed some pieces of code that I have tried down below.

/Icons.margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
// padding: new EdgeInsets.all(0.0),

Answer 1

更改了您的代码并附上了它的截图：

 Widget controlRow() {
    return Ink(
        color: Colors.black,
        child: Center(
          heightFactor: 1,
          child: Wrap(
            crossAxisAlignment: WrapCrossAlignment.center,
            children: <Widget>[
              const IconButton(
                padding: EdgeInsets.only(top: 30),
                onPressed: null,
                icon: Icon(
                  Icons.flash_auto,
                  color: Colors.yellow,
                ),
                iconSize: 50,
              ),
              IconButton(
                  onPressed: () {},
                  icon: const Icon(
                    Icons.lens_outlined,
                    color: Colors.red,
                  ),
                  iconSize: 90),
              const SizedBox(width: 50, height: 25)
            ],
          ),
        ));
  }

主要想法是让这些按钮居中，我用环绕和居中小部件做到了这一点。

如果我的回答有帮助，请不要忘记将其标记为正确（打勾）。

Answer 2

我不明白你为什么在那里使用 Sizedbox。没必要。

const SizedBox(width: 50, height: 25)

你有3个选择：

将 Row 的 mainaxisalignment 添加到中心：mainAxisAlignment: MainAxisAlignment.center
用居中小部件换行child: Center( child:Row(....) )
或将 Spacer 小部件添加为 Row 的第一个和最后一个子项。 Row( children[ Spacer(), IconButton(....), IconButton(....), Spacer() ] )

关于 EdgeInsets：当需要填充时使用它。这意味着它有助于在小部件周围提供一些 space。常用的主要有四种。

EdgeInsets.only() - 仅向我们需要的边添加填充，如左、右、上、下。
EdgeInsets.fromLTRB - 向所有边添加填充。 L-左，T-上，R-右，B-下。
EdgeInsets.symmetric() - 对称添加填充。 horizontal 将平等地添加填充到左侧和右侧。 vertical 将平均添加填充到顶部和底部。
EdgeInsets.zero - 删除所有填充。
EdgeInsets.all() - 平均添加所有边的填充。

如何在 Flutter 中使图标居中

How to center icons in Flutter

flutter

frontend

icons

flutter-padding