Question

我需要在flutter中制作这种类型的底部导航栏，其中所选项目将像主页按钮一样突出显示。任何人都可以帮忙吗？

Answer 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

如何在flutter中制作这种类型的底部导航栏？

1 个答案: