Flutter：带有扩展磁贴的导航抽屉

Question

我正在尝试使用扩展磁贴构建一个导航抽屉，当我单击标题时它会折叠，反之亦然 但是当我将抽屉标题设置为 ExpansionTile 的子项时，原始标题填充丢失了

 Widget _buildDrawer() {
return Drawer(
    child: ExpansionTile(
  title: UserAccountsDrawerHeader(
    decoration: BoxDecoration(color: Colors.deepPurple),
    accountName: Text("Mohamed Ali"),
    accountEmail: Text("mohamed.ali6996@hotmail.com"),
    currentAccountPicture: CircleAvatar(
      child: Text("M"),
      backgroundColor: Colors.white,
    ),
  ),
  children: <Widget>[
    ListTile(
      title: Text("page one"),
      trailing: Icon(Icons.android),
      onTap: () => _onSelectedItem(0),
    ),
    ListTile(
      title: Text("page two"),
      trailing: Icon(Icons.accessible),
      onTap: () => _onSelectedItem(1),
    ),
    Divider(),
    ListTile(
      title: Text("Log out"),
      trailing: Icon(Icons.exit_to_app),
    ),
  ],
  initiallyExpanded: false,
)

); }

Answer 1

问题在于标题取代了ExpansionTile 中的第一个图块。

一种可能的解决方案是使用Stack 并使用Align 调整内容，使扩展图标位于标题的底部。

更改展开图标的颜色可能不适合您。有一个报告的issue here，我已经为此提交了PR here。不知道什么时候能登陆master。

_buildDrawer(BuildContext context) {
  ThemeData theme = Theme.of(context);
  return Drawer(
    child: Stack(
      children: <Widget>[
        UserAccountsDrawerHeader(
          decoration: BoxDecoration(color: Colors.indigo),
        ),
        Positioned(
          top: 120.0,
          left: 0.0,
          right: 0.0,
          child: Theme(
            data: theme.copyWith(
              textTheme: theme.textTheme.copyWith(
                subhead: theme.textTheme.subhead.copyWith(
                  color: Colors.grey,
                ),
              ),
              accentColor: Colors.white,
              unselectedWidgetColor: Colors.grey,
              iconTheme: theme.iconTheme.copyWith(color: Colors.white),
              dividerColor: Colors.transparent,
            ),
            child: ExpansionTile(
              title: Align(
                heightFactor: 0.4,
                alignment: Alignment.bottomCenter,
                child: UserAccountsDrawerHeader(
                  decoration: BoxDecoration(color: Colors.transparent),
                  accountName: Text("Mohamed Ali"),
                  accountEmail: Text("mohamed.ali6996@hotmail.com"),
                  currentAccountPicture: CircleAvatar(
                    child: Text("M"),
                    backgroundColor: Colors.white,
                  ),
                ),
              ),
              children: <Widget>[
                ListTile(
                  title: Text("page one"),
                  trailing: Icon(Icons.android),
                  onTap: () => {},
                ),
                ListTile(
                  title: Text("page two"),
                  trailing: Icon(Icons.accessible),
                  onTap: () => {},
                ),
                Container(
                  height: 1.0,
                  color: Color(0xFFDDDDDD),
                ),
                ListTile(
                  title: Text("Log out"),
                  trailing: Icon(Icons.exit_to_app),
                ),
              ],
              initiallyExpanded: false,
            ),
          ),
        ),
      ],
    ),
  )
}