Удаленное изменение состояния виджета в списке
В настоящее время я работаю над GridView, который создает виджет Container для каждого элемента в списке.
new GridView.count(
crossAxisCount: 2,
childAspectRatio: 1.3,
children: cardSet.map((card){
Color containerColor = Colors.blue;
return new GestureDetector(
onTap: (){
setState(){
containerColor = Colors.green;
//This part is unsolved:
containerColor.of(matchingWidget) = Colors.green;
};
}
child: new Container(
color: containerColor,
),
);
}).toList()),
Итак, вот моя проблема: я хотел бы, чтобы пользователь находил совпадающие значения в GridView, и, поскольку каждый Container содержит одно значение, выбор двух значений с onTap приводит либо к совпадающим значениям, либо к несовпадающим значениям. В обоих случаях цвет двух выбранных виджетов Container должен измениться.
Изменить последний выбранный виджет Container легко, просто изменив свойство color с помощью setState(), но как мне изменить цвет ранее выбранного «подходящего» контейнера? Чтобы использовать изображение, как бы я одновременно изменил цвет контейнера «два» и «2» после того, как пользователь нажал на соответствующий контейнер «два»?
Использую ли я свойство key для хранения ссылки на «совпадающий» виджет или есть другая возможность?
@yahocho Я только что обновил фрагмент кода соответствующей частью, которую я хотел бы решить. В основном все сводится к изменению containerColor соответствующего контейнера (если совпадение действительно правильное, например, «2» и «два») одновременно с изменением цвета последнего нажатого контейнера.
Ответы 1
Я сделал class myCard как показано ниже:
class myCard {
String key;
Color color;
String match;
myCard( {
this.key,
this.color,
this.match
});
}
И создал список cardSet, как показано ниже:
class _MyHomePageState extends State<MyHomePage> {
var cardSet = [
myCard(key:"two", color:Colors.blue, match:"2"),
myCard(key:"3", color:Colors.blue, match:"three"),
myCard(key:"one", color:Colors.blue, match:"1"),
myCard(key:"2", color:Colors.blue, match:"two"),
myCard(key:"10", color:Colors.blue, match:"ten"),
myCard(key:"ten", color:Colors.blue, match:"10"),
myCard(key:"three", color:Colors.blue, match:"3"),
myCard(key:"1", color:Colors.blue, match:"one"),
];
Я думаю, вы можете сделать это в своем стиле. На самом деле, мы можем назвать myCard моделью.
И я сделал getMatchCard функцию обнаружения связанной карты.
myCard getMatchCard(card){
return cardSet.where((_card)=>_card.match==card.key).toList()[0];
}
Наконец, я установил цвет карты в setState по атрибутам myColor.
containerColor была локальной переменной, и ее данные нельзя было сохранить. Итак, я подумал, что нам нужны переменные-члены для хранения данных после создания всех GestureDetector.
child: new GridView.count(
crossAxisCount: 2,
childAspectRatio: 1.3,
children: cardSet.map((card){
return new GestureDetector(
onTap: (){
setState((){
card.color = Colors.green; // a color of Tapped card
getMatchCard(card).color = Colors.green; // a color of related card
});
},
child: new Container(
color: card.color,
child:Text(card.key) // I set the text in myself because I can not see your cardSet data.
),
);
}).toList()),
Вы знаете, Flutter выводит реактивное программирование. Итак, разделение model и view by state удобно.
Это работает хорошо. Пожалуйста, обратитесь к изображению, как показано ниже:
Оно работает! Большое спасибо за развернутое объяснение!
Не могли бы вы поделиться своим кодом больше?