如何在 Flutter 中自定义菜单？

Question

我正在 Getx 中开发一个动态菜单，并循环访问一个列表。如果所有菜单都相同，那将不是问题，问题是 Editores 菜单不是您在图像中看到的默认菜单。有没有办法利用我的代码并将 Editores 菜单打印到屏幕上？

控制器

class HomeController extends GetxController {
  final HomeRepository repository;
  HomeController(this.repository);
  final searchDrawerEC = TextEditingController();

  //Variáveis para compor o menu
  final _selectedIndex = 0.obs;
  int get selectedIndex => _selectedIndex.value;
  set selectedIndex(int newValue) => _selectedIndex(newValue);
  final items = [].obs;


  @override
  void onInit() {
    items.add(
      {
        'titulo': 'Home',
        'icone': const Icon(
          Icons.house_rounded,
          color: Colors.white,
        ),
        'rota': Routes.home,
      },
    );

    items.add(
      {
        'titulo': 'Novas Edições',
        'icone': Image.asset(AppImages.novasEdicoes),
        'rota': Routes.newEditions,
      },
    );

    items.add(
      {
        'titulo': 'Editores',
        'icone': Image.asset(AppImages.editores),
        'rota': '/',
      },
    );

    items.add(
      {
        'titulo': 'Seguindo',
        'icone': Image.asset(AppImages.seguinte),
        'rota': '/',
      },
    );

    items.add(
      {
        'titulo': 'Favoritos',
        'icone': Image.asset(AppImages.favorite),
        'rota': Routes.favoriteds,
      },
    );

    items.add(
      {
        'titulo': 'Net',
        'icone': Image.asset(AppImages.net1),
        'rota': '/',
      },
    );

    items.add(
      {
        'titulo': 'Configurações',
        'icone': const Icon(
          Icons.settings,
          color: Colors.white,
        ),
        'rota': '/',
      },
    );

    items.add(
      {
        'titulo': 'MMN',
        'icone': const Icon(
          Icons.person,
          color: Colors.white,
        ),
        'rota': '/',
      },
    );

    super.onInit();
  }

第

页

class DrawerContentWidget extends GetView<HomeController> {
  final int? editores;
  final bool? showEditores;


  // ignore: use_key_in_widget_constructors
  const DrawerContentWidget({this.editores, this.showEditores});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CardInfoWidget(
          showNet: false,
          showEdit: true,
          color: const Color(0XFF005E6C),
          editor: Get.find<AppController>().currentUser,
        ),
        Column(
          children: [
            Obx(() => SizedBox(
              height: 200,
              child: Column(
                children: [
                  ListView.builder(
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    itemCount: controller.items.length,
                    itemBuilder: (_, index) {
                      final _item = controller.items[index];
                      return Obx(() => Container(
                        decoration: (controller.selectedIndex == index)
                            ? const BoxDecoration(
                          border: Border(
                            top: BorderSide(width: 3.0, color: Colors.white),
                            bottom: BorderSide(width: 3.0, color: Colors.white),
                          ),
                        )
                            : null,
                        child: Card(
                          color: const Color(0XFF007E94),
                          elevation: 3,
                          child: ListTile(
                            title: Text(
                              _item['titulo'],
                              style: const TextStyle(color: Colors.white),
                            ),

                            leading: _item['icone'],
                            selected: (controller.selectedIndex == index),
                            onTap: () => Get.toNamed(_item['rota']),
                          ),
                        ),
                      ),
                      );
                    },
                  ),
                ],
              ),
            )
            ),
          ],
        )
      ],
    );
  }
}

Answer 1

已解决，将卡放入一些 OBX 中，然后使用 controller.selectedIndex = 索引和这样的路线。

onTap: () {
     controller.selectedIndex = index ;
     Get.toNamed(_item['rota']);
}

如何在 Flutter 中自定义菜单？

How to customize the menu in Flutter?

flutter