dart - 如何使用 Flutter 实现 UserAccountsDrawerHeader 小部件的 AccountDetail 以与 Gmail 应用程序一样显示？

Question

我正在使用 Flutter UserAccountsDrawerHeader 小部件来显示用户的数据，但我无法弄清楚如何实现 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 应用一样。

Answer 1

基本上，您应该将其余内容替换为用户详细信息，而不是当前列表。最简单的方法是将您的抽屉变成一个有状态的小部件，并使用一个 bool 值来跟踪是否应该显示用户详细信息或正常列表。

我已将其添加到您的代码中(并添加了一些内容以使其独立，以便您可以将其粘贴到新文件中进行测试):

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())
      ]),
    );
  }
}