如何在Flutter中导航期间保留DropdownButton值

rqdpfwrv  于 2023-05-01  发布在  Flutter
关注(0)|答案(1)|浏览(124)

我在一个flutter项目中实现了DropdownButton,并在他们的开发页面Here上复制了代码。虽然它工作得很好(在我的情况下,允许我在一堆图标中循环),但如果我切换到应用程序中的另一个标签并返回到DropdownButton存在的标签,它会重置为初始值List.first。如何保留选定状态并仅在用户更改应用程序中的值时更改它?
提前感谢您的任何建议!:)

xbp102n0

xbp102n01#

要在flutter中导航期间保留Dropdownbutton的值,可以将所选值保存在有状态小部件的状态中,并在重建DropDownButton时使用该值初始化DropDownButton

class MyDropdownButton extends StatefulWidget {
  @override
  _MyDropdownButtonState createState() => _MyDropdownButtonState();
}

class _MyDropdownButtonState extends State<MyDropdownButton> {
  String _selectedValue = 'Option 1';

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: _selectedValue,
      items: [
        DropdownMenuItem(value: 'Option 1', child: Text('Option 1')),
        DropdownMenuItem(value: 'Option 2', child: Text('Option 2')),
        DropdownMenuItem(value: 'Option 3', child: Text('Option 3')),
      ],
      onChanged: (value) {
        setState(() {
          _selectedValue = value!;
        });
      },
    );
  }
}

在Scaffold中使用MyDropdownButton小部件,并用ValueListenableBuilder Package 它。ValueListenableBuilder侦听对ValueNotifier的更改,并在值更改时重新构建DropdownButton

class MyHomePage extends StatelessWidget {
  final ValueNotifier<String> selectedValue = ValueNotifier('Option 1');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: ValueListenableBuilder<String>(
        valueListenable: selectedValue,
        builder: (context, value, _) {
          return Column(
            children: [
              MyDropdownButton(),
              ElevatedButton(
                onPressed: () {
                  selectedValue.value = MyDropdownButtonState()._selectedValue;
                  Navigator.of(context).pushNamed('/second');
                },
                child: Text('Go to Second Screen'),
              ),
            ],
          );
        },
      ),
    );
  }
}

当您导航到新屏幕时,将选定值保存在ValueNotifier中,并将其作为新屏幕的参数传递;当导航回第一个屏幕时,使用保存在第二个屏幕中的更新selectedValue ValueNotifier

class SecondScreen extends StatelessWidget {
  final ValueNotifier<String> selectedValue;

  SecondScreen({required this.selectedValue});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(selectedValue.value),
            ElevatedButton(
              onPressed: () {
                selectedValue.value = MyDropdownButtonState()._selectedValue;
                Navigator.of(context).pop();
              },
              child: Text('Go back'),
            ),
          ],
        ),
      ),
    );
  }
}

相关问题