我无法点击 Appbar 中的按钮

Question

我创建了一个包含按钮的自定义应用栏。问题是我无法单击这些按钮。我已经检查了带有输出的按钮，但没有发生。

主要.dart

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: '/',
      routes: <String, WidgetBuilder>{
        '/': (BuildContext context) {
          return const HomeScreen();
        },
        '/archive': (BuildContext context) {
          return const ArchiveScreen();
        }
      },
    );
  }
}

HomeScreen.dart

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: const [
            Indexed(
              index: 10,
              child: Positioned(bottom: 0, left: 0, child: BottomNav()),
            ),
            Indexed(
              index: 1,
              child: Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                top: 0,
                child: Text("hallo"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

BottomBar.dart

class BottomNav extends StatefulWidget with PreferredSizeWidget {
  const BottomNav({super.key});

  @override
  Size get preferredSize => const Size.fromHeight(70.0);

  @override
  State<BottomNav> createState() => _BottomNavState();
}

class _BottomNavState extends State<BottomNav> {
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;

    return Container(
      width: size.width,
      height: 60,
      decoration: const BoxDecoration(
        border: Border(
          top: BorderSide(width: 1.0, color: Color(0xFF999999)),
        ),
        color: Color(0xFFF0F1F4),
      ),
      child: Stack(
        children: [
          Align(
            alignment: const Alignment(0, -0.5),
            child: SizedBox(
              width: 0,
              height: 0,
              child: OverflowBox(
                minWidth: 0.0,
                maxWidth: 100.0,
                minHeight: 0.0,
                maxHeight: 100.0,
                child: Container(
                  width: 64,
                  height: 64,
                  decoration: const BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(100)),
                      color: Color(0xFF00007F)),
                  child: IconButton(
                    icon: SvgPicture.asset('assets/icons/search-navbar.svg'),
                    tooltip: 'Increase volume by 10',
                    onPressed: () => {
                      Navigator.pushNamed(context, '/'),
                      debugPrint("home")
                    },
                  ),
                ),
              ),
            ),
          ),
          Align(
            
              alignment: const Alignment(-0.8, 0),
              child: IconButton(
                icon: SvgPicture.asset('assets/icons/archive.svg'),
                tooltip: 'Increase volume by 11',
                onPressed: () => {
                  Navigator.pushNamed(context, '/archive'),
                  debugPrint("archive")
                },
              ),
            ),
        ],
      ),
    );
  }
}

我的第一个想法是原因是堆栈并且按钮上方有一个元素。所以我删除了所有的元素，让appbar中只有一个按钮，但是没有用。

Answer 1

改变

onPressed: () => {
   Navigator.pushNamed(context, '/'),
   debugPrint("home")
},

至

onPressed: () {
   Navigator.pushNamed(context, '/');
   debugPrint("home");
},

而且，你可以像这样设置 BottomNavigationBar，它比你的 Stack 实现更容易

 Scaffold(
      bottomNavigationBar: BottomNav(),
      // your body
 )