Flutter之交互事件

1、点击事件标准案例

1.1、效果图

在这里插入图片描述

2.1、代码实现

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

class FavoriteWidget extends StatefulWidget {
    
    
  const FavoriteWidget({
    
    super.key});

  
  State<FavoriteWidget> createState() => _FavoriteWidgetState();
}
class _FavoriteWidgetState extends State<FavoriteWidget> {
    
    
 bool _isFavorited = true;
 int _favoriteCount = 41;
 
  
  Widget build(BuildContext context) {
    
    
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          padding: const EdgeInsets.all(0),
          child: IconButton(
            padding: const EdgeInsets.all(0),
            alignment: Alignment.center,
            icon:
                (_isFavorited
                    ? const Icon(Icons.star)
                    : const Icon(Icons.star_border)),
            color: Colors.red[500],
            onPressed: _toggleFavorite,
          ),
        ),
        SizedBox(width: 18, child: SizedBox(child: Text('$_favoriteCount'))),
      ],
    );
  }

 void _toggleFavorite() {
    
    
  setState(() {
    
    
    if (_isFavorited) {
    
    
      _favoriteCount -= 1;
      _isFavorited = false;
    } else {
    
    
      _favoriteCount += 1;
      _isFavorited = true;
    }
  });
}
}

在这里插入图片描述

这个就是在主widget 树中使用自定义的widget组件去展示。

待完善。。。。。。