【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 开发工具里。本来都是开发工具,直接给我的用户整一套开发工具链条得了

~~~期待期待!!!

相关推荐
SoaringHeart11 分钟前
Flutter小技巧:IM音浪效果实现
前端·flutter
Rockson24 分钟前
如何使用 JavaScript 接入实时行情 API
javascript·python·api
友莘居士2 小时前
本地使用postman调试mcp接口
测试工具·postman·sse·mcp
Bryce李小白12 小时前
Flutter中实现页面跳转功能
flutter
RaidenLiu21 小时前
Flutter 多环境配置:flavor
前端·flutter
忆江南21 小时前
Widget 、 Element 和 RenderObject 关系
flutter
程序员老刘1 天前
“工信部要求9月30日前APP必须100%适配鸿蒙“ 是真的吗?
flutter·harmonyos
亿刀1 天前
WireGuard通讯原理
android·flutter
蓝倾1 天前
淘宝拍立淘(以图搜图)API接口调用流程指南
前端·api·fastapi
勤劳打代码1 天前
曲径通幽 —— Android 息屏 TCP 连接管理
android·tcp/ip·flutter