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

Question

我在 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"
  ),

];

Answer 1

任何时候更改 UI 中显示的变量，都必须在 setState 方法中进行设置。

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

Answer 2

try this solution

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

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

Flutter: Color is Not Changing using Switch statement

widget

dart

flutter