我希望在屏幕底部添加均匀间隔的多个FAB。
我最初是通过以下方式实现的:
body: Center(
child: Stack(
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(left: 12.0, right: 20.0, top: 580),
child: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.undo),
splashColor: Colors.pink[900],
backgroundColor: Colors.pink[250],
),
),
Padding(
padding:
const EdgeInsets.only(left: 0.0, right: 20.0, top: 580),
child: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.cancel),
splashColor: Colors.pink[900],
backgroundColor: Colors.pink[250],
),
),
Padding(
padding:
const EdgeInsets.only(left: 0.0, right: 20.0, top: 580),
child: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.favorite),
splashColor: Colors.pink[900],
backgroundColor: Colors.pink[250],
),
),
Padding(
padding:
const EdgeInsets.only(left: 0.0, right: 20.0, top: 580),
child: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.check_circle),
splashColor: Colors.pink[900],
backgroundColor: Colors.pink[250],
),
),
Padding(
padding:
const EdgeInsets.only(left: 0, right: 20.0, top: 580),
child: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.share),
splashColor: Colors.pink[900],
backgroundColor: Colors.pink[250],
),
),
],
),
但是，这确实令人讨厌，虽然在我的单个测试设备上看起来不错，但在迁移到其他设备时却无法扩展。
正确的做法是什么？
最佳答案
您已对大多数填充进行了硬编码，因此无法在许多屏幕上使用。尽量让 flutter 进行定位:)
这就是你想要的。它适用于纵向和横向的任何屏幕类型。
body: Stack(
children: <Widget>[
Container(
alignment: Alignment.bottomCenter,
padding: EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.undo),
splashColor: Colors.pink[900],
backgroundColor: Colors.pink[250],
),
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.cancel),
splashColor: Colors.pink[900],
backgroundColor: Colors.pink[250],
),
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.favorite),
splashColor: Colors.pink[900],
backgroundColor: Colors.pink[250],
),
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.check_circle),
splashColor: Colors.pink[900],
backgroundColor: Colors.pink[250],
),
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.share),
splashColor: Colors.pink[900],
backgroundColor: Colors.pink[250],
),
],
),
),
],
),
关于flutter - 屏幕底部有多个FAB，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61687578/