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 {
  @override
  Widget 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文件中存在会无法引用)

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页