Как создать кнопки с l oop в столбце во Flutter? - PullRequest
Новая
       106

Как создать кнопки с l oop в столбце во Flutter?

0 голосов
/ 17 июня 2020

Мне нужно реализовать списки кнопок в столбце в зависимости от ввода данных. Итак, для этого я должен использовать l oop. Для каждой кнопки требуется два ввода id, text. Я могу сделать это со списком. Но он принимает только строковое значение, а не целое число.

Это код, который я пробовал.

код 

Widget getTextWidgets(List<String> strings)
  {
    List<Widget> list = new List<Widget>();
    for(var i = 0; i < strings.length; i++){
        list.add(new ButtonForHome(
          lable: strings[i],
          onPressed: (){},
          ));
    }
    return new Column(children: list);
  }

Я хочу поместить id в событие onPressed. Как можно реализовать во Флаттере?

Ответы [ 2 ]

1 голос
/ 17 июня 2020

Нил sh Ратод действительно дал описательный ответ на то же самое. Во флаттере также есть способ добиться этого, который очень похож на POJO class, -

  • Чтобы создать собственный виджет и указать поля, которые необходимо передать, когда мы используем виджет
  • Добавьте виджет в список с данными, указанными для передачи
  • Вы можете отслеживать идентификатор, нажимая его также

Я ясно вижу, что, вы создали свой собственный виджет с именем ButtonForHome, который на данный момент принимает label. Что вы можете сделать, так это сделать так, чтобы ваш виджет принимал два аргумента, и вы можете сделать это следующим образом: 

class ButtonForHome extends StatelessWidget {
  final String label;
  final int id;  // this will save your day

  // @required will not let user to skip the specified key to be left null
  ButtonForHome({@required this.label, @required this.id});

  @override
  Widget build(BuildContext context) {
    return Container(
       child: Center(
        child: RaisedButton(
            color: Colors.blue,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(18.0),
            ),
            child: Text(this.label),
            onPressed: () => print(this.id) // Here you print your id using your button only
        )
    );
  }
}

Теперь создайте кнопку со списком или добавите через список

  • Вы можете сделать это через ListView.builder()
  • Вы можете сделать это своим способом, т.е. List<Widget>.add()

Я покажу решение только на вашем пути: 

Widget getTextWidgets(List<String> strings){
  List<Widget> list = new List<Widget>();

  for(var i = 0; i < strings.length; i++){
    list.add(ButtonForHome(
      id: i, // passing the i value only, for clear int values
      label: strings[i]
    ));
  }

  return Column(children: list);
}

С новым флаттером вам не нужно делать new каждый раз при определении виджета. Теперь он понимает, поэтому нет необходимости в const, new

Итак, где бы вы ни заполняли свой getTextWidget, он будет отображать Widgte ButtonForHome, который имеет уникальный id и label. Теперь ButtonForHome печатает id того конкретного виджета, который был передан уникальным образом. Итак, теперь вы можете видеть, как происходит ваш результат.

Надеюсь, это то, что вы искали. Попробуйте и дайте мне знать.

1 голос
/ 17 июня 2020

Вы должны использовать Listview вместо Column

КОД ОБРАЗЦА 

 getTextWidgets() {
    return ListView.builder(
        itemCount: yourList.length,
        itemBuilder: (context, itemIndex) {
          return MaterialButton(
              child: Text(yourList[itemIndex]),
              onPressed: () {
                debugPrint('Clicked index $itemIndex');
              });
        });
  }

Теперь ваш вопрос

Я хочу ввести id в onPressed мероприятие. Как я могу реализовать во Flutter?

Вы можете создать такой класс POJO 

class DataModel{
  String name;
  int id;
  DataModel(this.name, this.id);
}

Теперь создайте список вашего класса POJO 

List<DataModel> list= List<DataModel>();

Теперь добавьте данные в свой список следующим образом: 

list.add(DataModel("name", 1));
list.add(DataModel("name", 2));
list.add(DataModel("name", 3));

Теперь вы можете использовать их таким образом 

 getTextWidgets() {
    return ListView.builder(
        itemCount: list.length,
        itemBuilder: (context, itemIndex) {
          return MaterialButton(
              child: Text(list[itemIndex].name),
              onPressed: () {
                debugPrint('Clicked item name '+list[itemIndex].name);
                debugPrint('Clicked item ID '+list[itemIndex].id.toString());
              });
        });
  }
...