Freadhub Mac版它来了

~~相关文章一：用Flutter给Readhub写一个App~~

相关文章二：Flutter版本Readhub开源

相关文章三：Flutter iOS真机调试及打包过程记录

相关文章四：Flutter iOS打包过程及构建上线审核通过流程总结

相关文章五：Freadhub终于升级Flutter2.0了

相关文章六：Freadhub Mac版它来了

前言

Freadhub是由AriesHoo开发维护的一个Flutter开源项目--readhub的非官方产品。

之前Freadhub已有Androd、iOS版本,随着Flutter2.0的发布Flutter进入了全平台stable时代, 经过一段时间的平台及屏幕适配，MacOS版本它终于来了说得好像有人在期待一样。

镇楼图 1024*768 默认尺寸

image

Fredhub	链接
开源 Github	flutter_readhub
开源 Gitee	flutter_readhub
Android	Freadhub
iOS	clone自行运行或邮箱给下设备UUID
MacOS	Gitee下载共享盘下载

下载了 MacOS的压缩包解压后点击图标打开。

点击打开

出现 来自身份不明的开发者提示。依次系统偏好设置->安全性与隐私->通用中解锁并允许应用安装即可。

解锁运行

打开

Mac版本准备工作

1、获取MacOS代码

本着Flutter-Write Once Run Anywhere的原则,MacOS版本也在master分支未开新分支。

有原始版本代码只需Update一下，然后flutter pub get一下即可。
没有原始代码则可在Github或Gitee上 clone一下，然后flutter pub get一下即可。

2、开启MacOS支持

目前Flutter 2.0 Stable已支持MacOS,只需开启下MacOS支持即可。

环境：Flutter SDK Flutter stable 2.0+
开启MacOS支持：flutter config --enable-macos-desktop
创建MacOS环境配置:flutter create --platforms=macos .

 % flutter --version
Flutter 2.2.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b22742018b (12 days ago) • 2021-05-14 19:12:57 -0700
Engine • revision a9d88a4d18
Tools • Dart 2.13.0

% flutter config --enable-macos-desktop
Setting "enable-macos-desktop" value to "true".

  % flutter create --platforms=macos .
Recreating project ....
  flutter_readhub_github.iml (created)
  macos/Runner.xcworkspace/contents.xcworkspacedata (created)
  macos/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  macos/Flutter/Flutter-Debug.xcconfig (created)
  macos/Flutter/Flutter-Release.xcconfig (created)
  .idea/runConfigurations/main_dart.xml (created)
  .idea/libraries/KotlinJavaRuntime.xml (created)
Running "flutter pub get" in flutter_readhub_github...           1,078ms
Wrote 7 files.

All done!

3、基础配置-icon、name、网络等

准备MacOS需要的各种尺寸icon，推荐使用 Image Asset Icon Resizer Lite 可以裁剪出各种尺寸的icon、launch image --包括Android、iOS、MacOS等。

生成icon

将生成的icon资源及配置文件拷贝到对应文件夹即可

macos icon配置

这里推荐文件名保持和Flutter默认生成的一致，可在Image Asset Icon Resizer Lite设置。如下图：

设置导出flieName

设置App 信息：依次进入macos->Runner->Configs文件夹打开AppInfo.xcconfig编辑PRODUCT_NAME值，该值决定了App窗口标题名和程序坞鼠标悬浮提示文字以及关于页面信息；PRODUCT_COPYRIGHT决定了关于页面版权声明信息。如下图：

AppInfo.xcconfig

程序坞

关于信息

网络配置：因涉及请求接口需在macos->Runner文件夹下的DebugProfile.entitlements及Release.entitlements文件添加以下配置

    com.apple.security.network.server
    
    com.apple.security.network.client

网络配置

4、运行与打包

执行命令：flutter run -d macos 或直接通过 Android Studio选择macOS(desktop)运行

 % flutter run -d macos
Launching lib/main.dart on macOS in debug mode...
Running pod install...                                           1,956ms

Android Studio运行

执行命令：flutter build macos --release等待执行完成即可

% flutter build macos --release

 Building with sound null safety 

Running pod install...                                           1,709ms

执行完成后，在build->macos->Build->Products->Release文件夹里可看到打包后的应用，直接双击打开即可。

打包后的app

Freadhub MacOS功能简介

1、主界面布局

桌面端尺寸相较移动端更大如果采用移动端的底部/顶部tab模式会很丑，故在做MacOS适配过程中顺手做了下响应式布局--这里不做展开后期会单开文章阐述。
使用GridView来让屏幕展示更多可用信息
左侧顶部导航栏、底部为今日诗词推荐--使用今日诗词,在此感谢、最底部仍然为更多信息及深色/浅色主题切换按钮

宽屏：1280*800 最大尺寸

宽屏最大尺寸

窄屏：480*640 最小尺寸

窄屏

这里设置widow 窗口大小用到了desktop_window插件-支持MacOS、Windows、Linux；Freadhub 设置默认尺寸1024*768、最小尺寸480*640、最大尺寸1280*800。

2、今日诗词

因屏幕尺寸过大，左侧导航栏部分只有导航tab功能会显得很空故在tab底部增加今日诗词功能
为保持适配一致性和美观性：宽屏模式显示诗词内容+匹配标签+切歌三部分内容；窄屏模式只显示诗词内容。--当然这里的美观性是个见仁见智的事情，大家轻喷。
增加tooltip功能当鼠标悬浮或手指长按则显示更多信息 诗词标题+朝代作者+诗词全文+诗词翻译(如果有)

今日诗词tooltip

3、更多信息

布局样式和移动端一致--开源地址显示了Github与Gitee
分享功能与移动端有差异--移动端弹出卡片分享移动端蒲公英下载链接；桌面端的跳转网页显示apk及macOS压缩包分享页面

更多信息

下载分享页面

4、资讯卡片

资讯卡片背景样式优化-增加边框线区分不同资讯、鼠标悬浮/手指按下边界线及背景变为主题相关色

悬浮边框色变化

修改点击事件-将原来点击事件资讯摘要信息全部展示变更为打开查看资讯详情、热门话题详情直接跳转readhub网页详情

查看详情

该功能使用到了flutter_macos_webview插件

去掉热门话题相关推荐icon变更为分享icon-原长按弹出分享卡片不变

该功能使用到了share_plus插件

5、其它功能

啥也不说了，都在代码里了， Github、 Gitee。欢迎拍砖 扔鸡蛋。

总结

1、就着这次适配MacOS过程，鄙人感觉Flutter确实很香！在UI层面确实在各个平台上的复用率在90%以上。但是确实需要根据不同的平台特性做调整：如在桌面系统使用移动端的顶部/底部导航就很别扭。

2、平台相关插件除开移动端的其它平台确实要走的路还很漫长。--所以未来会有插件工程师这个专门工种？

3、桌面系统能多窗口就更好了。--Android是单Activity的模式的，iOS也是类似的。这种模式在移动端的没啥问题，毕竟设备就那么大点。但是桌面系统普遍较大,所有页面跳转都在同一个窗口就感觉差点意思。也许是支持的只是我不知道？--有知道的大佬万望不吝赐教，感谢！

4、Flutter仍然是未来跨平台的最佳选择 没有之一

结语

该App为笔者学习Flutter练手开发的，权当抛砖引玉了，万望各位不吝赐教

关于我

掘金: AriesHoo

: AriesHoo

GitHub: AriesHoo

Email: [email protected]