#flutter #dart #flutter-layout
Вопрос:
Предположим, у меня есть список кнопок с повышенным уровнем.
Listlt;ElevatedButtongt; buttonsList = [];
Теперь я хочу использовать функцию onpress для этого списка.Например, если я нажму buttonList[i]
, то функция onpress будет работать только для buttonList[i]
всего списка, а не для всего списка. Например, я хочу изменить цвет третьей кнопки, тогда только третья кнопка изменит цвет, а не все кнопки списка.Есть идеи, как я могу это сделать?
Комментарии:
1. как вы добавляете товар
buttonsList
?2. Не было бы лучше иметь список свойств, которые генерируют список кнопок?
3. @YeasinSheikh Из пользовательского ввода. Пользователь вводит предложение ,я разбиваю слово предложения в списке и делаю кнопки из списка
4. @Шанс, что я абсолютно новичок в флаттере. Так что не знаю, как это сделать
5. Вы можете сохранить цвета
list
по индексу., или с помощью aMaplt;int, Colorgt;
, или с помощью amodel
, чтобы сохранить состояние цвета для каждой кнопки.
Ответ №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), )); }), ); } }