Question

按照该链接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”，使其不会随抽屉和列表视图一起移动。

P.S。我不想持有ListView。我只想按住或修复“ DrawerHeader”。

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

Answer 2

您可以将其包装在column内，然后在其中添加其他小部件，而不是在ListView中进行包装。另外，如果您想以任何比例划分标题和其他部分，则可以使用扩展小部件。

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

Answer 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')),
      ]))
    ]));

Flutter-固定抽屉接头

3 个答案: