Flutter：使用 Switch 语句时颜色没有改变答案

【问题标题】：Flutter: Color is Not Changing using Switch statementFlutter：使用 Switch 语句时颜色没有改变
【发布时间】：2020-06-28 12:53:02
【问题描述】：

我在 ListView.builder 中有一行容器，按下时应该会改变容器背景的颜色。我使用 switch 语句来改变颜色取决于 isSelected 与否。

问题是当我按下容器时颜色没有改变，即使打印显示我按下了正确的容器。

         ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: categoryData.length,
            itemBuilder: (context,index){

         bool isSelected = false;
         return GestureDetector(
                onTap: (){
                  switch(index){
                    case 0 :
                      isSelected = true;
                      break;
                    case 1 :
                      isSelected = true;
                  }
                      print(category[index].name + index.toString());
                },
                child: Row(
                  children: <Widget>[
                    Column(
                      children: <Widget>[
                        Container(
                          width: 68,
                          height: 68,
                          decoration: BoxDecoration(
                            color: isSelected ? Colors.white: Colors.transparent,
                            borderRadius: BorderRadius.circular(16),
                            border: Border.all(
                              color: Colors.white,
                              width: 1,
                            ),
                            boxShadow: isSelected
                            ?[
                              BoxShadow(
                                color: Color(0x14000000),
                                blurRadius: 10
                              )
                            ]: null
                          ),

这是我正在使用的类别列表：

class list {
  final String name;
  final String count;
  final String imageUrl;

  list({this.imageUrl, this.name, this.count});
}

List<list> category = [
  new list(
    imageUrl:   "assets/tops.png",
    name: "TOPS",
    count: "5"
  ),
  new list(
    imageUrl:   "assets/fashion.png",
    name: "Pants",
    count: "5"
  ),
  new list(
    imageUrl:   "assets/dress.png",
    name: "DRESSES",
    count: "4"
  ),
  new list(
    imageUrl:   "assets/coat.png",
    name: "COATS",
    count: "4"
  ),
  new list(
    imageUrl:   "assets/suits.png",
    name: "SUITS",
    count: "4"
  ),

];

【问题讨论】：

你可以添加示例 json 数据，以便我可以给你这个例子。
@SagarAcharya 我添加了我正在使用的列表
只需查看我添加的代码，如果您有任何问题，请告知。

标签： flutter dart widget

【解决方案1】：

试试这个解决方案

class checking extends StatefulWidget {
  @override
  _checkingState createState() => _checkingState();
}

class _checkingState extends State<checking> {

  List<String>categoryData=['abc','xyz','xyz'];
  int _selectedIndex = 0;

  _onSelected(int index) {
    print(index);
    setState(() =>
    _selectedIndex = index

    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        height: 200,
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: categoryData.length,
            itemBuilder: (context,index){

              return GestureDetector(
                  onTap: () => _onSelected(index),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      width: 68,
                      height: 68,
                      decoration: BoxDecoration(
                          color: _selectedIndex != null && _selectedIndex == index ? Colors.black : Colors.grey,
                          borderRadius: BorderRadius.circular(16),
                          border: Border.all(
                            color: Colors.blue,
                            width: 1,
                          ),
                      ),
                    ),
                  )
              );
            }
                  ),
      ),
    );
  }
}

【讨论】：

它起作用了，但是所有项目的颜色都发生了变化，而不仅仅是所选项目

【解决方案2】：

每当您更改 UI 中显示的变量时，都必须在 setState 方法中进行设置。

setState(() { isSelected = true; });

【讨论】：

我是这样做的，但它也不起作用：switch(index){ case 0 : setState(() { isSelected = true; });