通过使用 flutter 进行制表来为容器着色

Question

我有很多（（Tabbed））项目的列，当我在其中一个上切换时，它应该是彩色的，而其他的是透明的，这是我的 Tabbed classthis image for what I have now with my code

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

Answer 1

你可以简单地尝试为你的盒子创建一个模型并有一个 boolean 属性并将每个盒子的状态存储在列表中以了解盒子是否被点击，你可以也喜欢布尔值列表，但我更喜欢创建模型列表，因为它允许您添加更多属性，我已经稍微修改了您的代码，您可以看到它也可以工作 here on 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 中显示两个独立的列，您可以 select 多个框中的一个，而在其他框中您可以 select 多个框

通过使用 flutter 进行制表来为容器着色

coloring containers by tabbing with flutter

containers

colors

tabbed

dart

flutter