dart - Flutter - 修复抽屉页眉

点击此链接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 一起移动。

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

最佳答案

是的,将其移出 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
        ),
      ],
    ),
  );
}

https://stackoverflow.com/questions/54017713/

相关文章:

regex - Flutter 无法解析正则表达式

android - Flutter - 多选 ListView

flutter - 如何更改 CupertinoDatePicker 显示语言?

dart - Flutter 有数据绑定(bind)吗?

ios - 如何在 Flutter 中隐藏导航栏(在 iPhone X 上)

dart - flutter/Dart 异步不等待

android - 如何在没有 Android Studio 的情况下使用模拟器在 VS 代码中安装

intellij-idea - 如何在 IntelliJ 中自动完成/导入 Flutter 类?

flutter - 永久持久的 Bottom Sheet flutter

flutter - 因为sdk的flutter_test的每个版本都依赖... sdk的flutte