Flutter 中 BottomAppBar 的异常行为

Question

我遇到了 FloatingActionButton 和 BottomAppBar 的异常行为在此处输入图像描述， 我面临的问题是凹口不在中心，而且该行的子项也不在中心

这是代码，

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {},
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      backgroundColor: gray70,
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.fromLTRB(10, 0, 10, 10),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(12),
          child: BottomAppBar(
            height: 60,
            color: gray60,
            surfaceTintColor: Colors.transparent,
            shape: const CircularNotchedRectangle(),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              mainAxisSize: MainAxisSize.max,
              children: [
                IconButton(
                  onPressed: () {},
                  icon: const Icon(CupertinoIcons.home),
                ),
                IconButton(
                  onPressed: () {},
                  icon: const Icon(CupertinoIcons.square_grid_2x2),
                ),
                IconButton(
                  onPressed: () {},
                  icon: const Icon(CupertinoIcons.calendar),
                ),
                IconButton(
                  onPressed: () {},
                  icon: const Icon(CupertinoIcons.creditcard),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

我想要实现类似的效果在此输入图片描述

Answer 1

删除

Padding

上面的

ClipRRect

，这就是导致这种奇怪行为的原因。

如果你确实想要导航栏被填充，我建议自定义它（将其构建在正文中）。

希望对您有帮助。