Flutter仿网易云音乐 ---基础准备

源码地址：https://gitee.com/admin_327355/music

资源、工具准备

1.接口：网易云音乐 NodeJS 版 API
2.UI：Android apk通过压缩文件解压后获取图标，客户端截图，然后通过PxCook软件对截图标注和取色。
3.widget文档：通过 Flutter中文网查看Widgets目录，通过老孟博客查看widget具体的使用方法。

项目准备

屏幕适配

我在Flutter官网并没有找到关于屏幕单位适配的描述和解决方案。在多方查找之后选择使用screenutils的解决方案。

初始化

screenutils使用方式参考github wiki,需要注意的是，旧版貌似需要在State的build方式中初始化，官方最新版是在MyApp种通过LayoutBuilder实现

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return LayoutBuilder(builder: (context, constraints) {//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: false);return MaterialApp(...);},);}
}

使用方法

     ScreenUtil().setWidth(540)  (sdk>=2.6 : 540.w) //根据屏幕宽度适配尺寸ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //根据屏幕高度适配尺寸(一般根据宽度适配即可)ScreenUtil().setSp(24)      (sdk>=2.6 : 24.sp)  //适配字体ScreenUtil().setSp(24, allowFontScalingSelf: true)   (sdk>=2.6 : 24.ssp) //适配字体(根据系统的“字体大小”辅助选项来进行缩放)ScreenUtil().setSp(24, allowFontScalingSelf: false)  (sdk>=2.6 : 24.nsp) //适配字体(不会根据系统的“字体大小”辅助选项来进行缩放)ScreenUtil.pixelRatio       //设备的像素密度ScreenUtil.screenWidth   (sdk>=2.6 : 1.sw)   //设备宽度ScreenUtil.screenHeight  (sdk>=2.6 : 1.sh)   //设备高度ScreenUtil.bottomBarHeight  //底部安全区距离，适用于全面屏下面有按键的ScreenUtil.statusBarHeight  //状态栏高度 刘海屏会更高ScreenUtil.textScaleFactor //系统字体缩放比例ScreenUtil().scaleWidth  // 实际宽度的dp与设计稿宽度的比例ScreenUtil().scaleHeight // 实际高度的dp与设计稿高度度的比例0.2.sw  //屏幕宽度的0.2倍0.5.sh  //屏幕高度的50%

如果要适配一个正方形的时候，我们可以宽高设置同样的值，如：

Container(width: 200.h,height:200.h
)

如果要对文字大小适配可以在初始化allowFontScaling参数设置为true,使用时候：

 Text('我的文字大小在设计稿上是24px，不会随着系统的文字缩放比例变化',style: TextStyle(color: Colors.black,fontSize: 24.sp,),),
Text('我的文字大小在设计稿上是24px，会随着系统的文字缩放比例变化',style: TextStyle(color: Colors.black,fontSize: 24.ssp,),),

图片资源

Flutter中的图片以asset资源的形式存在，需要在pubspec.yaml文件中指定图片的路径。形式如：

flutter:assets:- assets/my_icon.png- assets/background.png

Flutter中的图片适配由系统自动决定采用，我们适配需要建立的目录如：

…/my_icon.png
…/2.0x/my_icon.png
…/3.0x/my_icon.png

系统会根据设备分辨率自动选择对应文件夹下的图片资源，每次新增图片都需要对项目执行flutter pub get 命令重新编译（目前测试图片必须在基础文件中存在，如果文件单独在2.0x文件中存在会无法引用）