弯曲的导航栏使其可点击答案

【问题标题】：curved navigation bar make it tappable弯曲的导航栏使其可点击
【发布时间】：2020-01-24 05:44:01
【问题描述】：

我想使用这个导航条码，它可以正常工作，但问题是我不知道如何让每个项目可点击的项目显示我想要的 dart 文件？例如：添加：show add.dart、list :show list.dart 和 ...

代码如下：

import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';

 void main() => runApp(MaterialApp(home: BottomNavBar()));

  class BottomNavBar extends StatefulWidget {
   @override
   _BottomNavBarState createState() => _BottomNavBarState();
  }

  class _BottomNavBarState extends State<BottomNavBar> {
   int _page = 0;
   GlobalKey _bottomNavigationKey = GlobalKey();

   @override
   Widget build(BuildContext context) {
    return Scaffold(
     bottomNavigationBar: CurvedNavigationBar(
      key: _bottomNavigationKey,
      index: 0,
      height: 50.0,
      items: <Widget>[
        Icon(Icons.add, size: 30),
        Icon(Icons.list, size: 30),
        Icon(Icons.compare_arrows, size: 30),
        Icon(Icons.call_split, size: 30),
        Icon(Icons.perm_identity, size: 30),
      ],
      color: Colors.white,
      buttonBackgroundColor: Colors.white,
      backgroundColor: Colors.blueAccent,
      animationCurve: Curves.easeInOut,
      animationDuration: Duration(milliseconds: 600),
      onTap: (index) {
        setState(() {
          _page = index;
        });
      },
    ),
    body: Container(
      color: Colors.blueAccent,
      child: Center(
        child: Column(
          children: <Widget>[
            Text(_page.toString(), textScaleFactor: 10.0),
            RaisedButton(
              child: Text('Go To Page of index 1'),
              onPressed: () {
                final CurvedNavigationBarState navBarState =
                    _bottomNavigationKey.currentState;
                navBarState.setPage(1);
              },
            )
          ],
        ),
      ),
    ));
   }
  }

【问题讨论】：

标签： flutter touch navigationbar

【解决方案1】：

您可以使用index，显示您需要的页面。

import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'page1.dart'
import 'page2.dart'

void main() => runApp(MaterialApp(home: BottomNavBar()));

class BottomNavBar extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int _pageIndex = 0;
  GlobalKey _bottomNavigationKey = GlobalKey();

  List pages = [
    MyRoute(
      iconData: Icons.add,
      page: Page1(),
    ),
    MyRoute(
      iconData: Icons.compare_arrows,
      page: Page2(),
    )
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        index: 0,
        height: 50.0,
        items: pages
            .map((p) => Icon(
                  p.iconData,
                  size: 30,
                ))
            .toList(),
        color: Colors.white,
        buttonBackgroundColor: Colors.white,
        backgroundColor: Colors.blueAccent,
        animationCurve: Curves.easeInOut,
        animationDuration: Duration(milliseconds: 600),
        onTap: (index) {
          setState(() {
            _pageIndex = index;
          });
        },
      ),
      backgroundColor: Colors.blueAccent,
      body: pages[_pageIndex].page,
    );
  }
}

class MyRoute {
  final IconData iconData;
  final Widget page;

  MyRoute({this.iconData, this.page});
}

page1.dart

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Page1'));
  }
}

page2.dart

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Page2'));
  }
}

【讨论】：

谢谢，但它在我的方式中不起作用，因为我有 4 个 dart 文件要显示它们，当我尝试这样做时，它不会显示 dart 文件的
你只需要导入这些文件。
我在另一个项目中尝试过，效果很好，感谢您的帮助，但现在问题是这段代码在 bottombar.dart 中，我想在我的主文件中显示或调用它
脚手架在 main.dart 上，在这段代码中，我从小部件 CurvedNavigationBar 开始
为我工作！我这样使用它： int currentIndex = 0;列表页面 = const [HomePage(), CartPage(), ProfilePage()];正文：pages[currentIndex]，onTap:(index) { setState(() => currentIndex = index); },

【解决方案2】：

你可以参考这个教程，它会给你一个想法Flutter curved navigation bar

【讨论】：

【解决方案3】：

试试这个颤振插件 curved_navigation_bar 0.3.1

import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';

void main() => runApp(MaterialApp(home: BottomNavBar()));

class BottomNavBar extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int _page = 0;
  GlobalKey _bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: CurvedNavigationBar(
          key: _bottomNavigationKey,
          index: 0,
          height: 50.0,
          items: <Widget>[
            Icon(Icons.add, size: 30),
            Icon(Icons.list, size: 30),
            Icon(Icons.compare_arrows, size: 30),
            Icon(Icons.call_split, size: 30),
            Icon(Icons.perm_identity, size: 30),
          ],
          color: Colors.white,
          buttonBackgroundColor: Colors.white,
          backgroundColor: Colors.blueAccent,
          animationCurve: Curves.easeInOut,
          animationDuration: Duration(milliseconds: 600),
          onTap: (index) {
            setState(() {
              _page = index;
            });
          },
        ),
        body: Container(
          color: Colors.blueAccent,
          child: Center(
            child: Column(
              children: <Widget>[
                Text(_page.toString(), textScaleFactor: 10.0),
                RaisedButton(
                  child: Text('Go To Page of index 1'),
                  onPressed: () {
                    final CurvedNavigationBarState navBarState =
                        _bottomNavigationKey.currentState;
                    navBarState.setPage(1);
                  },
                )
              ],
            ),
          ),
        ));
  }
}

【讨论】：