Что является хорошим подходом для динамического создания столбца строк в Flutter - PullRequest
Новая
       40

Что является хорошим подходом для динамического создания столбца строк в Flutter

0 голосов
/ 12 февраля 2020

Так что в идеале я хотел бы позволить пользователям динамически добавлять или удалять строки из моего столбца при нажатии кнопки. Как и при нажатии кнопки «+», строка добавляется в столбец и наоборот, когда нажимается «X». Однако проблема возникает, когда я пытаюсь удалить строку с помощью соответствующей кнопки X. Похоже, что мои подходы могут удалить случайную строку только при ударе х, но не предполагаемую строку Такое поведение может быть достаточно для пользователей, если пользователь уже внес данные в определенную строку, а затем хочет удалить только эту строку.

r0 ..... +

r1. .... X (когда здесь нажимается X, может быть удален г2 или другая строка, то же самое для другой кнопки Х)

г2 ..... Х

До сих пор я принял два подхода для достижения моих намеченных функций. Первый - использовать простой оценочный фактор и a для l oop. Например, 

final number = new ValueNotifier(0);

new IconButton(
  icon: Icon(Icons.add),
  onPressed: () {
    number.value++;
    print(number.value);
    setState(() {});
  })

new Column(
  children: buildPartsWidget(number.value),
)

List<Widget> buildPartsWidget(int counts){
    List<Widget> ret = [];
    for(int i = 0; i < counts; i++){
      var temp = buildPartsRow();
      ret = List.from(ret)..add(temp);
    }
    return ret;
  }

Row buildPartsRow(int key) {
    return new Row(children: <Widget>[

      new IconButton(
        icon: Icon(Icons.clear), 
        onPressed: () {
          number.value--;
          setState(() {});
        })
    ]);
  }

Второй - использовать карту для сопряжения строки с числом, которое не работает ни с одним, например: 

Map<int, Row> rowMap = new Map();
int rowIndex;

List<Widget> rowList(){
    List<Widget> ret = [];
    rowMap.forEach((k, v) => ret.add(v));
    return ret;
  } 

new IconButton(
  icon: Icon(Icons.add),
  onPressed: () {
    rowMap[rowIndex] = buildPartsRow(rowIndex);
    rowIndex++;
    setState(() {});
  })

new Column(
  children: rowList
)


Row buildPartsRow(int key) {
    return new Row(children: <Widget>[

      new IconButton(
        icon: Icon(Icons.clear), 
        onPressed: () {
          rowMap.remove(key);
          setState(() {});
        })
    ]);
  }

Мне кажется, я понимаю основные проблемы этих двух подходов. Насколько я понимаю, такое поведение происходит потому, что в обоих подходах флаттер перестраивает столбцы entr ie и не имеет никакого отношения к входным данным в строке и не заботится о них. Как мне исправить мой подход? Или есть лучший способ достичь моей предполагаемой функциональности?

Я также пытался использовать listView, но он не работал для меня. Поскольку все эти виджеты, которые я использую, уже находятся внутри представления списка, использование списка внутри представления списка, по-видимому, требует от меня ограничения размера внутреннего списка с помощью контейнера или размера окна, что даст мне блок в моей форме. Я не хочу, чтобы поле в моей форме. Есть ли способ использования списка, но не требуется ли поле для ограничения его размера?

1 Ответ

0 голосов
/ 12 февраля 2020

Хороший подход к динамическому столбцу c виджетов - использовать вместо него ListView.builder. Найдите документацию здесь: https://api.flutter.dev/flutter/widgets/ListView/ListView.builder.html

ListView.builder(
  itemCount: rowMap.length,
  itemBuilder: (context, index) {
    return buildPartsRow(rowMap[index]);
  }
)
...