Flutter - 修复抽屉页眉答案

【问题标题】：Flutter - Fix Drawer HeaderFlutter - 修复抽屉页眉
【发布时间】：2019-01-03 07:02:10
【问题描述】：

点击此链接Add a Drawer to a screen 我创建了一个抽屉。

以下是我的一段代码：

// FUNCTION CONTAINING LEFT SIDE MENU ITEMS
  _drawerList() {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'John Doe',
                ),
              ],
            ),
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/menu_bg.png'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          ListTile(
            // Some Code
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // Some Code
        drawer: Drawer(
          child: _drawerList(),
        ),
        // Some Code
  }
}

有什么办法可以修复“DrawerHeader”，使其不随抽屉和列表视图一起移动。

附：我不想持有 ListView。我只想保留或修复“DrawerHeader”。

【问题讨论】：

您找到解决方案了吗？我也被困在这个问题上。

标签： dart flutter navigation-drawer

【解决方案1】：

是的，将它移出 ListView 小部件并使用 Column 来容纳 DrawerHeader 和 ListView。

启用项目滚动

_drawerList() {
  return Drawer(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        DrawerHeader(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                'John Doe',
              ),
            ],
          ),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/menu_bg.png'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            ListTile(
              // Some Code
            ),
            ListTile(
              // Some Code
            ),
            ListTile(
              // Some Code
            ),
            ListTile(
              // Some Code
            ),
            ListTile(
              // Some Code
            ),
          ],
        ),
      ],
    ),
  );
}

禁用项目滚动

_drawerList() {
  return Drawer(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        DrawerHeader(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                'John Doe',
              ),
            ],
          ),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/menu_bg.png'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        ListTile(
          // Some Code
        ),
        ListTile(
          // Some Code
        ),
        ListTile(
          // Some Code
        ),
        ListTile(
          // Some Code
        ),
        ListTile(
          // Some Code
        ),
      ],
    ),
  );
}

【讨论】：

我不想持有 ListView。我只想按住“DrawerHeader”
为什么不持有ListView？也许你会有很多 ListTiles，它们在较小的设备上是不可见的......
发生异常。 FlutterError（无法对没有大小的渲染框进行测试。
第一段代码抛出异常，════════渲染库捕获的异常═══════════════════════ ══════════ 'package:flutter/src/rendering/shifted_box.dart'：断言失败：第 323 行 pos 12：'child!.hasSize'：不正确。相关的导致错误的小部件是 Scaffold ...

【解决方案2】：

您可以将其包装在列中，然后在其中添加其他小部件，而不是包装在 ListView 中。此外，如果您想以任何比例划分标题和其他部分，您可以使用 Expanded 小部件。

 _drawerList() {
    return Drawer(
      child: Container(
        child: Column(
          children: <Widget>[
            Expanded(
              flex: 1,
              child: DrawerHeader(
                padding: EdgeInsets.all(0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'John Doe',
                    ),
                  ],
                ),

              ),
            ),
            Expanded(
              flex: 2,
              child: ListView(

                scrollDirection: Axis.vertical,

                children: <Widget>[
                  ListTile(
                title: Text("Ses"),
                // Some Code
              ),
               ListTile(
                title: Text("Ses"),
                // Some Code
              ),
               ListTile(
                title: Text("Ses"),
                // Some Code
              ),
               ListTile(
                title: Text("Ses"),
                // Some Code
              ),
               ListTile(
                title: Text("Ses"),
                // Some Code
              ),
               ListTile(
                title: Text("Ses"),
                // Some Code
              ),
               ListTile(
                title: Text("Ses"),
                // Some Code
              ),
               ListTile(
                title: Text("Ses"),
                // Some Code
              ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

【讨论】：

【解决方案3】：

我使用此代码将 DrawerHeader 固定在顶部并固定高度并制作列表以填充下面的其余空间。

final drawer = Drawer(
    child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
      Container(
          height: 200,
          child: DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              child: Text('Right Drawer Header',
                  style: TextStyle(color: Colors.white, fontSize: 24)))),
      Expanded(
          child: ListView(padding: EdgeInsets.zero, children: [
        ListTile(leading: Icon(Icons.message), title: Text('Message')),
        ListTile(
            leading: Icon(Icons.account_circle), title: Text('Profile')),
        ListTile(leading: Icon(Icons.settings), title: Text('Settings')),
      ]))
    ]));

【讨论】：