更新抽屉内的列表视图项目

Question

这是一个单页应用程序。

我在主页的脚手架中创建了一个抽屉。标题下方的列表视图中有三个列表磁贴项。

当我单击列表磁贴时，我能够通过 onTap 方法更改抽屉的标题。

但是，如何在单击任何现有列表图块项目后用新列表图块项目替换当前列表图块项目。

一般来说，按下抽屉中的任何项目后如何更新列表图块项目

单击项目之前

点击更改字体后，列表没有变化

单击更改字体后我想要什么

我尝试制作一个返回列表视图的新函数，并在 onTap 内的 setState 中调用它，并在 setState 外部但在 onTap 内调用它

Answer 1

我这里做了一个简单的例子，如果满足你的需要，你可以看看。Simple Drawer

你也可以在飞镖垫上运行它 Dart pad

    import 'package:flutter/material.dart';

    const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

    void main() {
      runApp(MyApp());
    }

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: ThemeData.dark().copyWith(
            scaffoldBackgroundColor: darkBlue,
          ),
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            appBar: AppBar(),
            drawer: const Drawer(child: MyDrawer()),
            body: Center(
              child: MyWidget(),
            ),
          ),
        );
      }
    }

    enum MenuItem {
      font("Change Font",
          ['Commic Sans', 'Product Sans', 'Monserrat', 'ubuntu', 'unbounded']),
      theme("Change Theme", ['dark', 'light']),
      metrics("Change Metrics", ['small', 'medium', 'large']);

      final String label;
      final List<String> items;

      const MenuItem(this.label, this.items);
    }

    class MyDrawer extends StatefulWidget {
      const MyDrawer({super.key});

      @override
      State<MyDrawer> createState() => _MyDrawerState();
    }

    class _MyDrawerState extends State<MyDrawer> {
      MenuItem? selectedMenu;
      @override
      Widget build(BuildContext context) {
        return SafeArea(
            child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child:
                    Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                  const SizedBox(height: 20),
                  Text(
                    'Settings',
                    style: Theme.of(context).textTheme.headlineMedium,
                  ),
                  const SizedBox(height: 60),
                  Container(height: 1.0, color: Colors.grey),
                  const SizedBox(height: 60),
                  // if a menu item is selected, display its sub items
                  if (selectedMenu != null)
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start, 
                  children: [
                    BackButton(onPressed: (){
                        setState(() {
                              selectedMenu = null;
                            });
                    },),
                    
                      for (var item in selectedMenu!.items)
                      InkWell(
                          onTap: () {
                            print(item);
                          },
                          child: Padding(
                              padding: const EdgeInsets.all(10),
                              child: Text(
                                item,
                                style: Theme.of(context).textTheme.bodySmall,
                              )))
                  ])
                  else
                    for (var item in MenuItem.values)
                      InkWell(
                          onTap: () {
                            setState(() {
                              selectedMenu = item;
                            });
                          },
                          child: Padding(
                              padding: const EdgeInsets.all(10),
                              child: Text(
                                item.label,
                                style: Theme.of(context).textTheme.bodySmall,
                              )))
                ])));
      }
    }

    class MyWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Text(
          'Hello, World!',
          style: Theme.of(context).textTheme.headlineSmall,
        );
      }
    }