dart - 如何使用 Flutter 实现 UserAccountsDrawerHeader 小部件的 AccountDetail 以与 Gmail 应用程序一样显示?
问题描述
我正在使用 FlutterUserAccountsDrawerHeader
小部件来显示用户的数据,但我无法弄清楚如何实现onDetailsPressed()
调用用户详细信息的函数。这是我的代码:
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return new Scaffold(
drawer: _buildDrawer(context),
appBar: _buildAppBar(),
);
}
}
Widget _buildAppBar() {
return new AppBar();
}
Widget _buildDrawer(BuildContext context) {
return new Drawer(
child: new ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: new Text("Cleudice Santos"),
accountEmail: new Text("cleudice.ms@gmail.com"),
onDetailsPressed: () {},
),
new ListTile(
title: new Text("Visão geral"),
leading: new Icon(Icons.dashboard),
onTap: () {
print("Visão geral");
},
),
],
),
);
}
我想单击箭头并显示帐户详细信息,如下所示。也就是说,重叠的内容drawer
。正如 Gmail 应用程序所做的那样。
解决方案
基本上,您应该做的是将其余内容替换为用户详细信息而不是当前列表。最简单的方法是将您的抽屉变成一个有状态的小部件,并使用一个布尔值来跟踪是否应该显示用户详细信息或正常列表。
我已将其添加到您的代码中(并添加了一些内容以使其独立,因此您可以将其粘贴到新文件中进行测试):
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: UserDetailDrawer(),
appBar: _buildAppBar(),
);
}
}
Widget _buildAppBar() {
return AppBar();
}
class UserDetailDrawer extends StatefulWidget {
@override
_UserDetailDrawerState createState() => _UserDetailDrawerState();
}
class _UserDetailDrawerState extends State<UserDetailDrawer> {
bool showUserDetails = false;
Widget _buildDrawerList() {
return ListView(
children: <Widget>[
ListTile(
title: Text("Visão geral"),
leading: Icon(Icons.dashboard),
onTap: () {
print("Visão geral");
},
),
ListTile(
title: Text("Another tile??"),
leading: Icon(Icons.question_answer),
),
],
);
}
Widget _buildUserDetail() {
return Container(
color: Colors.lightBlue,
child: ListView(
children: [
ListTile(
title: Text("User details"),
leading: Icon(Icons.info_outline),
)
],
),
);
}
@override
Widget build(BuildContext context) {
return Drawer(
child: Column(children: [
UserAccountsDrawerHeader(
accountName: Text("Cleudice Santos"),
accountEmail: Text("cleudice.ms@gmail.com"),
onDetailsPressed: () {
setState(() {
showUserDetails = !showUserDetails;
});
},
),
Expanded(child: showUserDetails ? _buildUserDetail() : _buildDrawerList())
]),
);
}
}
推荐阅读
- swift - 我正在尝试转换此函数,该函数使用此函数从 Firestore 数据库中检索用户数据
- dart - 通过指定地图值查找地图列表索引
- javascript - 字符串保存到数组是否永久保存?
- css - 不能在 GTK+ 3 中使用 CSS,使用 GtkCssProvider
- image - 如何使用地图功能渲染图像?
- python - 在类范围内的函数但不在类 python 上执行
- python - Python中电信号的示波器动画
- javascript - 如何使用 javascript/jquery 在 fa、far、fad 或 fas of font-awesome 之间更改/切换
- amazon-web-services - 如何在 Fluentd 中按命名空间过滤
- c# - 将 POCO / Entity 添加到 DbContext 以进行自定义查询 / 过程,而无需先在实体框架代码中创建表