如何在 Flutter 中使图标居中
How to center icons in Flutter
我正在研究 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),
更改了您的代码并附上了它的截图:
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)
],
),
));
}
主要想法是让这些按钮居中,我用环绕和居中小部件做到了这一点。
如果我的回答有帮助,请不要忘记将其标记为正确(打勾)。
我不明白你为什么在那里使用 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 应用程序中的相机部分。在底部,有两个图标。一个用于闪光灯,一个用于相机按钮。我想让他们在屏幕上居中。我试图让红色相机按钮出现在中央,黄色闪光灯图标会出现在靠近左侧相机按钮的地方。
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),
更改了您的代码并附上了它的截图:
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)
],
),
));
}
主要想法是让这些按钮居中,我用环绕和居中小部件做到了这一点。
如果我的回答有帮助,请不要忘记将其标记为正确(打勾)。
我不明白你为什么在那里使用 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()
- 平均添加所有边的填充。