单击时更改环绕的背景颜色

Question

我在 Wrap 下有一个 GestureDector，当我 select 一个时，我想将背景颜色从白色更改为橙色。我不知道要在 onTap 上添加什么来实现。你能帮忙吗？这是我的代码

        Wrap(
      children: [
        "Computer Science",
        "Engineering",
        "Kinesiology",
        "English Literature",
        "Finance",
        "Economics",
        "Physics",
        "Pre-med",
        "Biochemistry",
        "Football Game",
        "Fraternity"
      ]
          .map((f) => GestureDetector(
                child: Container(
                  padding: EdgeInsets.symmetric(
                      horizontal: 20.0, vertical: 10.0),
                  margin: EdgeInsets.only(
                      left: 5.0, right: 5.0, top: 10.0, bottom: 10.0),
                  decoration: BoxDecoration(
                    border:
                        Border.all(color: Color(0xFF282f61), width: 2.0),
                    borderRadius: BorderRadius.all(Radius.circular(
                            10.0) //                 <--- border radius here
                        ),
                  ),
                  child: Text(
                    f,
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 16.0,
                    ),
                  ),
                ),
                onTap: () {
                  setState(() {});
                },
              ))
          .toList(),
        
    ),

我确实在状态class的开头声明了 int _selectedIndex = -1;，但我不知道应该如何使用它。非常感谢。

Answer 1

您需要创建不同的小部件以使其表现不同。尝试如下：

   class CustomListView_frequentlyUsed extends StatefulWidget {
  @override
  State<CustomListView_frequentlyUsed> createState() =>
      _CustomListView_frequentlyUsedState();
}

class _CustomListView_frequentlyUsedState
    extends State<CustomListView_frequentlyUsed> {
 

 
  @override
  initState() {
    super.initState();
  }
 @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Wrap(
      children: [
        "Computer Science",
        "Engineering",
        "Kinesiology",
        "English Literature",
        "Finance",
        "Economics",
        "Physics",
        "Pre-med",
        "Biochemistry",
        "Football Game",
        "Fraternity"
      ]
          .map((f) =>CommonItems(f) )
          .toList(),
    ),));
  }
}

然后创建 CommonItems 如下：

    class CommonItems extends StatefulWidget {
  final String f;
  
  CommonItems(this.f);
  
  
  @override
  _CommonItemsState createState() => _CommonItemsState();
}

class _CommonItemsState extends State<CommonItems> {
  bool isClicked=false;
  
 @override
  Widget build(BuildContext context) {
    return GestureDetector(
                    child: Container(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 20.0, vertical: 10.0),
                      margin: const EdgeInsets.only(
                          left: 5.0, right: 5.0, top: 10.0, bottom: 10.0),
                      decoration: BoxDecoration(
                        color:isClicked?Colors.green: Colors.transparent,
                        border: Border.all(
                          color:isClicked?Colors.green: Color(0xFF282f61),
                          width: 2.0,
                      
                        ),
                        borderRadius:
                            const BorderRadius.all(Radius.circular(10.0) //
                                ),
                      ),
                      child: Text(
                        widget.f,
                        style: const TextStyle(
                          color: Colors.black,
                          fontSize: 16.0,
                        ),
                      ),
                    ),
                    onTap: () {
                      setState(() {
                        isClicked = !isClicked;
                      });
                    },
                  );
  }
}

单击时更改环绕的背景颜色

Change the background color of wrap when I click

flutter

gesturedetector