如何在 flutter 中的頁面中添加底部導航項

Question

我是 flutter 的新手，我在處理以下情況時遇到了困難。 我創建了一個帶有不同小部件的頁面，並且還在其自己的文件中創建了底部導航，但我無法將創建的頁面添加到特定的底部導航項。 在上面的代碼中，我想將頁面添加到發現底部導航。

我的底部導航代碼是：

MyBottomNavigation extends StatefulWidget {
  @override
  _MyBottomNavigationState createState() => _MyBottomNavigationState();
}

class _MyBottomNavigationState extends State<MyBottomNavigation> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      selectedLabelStyle:
          TextStyle(fontFamily: 'Circular', fontSize: kBottomNavFontSize),
      unselectedLabelStyle: TextStyle(
        fontFamily: 'Circular',
        fontSize: kBottomNavFontSize,
      ),
      type: BottomNavigationBarType.fixed,
      backgroundColor: kPrimaryColor,
      iconSize: kBottomNavIconSize,
      currentIndex: _currentIndex,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(FontAwesomeIcons.home),
          label: 'Sermons',
        ),
        BottomNavigationBarItem(
          icon: Icon(FontAwesomeIcons.binoculars),
          label: 'Discover',
        ),
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.heart_solid),
          label: 'Giving',
        ),
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.calendar_today),
          label: 'Events',
        ),
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.person_fill),
          label: 'Profile',
        ),
      ],
      selectedItemColor: Color(0xFFc06014),
      onTap: (index) {
        setState(() {
          _currentIndex = index;
        });
      },
    );
  }
}

我頁面的代碼是：

class Discover extends StatefulWidget {
  @override
  _DiscoverState createState() => _DiscoverState();
}

class _DiscoverState extends State<Discover> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 10.0, right: 10.0, top: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Discover',
                  style: TextStyle(
                      fontFamily: 'Circular',
                      fontSize: 55,
                      color: kPrimaryColor,
                      fontWeight: FontWeight.bold),
                ),
                Text(
                  'Discover more from New Life Bible Church',
                  style: TextStyle(
                    fontFamily: 'Circular',
                    fontSize: 22,
                    color: kPrimaryColor.withOpacity(0.7),
                    fontWeight: FontWeight.w200,
                  ),
                ),
              ],
            ),
          ),
          DiscoverCardTemplate(
            coverImage: 'assets/images/newhere.jpg',
            textTop: 'New Here?',
            textMiddle:
                'Learn more about our church and how you can get involved',
            textBottom: 'Get Started',
            onTap: () {},
          ),
          DiscoverCardTemplate(
            coverImage: 'assets/images/outreach.jpg',
            textTop: 'NLBC Outreach',
            textMiddle:
                'New Life Bible Church Outreach is about compassion, unity, selflessness and service. We serve with more than 300 organizations. We believe in connecting with the community and would be honored if you would join us.',
            textBottom: 'Find events',
            onTap: () {},
          ),
          DiscoverCardTemplate(
            coverImage: 'assets/images/eteams.jpg',
            textTop: 'eTeams',
            textMiddle:
                'See what God can do through you by serving on a volunteer team at New Life Bible Church.',
            textBottom: 'Join A Team',
            onTap: () {},
          ),
          DiscoverCardTemplate(
            coverImage: 'assets/images/ekids.jpg',
            textTop: 'eKidz',
            colour: kPrimaryColor,
            textMiddle:
                'The Family ministry of New Life Bible Church. Focused on helping kids build their faith by using Bible stories, songs and group activities designed for kids 6 weeks old through 5th grade.',
            textBottom: 'Find Out More',
            onTap: () {},
          ),
          DiscoverCardTemplate(
            coverImage: 'assets/images/egroups.jpg',
            textTop: 'eGroups',
            textMiddle:
                'No matter where you come from, there is a group for you. Join an eGroup and experience real relationship that will grow your faith.',
            textBottom: 'Join A Group',
            onTap: () {},
          ),
          DiscoverCardTemplate(
            coverImage: 'assets/images/worship.jpg',
            textTop: 'NLBC Worship',
            textMiddle:
                'Open your heart and see the evidence of the presence of God and all around you as you listen to original music written, produced and performed by the New Life Bible Church Worship Team.',
            textBottom: 'Learn More',
            onTap: () {},
          ),
          DiscoverCardTemplate(
            coverImage: 'assets/images/youth2.jpg',
            textTop: 'NLBC Youth',
            colour: kAlternativeColor,
            textMiddle:
                'New Life Bible Church Youth is for middle and high school students to grow their faith, their character and their relationships. It is about creating an atmosphere where their can belong.  ',
            textBottom: 'Learn More',
            onTap: () {},
          ),
          DiscoverCardTemplate(
            coverImage: 'assets/images/contactus.jpg',
            textTop: 'Need more info?',
            textMiddle:
                'Do not see what you are looking for? Have a question? We are happy to help.',
            textBottom: 'Contact Us',
            onTap: () {},
          ),
          Padding(
            padding: const EdgeInsets.only(left: 10.0, right: 10.0, top: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(
                  'Social Media',
                  softWrap: true,
                  style: TextStyle(
                      fontFamily: 'Circular',
                      fontSize: 55,
                      color: kPrimaryColor,
                      fontWeight: FontWeight.bold),
                ),
                SocialMediaCard(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

你可以把它添加到你的腳手架上

 return Scaffold(
      bottomNavigationBar:MyBottomNavigation(),