Flutter - 自定义切换按钮选择

Question

我正在构建一行切换按钮（开/关选择器），它基本上是一行容器，每个容器都是一个类别并且是可点击的。

问：如何在选择一个类别时取消选择所有其他类别时做到这一点？

这是我构建的类别小部件：

Widget header(){
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Container(
        padding: EdgeInsets.only(top: 4.0, left: 0.0, right: 0.0, bottom: 6.0),
        child: Container(
          child: Center(
            child: Column(
              children: <Widget>[
                SizedBox(height: 4.0,),
                Container(
                  margin: EdgeInsets.only(left: 10.0, right: 10.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      InkWell(
                        splashColor: Colors.blue[100],
                        onTap: (){},
                        child: Container(
                          padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
                          decoration: BoxDecoration(
                            color: Colors.blueAccent[100],
                            borderRadius: BorderRadius.all(Radius.circular(48.0)),
                          ),
                          child: Text('All',
                          style: TextStyle(color: Colors.white, fontSize: 10.0, fontWeight: FontWeight.w500),),
                        ),
                      ),
                      SizedBox(width: 2.0,),
                      InkWell(
                        splashColor: Colors.blue[100],
                        onTap: (){},                        
                        child: Container(
                          padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
                          decoration: BoxDecoration(
                            color: Colors.grey[300],
                            borderRadius: BorderRadius.all(Radius.circular(48.0)),
                          ),
                          child: Text('category 1',
                          style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
                        ),
                      ),
                      SizedBox(width: 2.0,),
                      InkWell(
                        splashColor: Colors.blue[100],
                        onTap: (){},                        
                        child: Container(
                          padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
                          decoration: BoxDecoration(
                            color: Colors.grey[300],
                            borderRadius: BorderRadius.all(Radius.circular(48.0)),
                          ),
                          child: Text('category 2',
                          style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
                        ),
                      ),
                      SizedBox(width: 2.0,),
                      InkWell(
                        splashColor: Colors.blue[100],
                        onTap: (){},                        
                        child: Container(
                          padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
                          decoration: BoxDecoration(
                            color: Colors.grey[300],
                            borderRadius: BorderRadius.all(Radius.circular(48.0)),
                          ),
                          child: Text('category 3',
                          style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
                        ),
                      ),
                      SizedBox(width: 2.0,),
                      InkWell(
                        splashColor: Colors.blue[100],
                        onTap: (){},                        
                        child: Container(
                          padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
                          decoration: BoxDecoration(
                            color: Colors.grey[300],
                            borderRadius: BorderRadius.all(Radius.circular(48.0)),
                          ),
                          child: Text('category 4',
                          style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(height: 6.0,)
              ],
            ),
          ),
        ),
      ),
    ],
  );
}`

Answer 1

最好的方法是使用ListView.builder来构建您的项目并保存所选索引，但您也可以修改现有代码以将所选项目保存在列表中并检查该项目是否在列表中，然后添加选择格式并刷新页面。您可以实现如下所示，

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  List<String> selectedCategory = new List<String>();
  String all = 'All';
  String category1 = 'category 1';
  String category2 = 'category 2';
  String category3 = 'category 3';
  String category4 = 'category 4';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Test'),
            ),
            body: Container(
                padding: const EdgeInsets.all(20.0),
                child: header()
            )));
  }

  Widget header(){
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          padding: EdgeInsets.only(top: 4.0, left: 0.0, right: 0.0, bottom: 6.0),
          child: Container(
            child: Center(
              child: Column(
                children: <Widget>[
                  SizedBox(height: 4.0,),
                  Container(
                    margin: EdgeInsets.only(left: 10.0, right: 10.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        InkWell(
                          splashColor: Colors.blue[100],
                          onTap: (){
                            selectedCategory.add(all);
                            selectedCategory.add(category1);
                            selectedCategory.add(category2);
                            selectedCategory.add(category3);
                            selectedCategory.add(category4);
                            setState(() {});
                          },
                          child: Container(
                            padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
                            decoration: BoxDecoration(
                              color: selectedCategory.contains(all) ? Colors.blueAccent[100] : Colors.grey[500],
                              borderRadius: BorderRadius.all(Radius.circular(48.0)),
                            ),
                            child: Text('All',
                              style: TextStyle(color: Colors.white, fontSize: 10.0, fontWeight: FontWeight.w500),),
                          ),
                        ),
                        SizedBox(width: 2.0,),
                        InkWell(
                          splashColor: Colors.blue[100],
                          onTap: (){
                            selectedCategory = new List<String>();
                            selectedCategory.add(category1);
                            setState(() {});
                          },
                          child: Container(
                            padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
                            decoration: BoxDecoration(
                              color: selectedCategory.contains(category1) ? Colors.blue[100] : Colors.grey[300],
                              borderRadius: BorderRadius.all(Radius.circular(48.0)),
                            ),
                            child: Text('category 1',
                              style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
                          ),
                        ),
                        SizedBox(width: 2.0,),
                        InkWell(
                          splashColor: Colors.blue[100],
                          onTap: (){
                            selectedCategory = new List<String>();
                            selectedCategory.add(category2);
                            setState(() {});
                          },
                          child: Container(
                            padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
                            decoration: BoxDecoration(
                              color: selectedCategory.contains(category2) ? Colors.blue[100] : Colors.grey[300],
                              borderRadius: BorderRadius.all(Radius.circular(48.0)),
                            ),
                            child: Text('category 2',
                              style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
                          ),
                        ),
                        SizedBox(width: 2.0,),
                        InkWell(
                          splashColor: Colors.blue[100],
                          onTap: (){
                            selectedCategory = new List<String>();
                            selectedCategory.add(category3);
                            setState(() {});
                          },
                          child: Container(
                            padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
                            decoration: BoxDecoration(
                              color: selectedCategory.contains(category3) ? Colors.blue[100] : Colors.grey[300],
                              borderRadius: BorderRadius.all(Radius.circular(48.0)),
                            ),
                            child: Text('category 3',
                              style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
                          ),
                        ),
                        SizedBox(width: 2.0,),
                        InkWell(
                          splashColor: Colors.blue[100],
                          onTap: (){
                            selectedCategory = new List<String>();
                            selectedCategory.add(category4);
                            setState(() {});
                          },
                          child: Container(
                            padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
                            decoration: BoxDecoration(
                              color: selectedCategory.contains(category4) ? Colors.blue[100] : Colors.grey[300],
                              borderRadius: BorderRadius.all(Radius.circular(48.0)),
                            ),
                            child: Text('category 4',
                              style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height: 6.0,)
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

希望这可以帮助。