如何让这种底部导航栏颤动？答案

【问题标题】：How to make this type of bottom navigation bar in flutter?如何让这种底部导航栏颤动？
【发布时间】：2021-09-26 16:44:42
【问题描述】：

Flutter bottom navigation bar

我需要使这种底部导航栏颤动，其中所选项目将像主页按钮一样突出显示。有人可以帮忙吗？

【问题讨论】：

标签： flutter user-interface flutter-layout bottomnavigationview flutter-bottomnavigation

【解决方案1】：

使用这个plugin

并将此代码放入您的脚手架小部件中。

bottomNavigationBar: CurvedNavigationBar(
  backgroundColor: Colors.blueAccent,
  items: <Widget>[
    Icon(Icons.add, size: 30),
    Icon(Icons.list, size: 30),
    Icon(Icons.compare_arrows, size: 30),
  ],
  onTap: (index) {
    setState(() {
      _page = index;
    });
  },
),

如果您想以编程方式更改页面（例如将您导航到另一个页面的按钮）。

添加这些变量，

int _page = 0;
GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();

然后将这个属性添加到将导航到另一个页面的按钮中

ElevatedButton(
  child: Text('Your Button'),
  onPressed: () {
    final CurvedNavigationBarState? navBarState =
      _bottomNavigationKey.currentState;
    navBarState?.setPage(1);//this will navigate to page at index 1
  },
)

你的代码应该是这样的

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

void main() {
  runApp(Home());
}

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

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();
  int _page = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        items: <Widget>[
          Icon(Icons.add, size: 30),
          Icon(Icons.list, size: 30),
          Icon(Icons.compare_arrows, size: 30),
        ],
        onTap: (index) {
          setState(() {
            _page = index;
          });
        },
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Your Button'),
          onPressed: () {
            final CurvedNavigationBarState? navBarState =
                _bottomNavigationKey.currentState;
            navBarState?.setPage(1);
          },
        ),
      )
    );
  }
}

更多信息请查看plugin's page

【讨论】：