раскрашивание контейнеров табуляцией с флаттером

У меня есть столбец со многими ((Tabbed)) элементами, когда я нажимаю на один из них, он должен быть цветным, а другие прозрачными, а вот мой класс с вкладками это изображение для того, что у меня есть сейчас с моим кодом

class Tabbed extends StatefulWidget {
  @override
  _TabbedState createState() => _TabbedState();
}

class _TabbedState extends State<Tabbed> {
  Color color = Colors.transparent;
  @override
  void initState() {
    color = Colors.transparent;
  }
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        print("tab");
        if (color == Colors.transparent){
          setState(() {
            color = Colors.purple;
          });
        }
        else{
          setState(() {
            color = Colors.transparent;
          });
        }
      },
      child: Container(
        height: 100,
        width: 100,
        decoration: BoxDecoration(
          color: color,
          border: Border.all(color: Colors.red,width: 1),
        ),
      ),
    );
  }
}

person Husamuldeen    schedule 15.02.2020    source источник
comment
проверьте этот ответ stackoverflow.com/ questions / 57910554 /   -  person John Joe    schedule 15.02.2020


Ответы (1)


вы можете просто попробовать создать модель для своих ящиков и иметь свойство boolean и сохранить статус каждого ящика в списке, чтобы знать, касался ли ящик или нет, вы также можете указать список логических значений, но я предпочитаю создавать список модель, так как это позволит вам добавить дополнительные свойства, я немного изменил ваш код, вы можете увидеть, как он работает здесь, на dartpad также

class Tabbed extends StatefulWidget {
  @override
  _TabbedState createState() => _TabbedState();
}

class _TabbedState extends State<Tabbed> {
  Color color = Colors.green; 
  @override
  void initState() {
    for(int i=0;i<listLength;i++){
      list1.add(
      TabModel(isTapped: false)); // assigns initial value to false
    }
    for(int i=0;i<listLength;i++){
      list2.add(
      TabModel(isTapped: false)); // assigns initial value to false
    }
  }

  Widget column1(){
    return Column(
    children: List.generate(
          listLength,
          (index) =>GestureDetector(
          onTap: (){
            // this selects only one out of many and disables rest
            for(int i=0;i<list1.length;i++){
              if(i!=index){
                list1[i].isTapped=false;
              }
            };
            setState((){
              list1[index].isTapped = true;
            });
          },
          child:Container(
            margin:EdgeInsets.all(5),
            color: list1[index].isTapped? Colors.red:color,
          height:100,
          width:100
          ))
        ));
  }

  Widget column2(){
    return Column(
    children: List.generate(
          listLength,
          (index) =>GestureDetector(
          onTap: (){
            setState((){
              list2[index].isTapped = !list2[index].isTapped;
            });
          },
          child:Container(
            margin:EdgeInsets.all(5),
            color: list2[index].isTapped? Colors.red:color,
          height:100,
          width:100
          ))
        ));
  }

 List<TabModel> list1 =[]; 
 List<TabModel> list2 =[]; 

  int listLength=5;
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      column1(),
      column2()
    ],);
  }
}
class TabModel{
   bool isTapped = false;
  TabModel({this.isTapped});
}

введите здесь описание изображения

если это не то, что вы хотите, или если вы столкнулись с какой-либо проблемой с пониманием какой-либо части кода, не стесняйтесь оставить комментарий, который я хотел бы помочь, вывод bwlow показывает два независимых столбца в coumn1, вы можете выбрать один из многих полей и в другое вы можете выбрать несколько полей

person Mahesh Jamdade    schedule 15.02.2020
comment
Я попробовал код, но он не сработал, у него все еще та же проблема, вы можете щелкнуть много элементов одновременно, у меня горизонтальный вид списка, каждый элемент представляет собой список контейнеров, 7 горизонтальных * 4 вертикальных виджета с вкладками , пользователь должен вкладывать только один элемент, при щелчке по другому элементу первый автоматически отключается. - person Husamuldeen; 16.02.2020
comment
Можете ли вы опубликовать изображение вашего макета - person Mahesh Jamdade; 16.02.2020
comment
Вы проверили это dartpad.dev/132db523c9369a265d2614f8908693bb - person Mahesh Jamdade; 16.02.2020
comment
Я думаю, что мой ответ решает вашу проблему, просто вам нужно разработать коробки в соответствии с вашими требованиями, и если вы используете приведенный выше код, он выберет поле, которое пользователь нажимает, а остальные будут отключены - person Mahesh Jamdade; 16.02.2020
comment
Ошибка компиляции в JavaScript в dartPad, что это должно означать? - person Husamuldeen; 16.02.2020
comment
Я не знаю, в чем проблема, я все еще могу его запустить, я все равно изменю код и перезагружу его - person Mahesh Jamdade; 16.02.2020
comment
Я обновил ответ двумя столбцами, надеюсь, что один из столбцов выше решит вашу проблему, также не забудьте проверить ссылку на дартпад - person Mahesh Jamdade; 16.02.2020
comment
это работает для одного столбца, но мне это нужно для Horizontal listview.builder, это должен быть массив размеров 7 * 5 - person Husamuldeen; 17.02.2020
comment
вы можете либо создать отдельный массив для строки / столбца, либо 2d-массив поможет вам написать настраиваемую логику, чтобы увидеть, какой из них выбран среди всех, это должно быть довольно легко, если вы понимаете приведенный выше пример - person Mahesh Jamdade; 18.02.2020
comment
не могли бы вы взглянуть на этот вопрос, пожалуйста? stackoverflow.com/questions/60277469/ - person Husamuldeen; 27.02.2020
comment
@Husamuldeen заметил, что это очень похоже, если вы все равно увидите исходный код, я отвечу на него - person Mahesh Jamdade; 27.02.2020
comment
в этом вопросе это только один столбец, в другом вопросе это представление страницы, содержащее представление списка, у меня много ошибок с этим примерно через месяц, все приложения останавливаются на этой проблеме, если вы можете помочь мне с командой просмотра, я будьте благодарны. - person Husamuldeen; 29.02.2020