flutter 我无法单击应用程序栏中的按钮

mnowg1ta  于 2022-11-17  发布在  Flutter
关注(0)|答案(3)|浏览(181)

我已经创建了一个包含按钮的自定义应用程序栏。问题是我无法单击这些按钮。我已经检查了按钮的输出,但没有发生。
main.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")
                },
              ),
            ),
        ],
      ),
    );
  }
}

我的第一个想法是,原因是堆栈和按钮上方有一个元素。所以我删除了所有的元素,使只有一个按钮在应用程序栏,但它没有帮助。

1wnzp6jl

1wnzp6jl1#

变更

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

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

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

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

5tmbdcev2#

你应该找到另一个解决方案,因为你的第二个带“hallo”的索引在BottomNav上面,它覆盖了整个区域。我把它做成红色,这样你在启动应用程序时就可以看到它

Stack(
          children:  [
            const Indexed(
              index: 10,
              child: Positioned(bottom: 0, left: 0, child: BottomNav()),
            ),
            Indexed( /// <- this widget is above the BottomNav and it covers the entire area
              index: 1,
              child: Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                top: 0,
                child: Container(
                  color: Colors.red,
                  child: Text("hallo"),
                ),
              ),
            ),
          ],
        )
kr98yfug

kr98yfug3#

我得到了一个解决方案。这是多个问题的组合。就像@Stellar Creed说的,容器在我的AppBar上面。
另一个问题是,我把SizedBox的宽度:0和高度:0.
对齐(对齐方式:常量对齐(0,-0.5),子项:调整大小的方块(长度:0,身高:0,儿童:溢出框(

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");
                  }),
            ),
          ),
        ),
      ),

相关问题