Question

我是新来扑在这里，我想选择所有的方盒子，当选择一个瓷砖它改变它的背景颜色为redAccent下面给出的是ListTile的单一选择的代码，但我需要多选码在这里我可以选择所有三个ListTile或两个ListTile，而不仅仅是一个

class MultiSelect extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: GradientAppBar(
        title: Text('MultiSelect'),
      ),
      body: MultipleSelectItems(),
    );
  }
}

class MultipleSelectItems extends StatefulWidget {
  @override
  _MultipleSelectItemsState createState() => _MultipleSelectItemsState();
}

class _MultipleSelectItemsState extends State<MultipleSelectItems> {
  String selected = "First";
  
  @override
  Widget build(BuildContext context) {
    return Container(
      child: GestureDetector(
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 40,
            ),
            GestureDetector(
              onTap: () {
                setState(() {
                  selected = "First";
                });
              },
              child: Container(
                margin: EdgeInsets.only(left: 15, right: 15),
                height:100,
                width: double.maxFinite,
                decoration: BoxDecoration(
                  color: selected == 'First' ? Colors.redAccent : Colors.lightBlueAccent,
                ),
                child: ListTile(
                  title: Text(
                    'First',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 20,
                      fontFamily: 'WorksSansSemiBold',
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
            Padding(padding: EdgeInsets.only(top: 20)),
             GestureDetector(
              onTap: () {
                setState(() {
                  selected = "Second";
                });
              },
              child: Container(
                margin: EdgeInsets.only(left: 15, right: 15),
                height:100,
                width: double.maxFinite,
                decoration: BoxDecoration(
                  color: selected == 'Second' ? Colors.redAccent : Colors.lightBlueAccent,
                ),
                child: ListTile(
                  title: Text(
                    'Second',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 20,
                      fontFamily: 'WorksSansSemiBold',
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
            Padding(padding: EdgeInsets.only(top: 20)),
             GestureDetector(
              onTap: () {
                setState(() {
                  selected = "Third";
                });
              },
              child: Container(
                margin: EdgeInsets.only(left: 15, right: 15),
                height:100,
                width: double.maxFinite,
                decoration: BoxDecoration(
                  color: selected == 'Third' ? Colors.redAccent : Colors.lightBlueAccent,
                ),
                child: ListTile(
                  title: Text(
                    'Third',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 20,
                      fontFamily: 'WorksSansSemiBold',
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
              
            SizedBox(
              height: 40,
            ),
            MaterialButton(
              child: Text("Submit"),
              color: Colors.blueGrey,
              textColor: Colors.white,
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

首先，欢迎使用StackOverFlow和flutter社区。由于您不想toggle，而是to select multiple items，因此我接受了此要求。这是解决方案，您可以遵循并完成任务：）

说明：在混乱中，为按钮创建不同的StatefulWidget对于每个按钮以及选择按钮都是唯一的。按下每个按钮将仅具有唯一信息。我知道这有点令人困惑，但是请遵循此步骤，您将了解

class MultipleSelectItems extends StatefulWidget {
  @override
  _MultipleSelectItemsState createState() => _MultipleSelectItemsState();
}

class _MultipleSelectItemsState extends State<MultipleSelectItems> {
  
  // This is responsible to crate your buttons 
  // Every button is created will be having it's unique instance only
  // Means, if you hit one button, it won't effect another, and you can select
  // multiple
  // And you don't have to declare your buttons multiple times in the code
  // Which is indeed bad way of coding :)
  List<Widget> get listTileWidgets{
     List<Widget> _widget = [SizedBox(height: 40.0)];
     List<String> _buttonName = ['First', 'Second', 'Third', 'Fourth'];
     
     // ListTileWidget is defined below in another StatefulWidget
     _buttonName.forEach((name){
         _widget.add(ListTileWidget(name: name));
         _widget.add(SizedBox(height: 20.0));
     });

     return _widget;
  }
  
  @override
  Widget build(BuildContext context) {
     return Material(
       child: Container(
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: this.listTileWidgets
          )
       )
     );
  }
}


// This will accept name of the button which will be used to be given
// plus maintaining the uniqueness
class ListTileWidget extends StatefulWidget{
    final String name;

    ListTileWidget({Key key, this.name}):super(key:key);
    
    @override
    ListTileWidgetState createState() => ListTileWidgetState();
}

class ListTileWidgetState extends State<ListTileWidget>{
    bool isTapped = false;

    @override
    Widget build(BuildContext context){
        return GestureDetector(
            onTap: () {
               setState(() => isTapped = true);
            },
            child: Container(
                margin: EdgeInsets.only(left: 15, right: 15),
                height:100,
                color: isTapped ? Colors.redAccent : Colors.lightBlueAccent,
                width: double.maxFinite,
                child: ListTile(
                    title: Text(
                        widget.name,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontSize: 20,
                            fontFamily: 'WorksSansSemiBold',
                            fontWeight: FontWeight.bold,
                        )
                    )
                )
            )
        );
    }
}

您将获得的结果如下：

希望可以帮助您学习一些独特的东西：)直到快乐的编码。

很抱歉，我没有添加您的Submit按钮。因此，为了使该内容在您的代码中可见，只需将其添加到您的Column中，您就可以开始使用

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
     this.listTileWidgets,
     SizedBox(height: 40),
     MaterialButton(
       child: Text("Submit"),
       color: Colors.blueGrey,
       textColor: Colors.white,
       onPressed: () {},
     )
  ]
)

现在差不多了。如有任何疑问，请随时提出。如果这对您有帮助，请对其进行标记，以使学习者可以从中学到一些东西。在StackOverFlow中，我们 [如果您不熟悉StackOverFlow] ：）

Answer 2

我有你的答案。将字符串变量更改为数组可以完成您想要的工作。然后，通过检查数组中是否是“第一”或“第二”或“第三”，我们可以确定ListTile应该是什么颜色。同样，在点击ListTile时，我们需要检查数组是否包含该字符串，以确定是否要从数组中删除字符串（也就是将颜色更改为蓝色），或者是否需要将字符串添加到数组中（也就是将颜色变为红色）。下面，我将所有这些更改包括到您的课程中。希望这个答案有帮助！如有疑问请发表评论

class MultipleSelectItems extends StatefulWidget {
  @override
  _MultipleSelectItemsState createState() => _MultipleSelectItemsState();
}

class _MultipleSelectItemsState extends State<MultipleSelectItems> {
  var theSelected = ["First"];
  
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        child: GestureDetector(
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 40,
              ),
              GestureDetector(
                onTap: () {
                  setState(() {
                    if(theSelected.contains("First")) {
                      theSelected.remove("First");
                    }
                    else {
                      theSelected.add("First");
                    }
                  });
                },
                child: Container(
                  margin: EdgeInsets.only(left: 15, right: 15),
                  height: 100,
                  width: double.maxFinite,
                  decoration: BoxDecoration(
                    color: theSelected.contains('First') ? Colors.redAccent : Colors.lightBlueAccent,
                  ),
                  child: ListTile(
                    title: Text(
                      'First',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 20,
                        fontFamily: 'WorksSansSemiBold',
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
              Padding(padding: EdgeInsets.only(top: 20)),
               GestureDetector(
                onTap: () {
                  setState(() {
                    if(theSelected.contains("Second")) {
                      theSelected.remove("Second");
                    }
                    else {
                      theSelected.add("Second");
                    }
                  });
                },
                child: Container(
                  margin: EdgeInsets.only(left: 15, right: 15),
                  height:100,
                  width: double.maxFinite,
                  decoration: BoxDecoration(
                    color: theSelected.contains('Second') ? Colors.redAccent : Colors.lightBlueAccent,
                  ),
                  child: ListTile(
                    title: Text(
                      'Second',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 20,
                        fontFamily: 'WorksSansSemiBold',
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
              Padding(padding: EdgeInsets.only(top: 20)),
               GestureDetector(
                onTap: () {
                  setState(() {
                    if(theSelected.contains("Third")) {
                      theSelected.remove("Third");
                    }
                    else {
                      theSelected.add("Third");
                    }
                  });
                },
                child: Container(
                  margin: EdgeInsets.only(left: 15, right: 15),
                  height:100,
                  width: double.maxFinite,
                  decoration: BoxDecoration(
                    color: theSelected.contains("Third") ? Colors.redAccent : Colors.lightBlueAccent,
                  ),
                  child: ListTile(
                    title: Text(
                      'Third',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 20,
                        fontFamily: 'WorksSansSemiBold',
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
                
              SizedBox(
                height: 40,
              ),
              MaterialButton(
                child: Text("Submit"),
                color: Colors.blueGrey,
                textColor: Colors.white,
                onPressed: () {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}

多重选择ListTile

2 个答案: