DrawerLayout: как сделать этот пользовательский макет в флаттере

Question

У меня есть ящик, в котором я хочу получить макет, опубликованный на скриншоте ниже.

AllTasks, Today, Complete and Incomplete с numbers исправлены. Пользователь не может добавить их. Уже добавлено мной. CreateList and Settings также.

MyList, который добавляется пользователем, и он может добавлять больше, таких как еда, спорт, чтение и т. Д.

Divider также, возможно, после 1 строки или 3 строк для отображения в виде групп.

Должен ли я использовать ListView ?. Любое предложение, пожалуйста.

Answer 1

У вас есть несколько способов сделать это первым, использующим ListView следующим образом:

drawer: new Drawer(
      child: new Column(
        children: <Widget>[
          new UserAccountsDrawerHeader(
            accountName: const Text('Test Widget'),
            accountEmail: const Text('test.widget@example.com'),
            margin: EdgeInsets.zero,
            onDetailsPressed: () {},
          ),
          new Expanded(
            child: new ListView(
              padding: const EdgeInsets.only(top: 8.0),
              children: <Widget>[
                new Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: _drawerContents.map((String id) {
                    return new ListTile(
                      leading: new CircleAvatar(child: new Text(id)),
                      title: new Text('Drawer item $id'),
                    );
                  }).toList(),
                ),
                // The drawer's "details" view.
                new Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    new ListTile(
                      leading: const Icon(Icons.add),
                      title: const Text('Add account'),
                    ),
                    new ListTile(
                      leading: const Icon(Icons.settings),
                      title: const Text('Manage accounts'),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    )

Но это эффективно только при ограниченном количестве элементов списка, потому что все элементы этого ListView визуализируютсясразу.

Другой способ сделать это - использовать ListView.builder следующим образом:

drawer: new Drawer(
      child: new Column(
        children: <Widget>[
          new UserAccountsDrawerHeader(
            accountName: const Text('Test Test'),
            accountEmail: const Text('test@example.com'),
            margin: EdgeInsets.zero,
            onDetailsPressed: () {},
          ),
          new Expanded(
            child: new ListView.builder(
              itemBuilder: (BuildContext context, int index) =>
                  new EntryItem(data[index]),
              itemCount: data.length,
            ),
          ),
        ],
      ),
    ),

Таким образом, элементы списка будут отображаться один за другим во время прокрутки.Вам следует создать одну модель как для жестко закодированных элементов, так и для переменных элементов, а затем создать другой ListTile (в примере EntryItem).

Дайте мне знать, если вам нужно больше деталей.

PS.Пример EntryItem ниже:

class EntryItem extends StatelessWidget {
  const EntryItem(this.entry);

  final Entry entry;

  Widget _buildTiles(Entry root) {
      if(root.counter != null) {
          return new ListTile(
              leading: Icon(root.icon),
              title: Text(root.title),
              trailing: new Text(root.counter)
          );
      } else {
        return new ListTile(
              leading: Icon(root.icon),
              title: Text(root.title),
          );
      }
  }

  @override
  Widget build(BuildContext context) {
    return _buildTiles(entry);
  }
}