flutter适配方案

Flutter

直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
class ScreenUtil {
  static ScreenUtil instance = new ScreenUtil();
  double width;
  bool allowFontScaling;
  static double _screenWidth;
  static double _textScaleFactor;
  ScreenUtil({
    this.width = 750, // 默认设计稿750px
    this.allowFontScaling = false, // 默认不跟随系统缩放字体
  });
  static ScreenUtil getInstance() {
    return instance;
  }
  void init(BuildContext context) {
    _screenWidth = MediaQuery.of(context).size.width;
    _textScaleFactor = MediaQuery.of(context).textScaleFactor;
  }
  get scaleWidth => _screenWidth / instance.width;
  setSize(double size) => size * scaleWidth;

  ///@param fontSize 传入设计稿上字体的px ,
  setSp(double fontSize) => allowFontScaling
      ? setSize(fontSize)
      : setSize(fontSize) / _textScaleFactor;
}

// 使用, 在入口文件中(一般为app.dart),
ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
// 在切图是使用
Text('关于',
    ...
    style: TextStyle(color: kLingyiText500, fontSize: ScreenUtil.getInstance().setSp(32))
)
Container(
    width: ScreenUtil.getInstance().setSize(64),
    height: ScreenUtil.getInstance().setSize(64),
    ...
)

附flutter开发注意事项

  • 凡是不能确地页面高度的都使用可滑动组件(ListView, SingleChildScroll…)
  • 使用materail主题都要考虑appbar返回键在Android和Ios的统一, 建议全部使用leading自定义返回图标, 并且注意返回图标与背景色区分开来
  • 使用TextField注意屏幕被撑起问题, 键盘类型, 是否自动更正等
  • 明确设计主题色, 并分离出单独的配置文件
  • 图片占位符问题, 确保图片请求时图片区域视觉友好
赞 赏
微信扫一扫