在所有页面上重复我的导航栏小部件

问题描述 投票：0回答：1

我想在所有页面上重复该代码，但无法做到。按照这个教程：https://www.youtube.com/watch?v=2emB2VFrRnA&t=1s&ab_channel=HeyFlutter%E2%80%A4com，但它只显示在主页上。

这是我的主页代码：

import 'package:flutter/material.dart';
import 'package:kikapp/create.dart';
import 'package:kikapp/home.dart';
import 'package:kikapp/zero.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'KikApp',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.grey),
          useMaterial3: true,
        ),
        debugShowCheckedModeBanner: false,
        initialRoute: 'home',
        routes: {
          'home': (context) => const Main(),
          'profile': (context) => const Create(),
          'zero': (context) => const Zero(),
        }
    );
  }
}

//Drawer
class MyDrawer extends StatelessWidget {
  const MyDrawer({super.key});

  @override
  Widget build(BuildContext context) {
    return Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.black12,
              ),
              child: Text(
                'Anarkika',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              leading: const Icon(Icons.home),
              title: const Text('Home'),
              onTap: () {
                Navigator.pop(context);
                Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => const Home()));
              },
            ),
            ListTile(
              leading: const Icon(Icons.book),
              title: const Text('Zero'),
              onTap: () {
                Navigator.pop(context);
                Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => const Zero()));
              },
            ),
            ListTile(
              leading: const Icon(Icons.add),
              title: const Text('Create'),
              onTap: () {
                Navigator.pop(context);
                Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => const Create()));
              },
            ),
          ],
        ),
      );
  }
}

//Body
class Main extends StatefulWidget {
  const Main({super.key});

  @override
  State<Main> createState() => _MainState();
}

class _MainState extends State<Main> {
  int index = 0;
  final pages = [
    const Home(),
    const Zero(),
    const Create(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pages[index],
      bottomNavigationBar: NavigationBar(
        height: 70,
        animationDuration: const Duration(milliseconds: 1000),
        labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected,
        backgroundColor: Colors.grey,
        indicatorColor: Colors.white,
        selectedIndex: index,
        onDestinationSelected: (index) => setState(() => this.index = index),
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home_outlined), selectedIcon: Icon(Icons.home), label: 'Home',),
          NavigationDestination(icon: Icon(Icons.book_outlined), selectedIcon: Icon(Icons.book), label: 'Zero',),
          NavigationDestination(icon: Icon(Icons.add_outlined), selectedIcon: Icon(Icons.add), label: 'Create',),
        ],
      ),
    );
  }
}

class Nav extends StatefulWidget {
  const Nav({ Key? key }) : super(key: key);

  @override
  State<Nav> createState() => _NavState();
}

class _NavState extends State<Nav> {
   int index = 0;
  final pages = [
    const Home(),
    const Zero(),
    const Create(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: NavigationBar(
        animationDuration: const Duration(milliseconds: 1500),
        labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected,
        backgroundColor: Colors.grey,
        indicatorColor: Colors.white,
        selectedIndex: index,
        onDestinationSelected: (index) => setState(() => this.index = index),
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home_outlined), selectedIcon: Icon(Icons.home), label: 'Home',),
          NavigationDestination(icon: Icon(Icons.book_outlined), selectedIcon: Icon(Icons.book), label: 'Zero',),
          NavigationDestination(icon: Icon(Icons.add_outlined), selectedIcon: Icon(Icons.add), label: 'Create',),
        ],
      ),
    );
  }
}

我尝试将小部件放入单独的有状态小部件中，并将导航栏复制到我希望显示栏的页面的底部导航栏中。请帮助我。

c++ flutter dart navigation navigationbar
1个回答
1
投票

您尝试做的事情不是正确的方法。因为 

selectedIndex
负责显示 
NavigationBar
选择的按钮以及从 
Widget
的 
pages
中的 
body
列表中选择的 
Scaffold
。

但是您正在尝试的是 

Navigator.of(context).push()
将新屏幕推送到当前屏幕之上。

正确的做法是将 

selectedIndex
的 
Drawer
的 
ListTile
功能更改为 
onTap
。

请检查下面的代码。正在工作！

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'KikApp',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.grey),
          useMaterial3: true,
        ),
        debugShowCheckedModeBanner: false,
        initialRoute: 'home',
        routes: {
          'home': (context) => const Main(),
        });
  }
}

class Main extends StatefulWidget {
  const Main({super.key});

  @override
  State<Main> createState() => _MainState();
}

class _MainState extends State<Main> {
  int selectedIndex =
      0; // Changed the variable name to `selectedIndex` from `index`.
  final pages = [
    const Home(),
    const Zero(),
    const Create(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test App"),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.black12,
              ),
              child: Text(
                'Anarkika',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              leading: const Icon(Icons.home),
              title: const Text('Home'),
              onTap: () {
                setState(() {
                  selectedIndex = 0; // Index of Home() in `pages` list.
                });
                Navigator.pop(context); // To close Drawer.
              },
            ),
            ListTile(
              leading: const Icon(Icons.book),
              title: const Text('Zero'),
              onTap: () {
                setState(() {
                  selectedIndex = 1; // Index of Zero() in `pages` list.
                });
                Navigator.pop(context); // To close Drawer.
              },
            ),
            ListTile(
              leading: const Icon(Icons.add),
              title: const Text('Create'),
              onTap: () {
                setState(() {
                  selectedIndex = 2; // Index of Create() in `pages` 
                                     // list.
                });
                Navigator.pop(context); // To close Drawer.
              },
            ),
          ],
        ),
      ),
      body: pages[selectedIndex],
      bottomNavigationBar: NavigationBar(
        height: 70,
        animationDuration: const Duration(milliseconds: 1000),
        labelBehavior: 
                 NavigationDestinationLabelBehavior.onlyShowSelected,
        backgroundColor: Colors.grey,
        indicatorColor: Colors.white,
        selectedIndex: selectedIndex,
        onDestinationSelected: (index) {
          setState(() {
            selectedIndex = index;
          });
        },
        destinations: const [
          NavigationDestination(
            icon: Icon(Icons.home_outlined),
            selectedIcon: Icon(Icons.home),
            label: 'Home',
          ),
          NavigationDestination(
            icon: Icon(Icons.book_outlined),
            selectedIcon: Icon(Icons.book),
            label: 'Zero',
          ),
          NavigationDestination(
            icon: Icon(Icons.add_outlined),
            selectedIcon: Icon(Icons.add),
            label: 'Create',
          ),
        ],
      ),
    );
  }
}

// Created below Widgets to Test. You can remove these cause you have 
// Home(), Zero() and Create() Widget.
class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("Home"),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("Zero"),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("Create"),
    );
  }
}

我希望这就是您问题的答案。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.