【问题标题】:How to add a bottom navigation item to a page in flutter如何在颤动中向页面添加底部导航项
【发布时间】:2021-04-22 07:12:56
【问题描述】:

我是 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(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

【问题讨论】:

    标签: flutter dart


    【解决方案1】:

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

     return Scaffold(
          bottomNavigationBar:MyBottomNavigation(),
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2022-11-29
      • 2022-11-25
      • 1970-01-01
      • 2022-09-27
      • 2020-06-06
      • 1970-01-01
      • 2022-01-22
      • 1970-01-01
      相关资源
      最近更新 更多