Flutter山形菜单插件mountain_menu的使用

山形菜单简介

由 The ITcians 设计的山形菜单是一款专为你的应用程序打造的弯曲菜单。你可以自定义菜单的动画和主题。

示例代码

基本使用

以下是一个简单的示例，展示如何在Flutter应用中使用MountainMenu插件：

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

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

  [@override](/user/override)
  State<MenuDemo> createState() => _MenuDemoState();
}

class _MenuDemoState extends State<MenuDemo> {
  // 菜单项列表
  List<String> menus = ["SETTINGS", "SEARCH", "NOTIFICATIONS", "HOME", "PROFILE"];
  
  // 当前选中的菜单项索引
  int selectedIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            // 显示一个图像
            Image.network(
              "https://avatars.githubusercontent.com/u/93488670?s=400&u=af911b0e99e78a599f08f47f1e3152700b869f6b&v=4"
            ),
            // 显示文本
            const Text(
              "The ITcians",
              style: TextStyle(
                color: Colors.black,
                fontFamily: "Cursive",
                fontWeight: FontWeight.bold,
                fontSize: 40
              )
            ),
            // 显示当前选中的菜单项
            Text(
              menus[selectedIndex],
              style: const TextStyle(
                color: Color(0xff9264EB),
                fontWeight: FontWeight.bold,
                fontSize: 30
              )
            ),
          ],
        ),
      ),
      // 添加底部山形菜单
      bottomNavigationBar: MountainMenu(
        color: const Color(0xff9264EB), // 山形菜单的颜色
        menuIcon: Icons.menu, // 主按钮图标
        mainButtonElevation: 0, // 主按钮阴影
        mini: false, // 是否缩小菜单
        curve: Curves.bounceOut, // 动画曲线
        buttonBackgroundColor: Colors.white, // 菜单按钮背景颜色
        onChange: (val) async { // 菜单变化监听器
          setState(() {
            selectedIndex = val;
          });
        },
        menus: const [
          Icon(Icons.settings, color: Color(0xff9264EB)), // 设置图标
          Icon(Icons.search, color: Color(0xff9264EB)), // 搜索图标
          Icon(Icons.chat_bubble, color: Color(0xff9264EB)), // 通知图标
          Icon(Icons.home, color: Color(0xff9264EB)), // 首页图标
          Icon(Icons.person, color: Color(0xff9264EB)), // 个人资料图标
        ],
      ),
    );
  }
}