Flutter网页中的巨型菜单

lrl1mhuk  于 2023-01-02  发布在  Flutter
关注(0)|答案(1)|浏览(112)

有没有办法在flutter中添加一个大型菜单?我想在https://www.headphonezone.in/的appbar中添加类似的菜单,但是我找不到合适的软件包。有没有类似的软件包,或者可以编写一个类似的自定义菜单?

5uzkadbs

5uzkadbs1#

您可以使用DropdownButton和ExpansionTile的组合来实现大型菜单

import 'package:flutter/material.dart';
    
    class MyMegaMenu extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return DropdownButton<String>(
          value: 'Menu',
          icon: Icon(Icons.arrow_down),
          iconSize: 24,
          elevation: 16,
          style: TextStyle(color: Colors.deepPurple),
          underline: Container(
            height: 2,
            color: Colors.deepPurpleAccent,
          ),
          onChanged: (String newValue) {},
          items: <String>['Menu', 'Home', 'Profile', 'Settings']
            .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
        );
      }
    }

这将创建一个包含四个选项的简单下拉菜单:菜单、主页、个人资料和设置。要将其转换为大型菜单,您可以在项目列表中嵌套多个ExpansionTile小部件,如下所示:

import 'package:flutter/material.dart';

class MyMegaMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: 'Menu',
      icon: Icon(Icons.arrow_down),
      iconSize: 24,
      elevation: 16,
      style: TextStyle(color: Colors.deepPurple),
      underline: Container(
        height: 2,
        color: Colors.deepPurpleAccent,
      ),
      onChanged: (String newValue) {},
      items: <String>['Menu', 'Home', 'Profile', 'Settings']
        .map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          );
        }).toList()
        .add(ExpansionTile(
          title: Text('Menu'),
          children: [
            ListTile(
              title: Text('Submenu 1'),
            ),
            ListTile(
              title: Text('Submenu 2'),
            ),
          ],
        ))
    );
  }
}

相关问题