Как сделать просмотр списка с заголовками и ListTile?

Question

У меня есть ListView и мне нужно вставить несколько заголовков в текущую позицию (индекс). Но если я использую подход из поля, мой индекс не в порядке, я теряю 1-е и последнее место в списке ...

, если я добавляю itemCount: _list.length + 1, а последний индекс - = 1;Я правильно понял первый раздел, но он не работает для следующего заголовка ..

class CheckList extends StatefulWidget {
  bool isCheck = false; //for checkbox
  final String value; //geting value from other class
  List<String> _list = [];

  final List<ListItem> items;

  CheckList({Key key, this.value, this.items}) : super(key: key);

  @override
  _Question createState() => _Question();
}

class _Question extends State<CheckList> {
  BuildContext context;


  _getFromDB() async {
    widget._list = await DB().get2(widget.value, 'Description');

    widget._list.insert(0, "Part 1:...");
    widget._list.insert(18, "Part 2:...");
    widget._list.insert(49, "Part 3:...");

    final List<ListItem> items = widget._list.map((value) {
      final index = widget._list.indexOf(value);
      if ([0, 18, 49].contains(index)) {
        return HeaderItem(value);
      } else {
        return MessageItem(value);
      }
    }).toList();

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    this.context = context;

    return Scaffold(
        appBar: AppBar(
          title: Text(
            'TITLE APP',
          ),
        ),
        body: Container(
          child: getListView(), //listview populated from db
        ));
  }

  Widget getListView() {
    _getFromDB();
    var listview = ListView.builder(
      itemCount: widget.items.length,
      itemBuilder: (context, index) {
        final item = widget.items[index];
        if (item is HeaderItem) {
          return Column(
            children: <Widget>[
              Text(
                item.heading,
              ),
              Divider(),
            ],
          );
        } else if (item is MessageItem) {
          return ListTile(
            dense: true,
            leading: Checkbox(
              value: item.checked,
              onChanged: (value) {
                setState(() {
                  item.checked = value;
                });
              },
            ),
            title: Text(
              item.title,
            ),
            // subtitle: Text(_list2[index]),
          );
        }
      },
    );

    return listview;
  }
}

abstract class ListItem {}

class HeaderItem implements ListItem {
  final String heading;

  HeaderItem(this.heading);
}

class MessageItem implements ListItem {
  final String title;
  bool checked = false;

  MessageItem(this.title);
}

Итак, как исправить индексы и показать все элементы из списка со вставленными заголовками ..

Answer 1

Вы можете использовать этот подход ...

Создать классы, которые будут представлять различные типы элементов (HeaderItem, MessageItem), затем сопоставить _list со списком элементов(вам нужно иметь значения заголовка внутри вашего _list! - например, вы можете сделать _list.insert(18, "Part 2:...")) и, наконец, использовать ListView.builder.

Полный пример:

import 'package:flutter/material.dart';

void main() {
  final _list = List<String>.generate(100, (index) => "$index");

  _list.insert(0, "Part 1:...");
  _list.insert(18, "Part 2:...");
  _list.insert(49, "Part 3:...");

  final List<ListItem> items = _list.map((value) {
    final index = _list.indexOf(value);
    if ([0, 18, 49].contains(index)) {
      return HeaderItem(value);
    } else {
      return MessageItem(value);
    }
  }).toList();

  runApp(
    MaterialApp(
      home: App(items: items),
    ),
  );
}

class App extends StatelessWidget {
  final List<ListItem> items;

  const App({Key key, this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];

          if (item is HeaderItem) {
            return Column(
              children: <Widget>[
                Text(
                  item.heading,
                ),
                Divider(),
              ],
            );
          } else if (item is MessageItem) {
            return ListTile(
              leading: Text('$index'),
              title: Text(
                item.title,
                style: TextStyle(fontSize: 18),
              ),
            );
          }
        },
      ),
    );
  }
}

abstract class ListItem {}

class HeaderItem implements ListItem {
  final String heading;

  HeaderItem(this.heading);
}

class MessageItem implements ListItem {
  final String title;

  MessageItem(this.title);
}

Пример с флажками:

App теперь StatefulWidget, MessageItem имеет checked свойство.

import 'package:flutter/material.dart';

void main() {
  final _list = List<String>.generate(100, (index) => "$index");

  _list.insert(0, "Part 1:...");
  _list.insert(18, "Part 2:...");
  _list.insert(49, "Part 3:...");

  final List<ListItem> items = _list.map((value) {
    final index = _list.indexOf(value);
    if ([0, 18, 49].contains(index)) {
      return HeaderItem(value);
    } else {
      return MessageItem(value);
    }
  }).toList();

  runApp(
    MaterialApp(
      home: App(items: items),
    ),
  );
}

class App extends StatefulWidget {
  final List<ListItem> items;

  const App({Key key, this.items}) : super(key: key);

  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: widget.items.length,
        itemBuilder: (context, index) {
          final item = widget.items[index];

          if (item is HeaderItem) {
            return Column(
              children: <Widget>[
                Text(
                  item.heading,
                ),
                Divider(),
              ],
            );
          } else if (item is MessageItem) {
            return ListTile(
              leading: Text('$index'),
              title: Text(
                item.title,
                style: TextStyle(fontSize: 18),
              ),
              trailing: Checkbox(
                value: item.checked,
                onChanged: (value) {
                  setState(() {
                    item.checked = value;
                  });
                },
              ),
            );
          }
        },
      ),
    );
  }
}

abstract class ListItem {}

class HeaderItem implements ListItem {
  final String heading;

  HeaderItem(this.heading);
}

class MessageItem implements ListItem {
  final String title;
  bool checked = false;

  MessageItem(this.title);
}