gpt4 book ai didi

flutter - 如何在 Flutter 的 Scaffold.drawer 中保持小部件的状态?

转载 作者:IT王子 更新时间:2023-10-29 07:02:48 34 4
gpt4 key购买 nike

我想将小部件的状态保留在 Scaffold.drawer 中. The Scaffold.drawer是一个自定义小部件,其中有一个 RaiseButton。单击按钮时,按钮中的文本发生变化。但是当抽屉关闭并重新打开抽屉时,更改的文本将被重置。

我在我的自定义抽屉中使用了“with AutomaticKeepAliveClientMixin<>”,但它不起作用。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Demo"),
),
drawer: Drawer(child: CustomDrawer(),),
body: Center(
child: Text("Flutter Demo"),
),
);
}
}

class CustomDrawer extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _CustomDrawerState();
}
}

class _CustomDrawerState extends State<CustomDrawer> with AutomaticKeepAliveClientMixin<CustomDrawer> {

String btnText = "Click!";

@override
bool get wantKeepAlive => true;

@override
Widget build(BuildContext context) {
super.build(context);
return Center(
child: RaisedButton(onPressed: () {
setState(() {
btnText = "Clicked!!";
});
}, child: Text(btnText),),
);
}

}

我希望即使抽屉关闭,小部件的状态也能保持。

最佳答案

为抽屉创建一个单独的小部件,然后在任何需要的地方使用。

使用 Provider 管理抽屉状态

class DrawerStateInfo with ChangeNotifier {
int _currentDrawer = 0;
int get getCurrentDrawer => _currentDrawer;

void setCurrentDrawer(int drawer) {
_currentDrawer = drawer;
notifyListeners();
}

void increment() {
notifyListeners();
}
}

将状态管理添加到 Widget 树

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MultiProvider(
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.teal,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
),
providers: <SingleChildCloneableWidget>[
ChangeNotifierProvider<DrawerStateInfo>(
builder: (_) => DrawerStateInfo()),
],
);
}
}

创建抽屉小部件以在应用程序中重用

class MyDrawer extends StatelessWidget {
MyDrawer(this.currentPage);

final String currentPage;

@override
Widget build(BuildContext context) {
var currentDrawer = Provider.of<DrawerStateInfo>(context).getCurrentDrawer;
return Drawer(
child: ListView(
children: <Widget>[
ListTile(
title: Text(
"Home",
style: currentDrawer == 0
? TextStyle(fontWeight: FontWeight.bold)
: TextStyle(fontWeight: FontWeight.normal),
),
trailing: Icon(Icons.arrow_forward),
onTap: () {
Navigator.of(context).pop();
if (this.currentPage == "Home") return;

Provider.of<DrawerStateInfo>(context).setCurrentDrawer(0);

Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (BuildContext context) =>
MyHomePage(title: "Home")));
},
),
ListTile(
title: Text(
"About",
style: currentDrawer == 1
? TextStyle(fontWeight: FontWeight.bold)
: TextStyle(fontWeight: FontWeight.normal),
),
trailing: Icon(Icons.arrow_forward),
onTap: () {
Navigator.of(context).pop();
if (this.currentPage == "About") return;

Provider.of<DrawerStateInfo>(context).setCurrentDrawer(1);

Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (BuildContext context) => MyAboutPage()));
},
),
],
),
);
}
}

在您的一个页面中使用抽屉

class MyAboutPage extends StatefulWidget {
@override
_MyAboutPageState createState() => _MyAboutPageState();
}

class _MyAboutPageState extends State<MyAboutPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('About Page'),
),
drawer: MyDrawer("About"),
);
}
}

关于flutter - 如何在 Flutter 的 Scaffold.drawer 中保持小部件的状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56735073/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com