Как использовать функцию onPress в списке кнопок в flutter?

#flutter #dart #flutter-layout

Вопрос:

Предположим, у меня есть список кнопок с повышенным уровнем.

 Listlt;ElevatedButtongt; buttonsList = [];  

Теперь я хочу использовать функцию onpress для этого списка.Например, если я нажму buttonList[i] , то функция onpress будет работать только для buttonList[i] всего списка, а не для всего списка. Например, я хочу изменить цвет третьей кнопки, тогда только третья кнопка изменит цвет, а не все кнопки списка.Есть идеи, как я могу это сделать?

Комментарии:

1. как вы добавляете товар buttonsList ?

2. Не было бы лучше иметь список свойств, которые генерируют список кнопок?

3. @YeasinSheikh Из пользовательского ввода. Пользователь вводит предложение ,я разбиваю слово предложения в списке и делаю кнопки из списка

4. @Шанс, что я абсолютно новичок в флаттере. Так что не знаю, как это сделать

5. Вы можете сохранить цвета list по индексу., или с помощью a Maplt;int, Colorgt; , или с помощью a model , чтобы сохранить состояние цвета для каждой кнопки.

Ответ №1:

Лучше использовать значение, как сказал @Chance, но для любопытства протестируйте этот виджет.

 class _MyStatefulWidgetState extends Statelt;MyStatefulWidgetgt; {  Listlt;ElevatedButtongt; buttonsList = [];  int _currentItem = 0;   @override  Widget build(BuildContext context) {  return Scaffold(  body: Column(  children: [  //list of buttons  ...buttonsList.map((e) =gt; e),   //To create one  ElevatedButton(  onPressed: () {  setState(  () {  final value = _currentItem.toInt(); // creating new value , dont use `_currentItem` direclty, check pass by value vs reference  buttonsList.add(  ElevatedButton(  onPressed: () {  print("Tapped item $value");  },  child: Text("item $value"),  ),  );   _currentItem  ;  },  );  },  child: Text("add ${_currentItem   1}"),  )  ],  ));  } }   

Ответ №2:

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

 class ButtonProperties {  String label;  Color color;  bool selected;   ButtonProperties(  {required this.label, this.color = Colors.black, this.selected = false}); }  class MyButtonList extends StatefulWidget {  const MyButtonList({Key? key}) : super(key: key);   @override  _MyButtonListState createState() =gt; _MyButtonListState(); }  class _MyButtonListState extends Statelt;MyButtonListgt; {  Listlt;ButtonPropertiesgt; buttonsList = [  ButtonProperties(label: 'Button 1'),  ButtonProperties(label: 'Button 2'),  ButtonProperties(label: 'Button 3'),  ButtonProperties(label: 'Button 4'),  ButtonProperties(label: 'Button 5'),  ButtonProperties(label: 'Button 6'),  ButtonProperties(label: 'Button 7'),  ButtonProperties(label: 'Button 8'),  ButtonProperties(label: 'Button 9'),  ];   void _onChangeButtonColor(int index) {  setState(() {  if (buttonsList[index].selected) {  buttonsList[index].selected = false;  buttonsList[index].color = Colors.black;  } else {  buttonsList[index].selected = true;  buttonsList[index].color = Colors.red;  }  });  }   @override  Widget build(BuildContext context) {  return Scaffold(  appBar: AppBar(title: Text('Button List')),  body: ListView.builder(  padding: const EdgeInsets.all(15),  itemCount: buttonsList.length,  itemBuilder: (context, index) {  return ElevatedButton(  onPressed: () =gt; _onChangeButtonColor(index),  child: Text(  '${buttonsList[index].label}',  style: TextStyle(color: buttonsList[index].color),  ));  }),  );  } }