окраска контейнеров с помощью вкладок с трепетом - PullRequest
Новая
       12

окраска контейнеров с помощью вкладок с трепетом

0 голосов
/ 15 февраля 2020

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

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),
        ),
      ),
    );
  }
}

1 Ответ

0 голосов
/ 15 февраля 2020

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

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});
}

enter image description here

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

...