【Flutter&Dart】交互~创建一个有状态的widget &StatefulWidget(2/100)

上效果:

上代码:

dart 复制代码
import 'package:flutter/material.dart';

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

  @override
  createState() => _FavoriteWidgetState();
}

class _FavoriteWidgetState extends State<FavoriteWidget> {
  bool _isFavorited = true;
  int _favoriteCount = 41;

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

  @override
  Widget build(BuildContext context) {
    return Row(mainAxisSize: MainAxisSize.min, children: [
      Container(
        padding: EdgeInsets.all(0.0),
        child: IconButton(
          onPressed: _toggleFavorite,
          icon: (_isFavorited ? Icon(Icons.star) : Icon(Icons.star_border)),
          color: Colors.red[500],
        ),
      ),
      SizedBox(width: 20.0, child: Text('$_favoriteCount'))
    ]);
  }
}

替换上一篇里《【Flutter&Dart】构建布局(1/100)》这段代码就可以了

替换的局部代码如下:

dart 复制代码
Text(
                'Kandersteg, Switzerland',
                style: TextStyle(
                  color: Colors.grey[500],
                ),
              )
            ],
          )),
          FavoriteWidget()
        ],
      ),
    );

还差一个导入:import 'MyStatefulWidget.dart';

把静态布局效果变成了可交互的点击的有状态模式了。

写到这里突然觉得 flutter 开发非常丝滑,先进行无状态的布局,然后一点一点替换为有状态的交互。再加上热重载技术的刷新快速展示效果。

底层理论使用 flutter 里 都是widget 组合方式,从无状态替换有状态很容易。

突然有个设想,如果 UI 设计的静态界面直接就被转换成 flutter 无状态布局代码,那开发工作量至少能减轻 30% 以上 ;另外由于 flutter 是跨平台的,所以理论上可以使用 flutter 再进行转换为 Android、iOS、web、macOS、Linux 等静态界面布局代码。想到这里,觉得 UI 设计的春天也很近了蛤!!!不过开发工程量估计也不会小

我想到的,估计也有人想到了。哪位大佬发现类似的工具或者开源项目请留言回复一下,感谢感谢🙏

============================END

另外分享记录一个录制 GIF 的小工具,用来录制博客的交互效果还不错

LICEcap

Source code

git clone https://www-dev.cockos.com/licecap/licecap.git

Official GitHub mirror: github.com/justinfrankel/licecap

如果 smartApi 开发顺利,我打算把这些友好的工具也集成或者以其他形式组装到 smartAPI 开发工具里。本来都是开发工具,直接给我的用户整一套开发工具链条得了

~~~期待期待!!!

相关推荐
哲科软件5 小时前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
天涯海风5 小时前
Kuikly 与 Flutter 的全面对比分析,结合技术架构、性能、开发体验等核心维度
flutter·kuikly
aiprtem5 小时前
基于Flutter的web登录设计
前端·flutter
coder_pig9 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
程序员老刘11 小时前
Android 16开发者全解读
android·flutter·客户端
Jalor12 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
吴Wu涛涛涛涛涛Tao14 小时前
一步到位:用 Very Good CLI × Bloc × go_router 打好 Flutter 工程地基
flutter·ios
九丝城主14 小时前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--中篇
服务器·flutter·macos·vmware
ITfeib15 小时前
Flutter
开发语言·javascript·flutter
昱禹15 小时前
Flutter 3.29+使用isar构建失败
大数据·flutter