Построение построителя Listview с отфильтрованными элементами условий (Flutter) - PullRequest
Новая
       70

Построение построителя Listview с отфильтрованными элементами условий (Flutter)

0 голосов
/ 30 апреля 2020

У меня есть список ниже структуры; 

class Data {
  String name;
  int id;
  bool active;
}
List<Data> _dataList;

И я использую этот список в Listview.builder, как показано ниже; 

ListView.builder(
      shrinkWrap: true,
      scrollDirection: Axis.vertical,
      itemCount: _dataList.length,
      itemBuilder: (context, index) {
          String name= _dataList[index].name;
          String id = _dataList[index].id.toString();
          bool active= _dataList[index].active;
      return 
      active ?
      Card(
         elevation: 5,
         child: Text(name + id));
    }
)

Также я могу взять общее число, которое будет будет отображаться после фильтра и общего номера страницы в соответствии с этим; 

var activeList = _dataList.where((c) => c.active == true).toList();
var activeCount = activeList.length;
var totalPages = (activecount/20).ceil();

И я хочу добавить нумерацию страниц (как 20 элементов на страницу) для перемещения по типу навигации "" с иконками нижнего края , с предыдущей и следующей страницами logi c, как этого добиться?

Я пробовал ниже logi c, но он не работал ..

Сторона строителя: 

int page = 1;
int pageCount =0;

ListView.builder(
      shrinkWrap: true,
      scrollDirection: Axis.vertical,
      itemCount: addedCount < 20 ? addedCount : 20,
      itemBuilder: (context, index) {
          String name= activeList[page == 1 ? index : index + pageCount].name;
          String id = activeList[page == 1 ? index : index + pageCount].id.toString();
          bool active= activeList[page == 1 ? index : index + pageCount].active;

Сторона значка: 

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  crossAxisAlignment: CrossAxisAlignment.center ,
    children: <Widget>[
          InkWell(
              onTap: (){
              if (1 < page){page = page - 1; pageCount = pageCount - 20;}
              else {page = 1;}
              setState(() {});},
              child: Icon(Icons.arrow_back_ios, size: 35,)),
          Text("$page / $totalPages"),
          InkWell(
              onTap: (){
              if (page < totalPages){page = page + 1; pageCount= pageCount+ 20;}
              else {page = totalPages;}
              setState(() {});},
              child: Icon(Icons.arrow_forward_ios, size: 35,)),
             ],
          ),

1 Ответ

1 голос
/ 30 апреля 2020

Этот код ниже может дать некоторое представление: 

class App extends StatefulWidget {
  @override
  AppState createState() => AppState();
}

class AppState extends State<App> {
  final List<Data> dataList = <Data>[];
  List<Data> currentDataList = <Data>[];
  int page = 1;
  int pageCount = 20;
  int startAt = 0;
  int endAt;
  int totalPages = 0;

  @override
  void initState() {
    for (var i = 1; i <= 100; i++) dataList.add(Data(name: "Test - $i", id: i));

    endAt = startAt + pageCount;
    totalPages = (dataList.length / pageCount).floor();
    if (dataList.length / pageCount > totalPages) {
      totalPages = totalPages + 1;
    }

    currentDataList = dataList.getRange(startAt, endAt).toList();
    super.initState();
  }

  void loadPreviousPage() {
    if (page > 1) {
      setState(() {
        startAt = startAt - pageCount;
        endAt = page == totalPages
            ? endAt - currentDataList.length
            : endAt - pageCount;
        currentDataList = dataList.getRange(startAt, endAt).toList();
        page = page - 1;
      });
    }
  }

  void loadNextPage() {
    if (page < totalPages) {
      setState(() {
        startAt = startAt + pageCount;
        endAt = dataList.length > endAt + pageCount ? endAt + pageCount : dataList.length;
        currentDataList = dataList.getRange(startAt, endAt).toList();
        page = page + 1;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pagination'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView.builder(
              shrinkWrap: true,
              scrollDirection: Axis.vertical,
              itemCount: currentDataList.length,
              itemBuilder: (context, index) {
                return Card(
                  elevation: 5,
                  child: Text(
                    currentDataList[index].name +
                        currentDataList[index].id.toString(),
                  ),
                );
              },
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              IconButton(
                onPressed: page > 1 ? loadPreviousPage : null,
                icon: Icon(
                  Icons.arrow_back_ios,
                  size: 35,
                ),
              ),
              Text("$page / $totalPages"),
              IconButton(
                onPressed: page < totalPages ? loadNextPage : null,
                icon: Icon(
                  Icons.arrow_forward_ios,
                  size: 35,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
...