flutter - 抽屉菜单 - 侧面的子菜单

Question

我尝试为 flutter 抽屉菜单找到解决方案。我实现了普通抽屉，菜单看起来找到了。现在我想为许多项目绘制一个子菜单。

我找到了这个Flutter how to add a Expandable menu item inside navigation drawer?但这不是我想要的。这显示标题项下的子项。我想要一个解决方案来单击 headitem 和抽屉中的新页面幻灯片，其中包含新的子项目列表，headelement 位于顶部以返回主菜单。这是我的意思的一个例子。

我希望任何人都可以提供帮助。

Answer 1

我已经实现了您想要的东西。使用了一个名为 buildMainmenu() 的方法，该方法将菜单项列表作为参数。 isSublist 变量用于区分主菜单和子菜单。使用 setState() 方法更新抽屉的内容。附加代码可能对您有所帮助!

import 'package:webview/core/models/Menu.dart';
import 'package:webview/viewmodel/web_view_model.dart';
import 'package:flutter/material.dart';
import 'package:xml_parser/xml_parser.dart';
import 'dart:io';
import 'package:logcat/logcat.dart';


class NestedDrawer extends StatefulWidget {
  final WebViewModel model;

  CustomDrawer(this.model);

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

class _NestedDrawerState extends State<NestedDrawer> {
  bool isSublist = false;
  List<Menu> subList = List();
  String subMenuTitle = "";

  @override
  Widget build(BuildContext context) {
    return Drawer(
        child: Column(
          children: <Widget>[
            Container(

                width: double.maxFinite,
                alignment: Alignment.center,
                padding: EdgeInsets.symmetric(vertical: 16),
                child:  Stack(children: <Widget>[
                  Visibility(
                    visible: isSublist,
                    maintainSize: true,
                    maintainAnimation: true,
                    maintainState: true,
                    child:  Align(
                        alignment: Alignment.centerLeft,

                        child: InkWell(
                          child: Icon(
                            Icons.arrow_back_ios,
                              color: Colors.green
                          ),
                          onTap: () {
                            backToMainMenu();
                          },
                        )),
                  ),
                  Align(
                    alignment: Alignment.center,
                    child: Text(
                      !isSublist?
                      "Main menu" : subMenuTitle,

                    ),
                  )
                ])

            ),
            Padding(padding: EdgeInsets.fromLTRB(0, 10, 0,0),),
            !isSublist
                ? Expanded(
              // Main menu
              flex: 2,
              child: buildMainmenu(widget.model.itemsList),
            )
                : Expanded(
              // Sub menu
                flex: 2,
                child: buildMainmenu(subList))
          ],
        ));
  }

  Widget buildMainmenu(List<Menu> menus) {
    return ListView.builder(
        itemCount: menus.length,
        itemBuilder: (context, index) {
          return Column(
            children: <Widget>[
              menus[index].subMenuList.length == 0
                  ? InkWell(
                child: Row(children: <Widget>[
                  menus[index].iconUrl != null
                      ? Padding(
                      padding: EdgeInsets.fromLTRB(10, 5, 0, 0),
                      child: FadeInImage.assetNetwork(
                        placeholder:
                        "assets/${menus[index].iconPath}",
                        image: menus[index].iconUrl,
                        height: 20,
                        width: 20,
                      ))
                      : Container(),
                  Padding(
                    padding: EdgeInsets.fromLTRB(10, 5, 0, 0),
                    child: Text(
                      menus[index].label.toString(),
                      style: TextStyle(
                          fontSize: double.parse(
                              widget.model.configItems.MenuItemsFontSize),
                          color:
                          widget.model.configItems.MenuItemsFontColor,
                          fontWeight: FontWeight.bold),
                      textAlign: TextAlign.left,
                    ),
                  )
                ]),
                onTap: (){

                },
              )
                  : InkWell(
                child: Stack(
                  children: <Widget>[
                    menus[index].iconUrl != null
                        ? Align(
                        alignment: Alignment.centerLeft,
                        child: Padding(
                            padding: EdgeInsets.fromLTRB(10, 5, 0, 0),
                            child: FadeInImage.assetNetwork(
                              placeholder:
                              "assets/${menus[index].iconPath}",
                              image: menus[index].iconUrl,
                              height: 20,
                              width: 20,
                            )))
                        : Container(),
                    Padding(
                        padding: EdgeInsets.fromLTRB(40, 8, 0, 0),
                        child: Text(
                          menus[index].label.toString(),

                        )),
                    Padding(
                        padding: EdgeInsets.fromLTRB(0, 5, 5, 0),
                        child: Align(
                          alignment: Alignment.centerRight,
                          child: Image.asset(
                            'assets/menu/right.png',

                            scale: 4,
                          ),
                        ))
                  ],
                ),
                onTap: () {
                  loadSublistmenu(menus[index].subMenuList,
                      menus[index].label.toString());
                },
              ),
              Divider(color: widget.model.configItems.MenuItemsSeperatorColor),
            ],
          );
        });
  }

  void loadSublistmenu(List<Menu> subMenuList, String title) {
    setState(() {
      subList = subMenuList;
      isSublist = true;
      subMenuTitle = title;
    });
  }

  void backToMainMenu() {
    setState(() {
      isSublist = false;
    });
  }
}