Flutter小功能实现——点击当前组件高亮，其他取消高亮

点击的组件高亮，其他不高亮。

组件

每个组件单独封装，结构为Container-Column-Text+Row
组件参数：title标题，totalNum课程数量，isActive是否高亮

页面

页面使用Grid视图渲染出两列布局，由于这里是滚动视图内部，结构为SliverPadding-SliverGrid-SliverChildBuilderDelegate-return GestureDetector-封装的组件

点击函数放置位置

• 为什么GestureDetector不封装在组件内部，而是渲染Grid时包裹复用组件？
  子组件内部不需要向父组件传参，只需要接受处理好的isActive。父页面设置一个参数activeIndex存储当前高亮的序号，判断activeIndex是否等于当前组件的index。

...
  /// 当前选中的课程标题，默认为0
  int activeIndex = 0;    // 页面为stf，写在build函数上方即可
...

 SliverPadding(
   padding: EdgeInsets.symmetric(horizontal: 12,vertical: 10),
   sliver: SliverGrid(
     gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
       crossAxisCount: 2,
       mainAxisSpacing: 10,
       crossAxisSpacing: 10,
       childAspectRatio: 3.3
     ),
     delegate: SliverChildBuilderDelegate(
         (BuildContext context,int index) {
           const activeList = [true,false,false,false,false,false];
           return GestureDetector(
           // 处理activeIndex
             onTap: (){
               setState(() {
                 activeIndex = index;
               });
               print('点击了页面标题：${activeIndex}');
             },
             child: GYMCourseTitleCardWidget(
               title: 'Osteoporosis Health Course', totalNum: '20', 
               isactive:activeIndex==index,   //这里直接处理isactive
             ),
           );
         },
       childCount: 6
     ),
   ),
 ),