Skip to content

Commit

Permalink
refactor(namespace):change
Browse files Browse the repository at this point in the history
  • Loading branch information
ohxxx committed Oct 10, 2021
1 parent 9bbae52 commit e4cc245
Show file tree
Hide file tree
Showing 19 changed files with 84 additions and 84 deletions.
24 changes: 12 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,27 @@

> 个人观点: 对于屏幕的适配,无非就是获取当前设备的 dpi、width、height、safe area 等与 UI Design 进行比值换算。对于流式布局这种方法很通用,但是牵扯到单屏(整屏)显示,这种方法就不太满足 UI 要求。目前对于单屏显示我想到的解决方案就是:使用不同宽高比值对 UI 中元素定向处理,代码见
#### 通过 Adapt 工具适配如下
#### 通过 Adapter 工具适配如下

#### `流式布局`

> 主要使用`adaptPx(x)`进行页面适配
> 主要使用`adapterPx(x)`进行页面适配
| iPhone 5s | iPhone 8 | iPhone 12 Pro |
| --------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://github.com/xxxDeveloper/flutter_adapt/blob/master/screenshots/flow_layout/iPhone%205s.png" width="375" /> | <img src="https://github.com/xxxDeveloper/flutter_adapt/blob/master/screenshots/flow_layout/iPhone%208.png" width="375" /> | <img src="https://github.com/xxxDeveloper/flutter_adapt/blob/master/screenshots/flow_layout/iPhone%2012%20Pro.png" width="375" /> |
| iPhone 5s | iPhone 8 | iPhone 12 Pro |
| ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://github.com/xxxDeveloper/flutter_adapter/blob/master/screenshots/flow_layout/iPhone%205s.png" width="375" /> | <img src="https://github.com/xxxDeveloper/flutter_adapter/blob/master/screenshots/flow_layout/iPhone%208.png" width="375" /> | <img src="https://github.com/xxxDeveloper/flutter_adapter/blob/master/screenshots/flow_layout/iPhone%2012%20Pro.png" width="375" /> |

#### `单屏布局`

> 主要使用`adaptPx(x)``adaptPm(x)``adaptDynamic(flag, x)`结合进行页面适配
> 主要使用`adapterPx(x)``adapterPm(x)``adapterDynamic(flag, x)`结合进行页面适配
> 根据单屏内容优先级对布局尺寸进行特殊处理
例如(并不是唯一优先级)

- 1、 width 使用`adaptPx`进行适配
- 2、 height、padding、margin 使用`adaptPm`进行适配
- 3、 公用动态组件 使用`adaptDynamic`进行适配
- 1、 width 使用`adapterPx`进行适配
- 2、 height、padding、margin 使用`adapterPm`进行适配
- 3、 公用动态组件 使用`adapterDynamic`进行适配

| iPhone 5s | iPhone 8 | iPhone 12 Pro |
| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://github.com/xxxDeveloper/flutter_adapt/blob/master/screenshots/fullscreen_layout/iPhone%205.png" width="375" /> | <img src="https://github.com/xxxDeveloper/flutter_adapt/blob/master/screenshots/fullscreen_layout/iPhone%208.png" width="375" /> | <img src="https://github.com/xxxDeveloper/flutter_adapt/blob/master/screenshots/fullscreen_layout/iPhone%2012%20Pro.png" width="375" /> |
| iPhone 5s | iPhone 8 | iPhone 12 Pro |
| ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://github.com/xxxDeveloper/flutter_adapter/blob/master/screenshots/fullscreen_layout/iPhone%205.png" width="375" /> | <img src="https://github.com/xxxDeveloper/flutter_adapter/blob/master/screenshots/fullscreen_layout/iPhone%208.png" width="375" /> | <img src="https://github.com/xxxDeveloper/flutter_adapter/blob/master/screenshots/fullscreen_layout/iPhone%2012%20Pro.png" width="375" /> |
2 changes: 1 addition & 1 deletion android/app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ android {

defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "com.example.flutter_adapt"
applicationId "com.example.flutter_adapter"
minSdkVersion 16
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
Expand Down
2 changes: 1 addition & 1 deletion android/app/src/debug/AndroidManifest.xml
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.flutter_adapt">
package="com.example.flutter_adapter">
<!-- Flutter needs it to communicate with the running application
to allow setting breakpoints, to provide hot reload, etc.
-->
Expand Down
4 changes: 2 additions & 2 deletions android/app/src/main/AndroidManifest.xml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.flutter_adapt">
package="com.example.flutter_adapter">
<application
android:label="flutter_adapt"
android:label="flutter_adapter"
android:icon="@mipmap/ic_launcher">
<activity
android:name=".MainActivity"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
package com.example.flutter_adapt
package com.example.flutter_adapter

import io.flutter.embedding.android.FlutterActivity

Expand Down
2 changes: 1 addition & 1 deletion android/app/src/profile/AndroidManifest.xml
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.flutter_adapt">
package="com.example.flutter_adapter">
<!-- Flutter needs it to communicate with the running application
to allow setting breakpoints, to provide hot reload, etc.
-->
Expand Down
2 changes: 1 addition & 1 deletion ios/Runner/Info.plist
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>flutter_adapt</string>
<string>flutter_adapter</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
Expand Down
28 changes: 14 additions & 14 deletions lib/adapt.dart → lib/adapter.dart
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import 'package:flutter/material.dart';

/// [屏幕适配]
class Adapt {
class Adapter {
// 实例
static Adapt? _instance;
static Adapter? _instance;
// 设计稿宽度
static const int designWidth = 375;
// 设计稿高度
Expand All @@ -23,14 +23,14 @@ class Adapt {
// 底部安全距离
static double _bottomBarHeight = 0;

Adapt._();
Adapter._();

factory Adapt() => _instance!;
factory Adapter() => _instance!;

/// [初始化]
static void init(BuildContext context) {
if (_instance == null) {
_instance = Adapt._();
_instance = Adapter._();
}
_mediaQueryData = MediaQuery.of(context);
_dpi = _mediaQueryData!.devicePixelRatio;
Expand Down Expand Up @@ -68,27 +68,27 @@ class Adapt {
/// 主要用于流式布局的适配,既使用宽度比进行页面适配
///
/// 对于widget的`width``height``radius``padding``madding`等的适配
double adaptPx(double value) => value * widthRatio;
double adapterPx(double value) => value * widthRatio;

/// 主要用整屏布局适配,既使用高度比进行页面适配.
/// 但是对于整屏显示内容不适用与全部使用 [adaptPm(x)] 进行适配,应当与[adaptPx(x)]结合使用
/// 但是对于整屏显示内容不适用与全部使用 [adapterPm(x)] 进行适配,应当与[adapterPx(x)]结合使用
/// * 例如:
/// * width、height使用adaptPx适配
/// * padding、madding使用adaptPm适配
/// * width、height使用adapterPx适配
/// * padding、madding使用adapterPm适配
///
/// 对于于widget的`width``height``radius``padding``madding`等的适配
double adaptPm(double value) => value * heightRatio;
double adapterPm(double value) => value * heightRatio;

/// 动态适配
/// 适用于公共组件对于不同布局的适配
///
/// `flag`根据参数进行动态换算处理,true使用[adaptPm],false使用[adaptPx]
/// `flag`根据参数进行动态换算处理,true使用[adapterPm],false使用[adapterPx]
/// `value`需要适配的尺寸
double adaptDynamic(bool flag, double value) =>
flag ? adaptPm(value) : adaptPx(value);
double adapterDynamic(bool flag, double value) =>
flag ? adapterPm(value) : adapterPx(value);

/// 主要用于字体适配,可设置`fontRatio`进行字体比例设置
///
/// 对于`fontSize`适配
double adaptSp(double fontSize) => adaptPx(fontSize) / _fontRatio;
double adapterSp(double fontSize) => adapterPx(fontSize) / _fontRatio;
}
16 changes: 8 additions & 8 deletions lib/common.dart
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import 'package:flutter/material.dart';

import 'adapt.dart';
import 'adapter.dart';

const Color darkColor = Color(0x33000000);
const Color lightColor = Color(0x1a000000);
Expand All @@ -20,17 +20,17 @@ Widget lineBlock({
bool isAdapt = false,
}) {
return Container(
width: Adapt().adaptPx(width),
height: Adapt().adaptDynamic(isAdapt, 20),
width: Adapter().adapterPx(width),
height: Adapter().adapterDynamic(isAdapt, 20),
margin: EdgeInsets.only(
bottom: Adapt().adaptDynamic(isAdapt, margin.bottom),
left: Adapt().adaptDynamic(isAdapt, margin.left),
top: Adapt().adaptDynamic(isAdapt, margin.top),
right: Adapt().adaptDynamic(isAdapt, margin.right),
bottom: Adapter().adapterDynamic(isAdapt, margin.bottom),
left: Adapter().adapterDynamic(isAdapt, margin.left),
top: Adapter().adapterDynamic(isAdapt, margin.top),
right: Adapter().adapterDynamic(isAdapt, margin.right),
),
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(Adapt().adaptPx(5)),
borderRadius: BorderRadius.circular(Adapter().adapterPx(5)),
),
);
}
18 changes: 9 additions & 9 deletions lib/flow_layout.dart
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import 'package:flutter/material.dart';

import 'adapt.dart';
import 'adapter.dart';
import 'common.dart';

class FlowLayout extends StatefulWidget {
Expand All @@ -14,27 +14,27 @@ class _FlowLayoutState extends State<FlowLayout> {
/// card小组件
Widget _customCard() {
return Container(
width: Adapt().adaptPx(375),
height: Adapt().adaptPx(150),
margin: EdgeInsets.all(Adapt().adaptPx(10)),
width: Adapter().adapterPx(375),
height: Adapter().adapterPx(150),
margin: EdgeInsets.all(Adapter().adapterPx(10)),
decoration: BoxDecoration(
color: Color(0x26000000),
borderRadius: BorderRadius.circular(Adapt().adaptPx(30)),
borderRadius: BorderRadius.circular(Adapter().adapterPx(30)),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: Adapt().adaptPx(72),
height: Adapt().adaptPx(72),
margin: EdgeInsets.all(Adapt().adaptPx(15)),
width: Adapter().adapterPx(72),
height: Adapter().adapterPx(72),
margin: EdgeInsets.all(Adapter().adapterPx(15)),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0x33000000),
),
),
Padding(
padding: EdgeInsets.only(top: Adapt().adaptPx(15)),
padding: EdgeInsets.only(top: Adapter().adapterPx(15)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
Expand Down
24 changes: 12 additions & 12 deletions lib/fullscreen_layout.dart
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import 'package:flutter/material.dart';

import 'adapt.dart';
import 'adapter.dart';
import 'common.dart';

class FullScreenLayout extends StatefulWidget {
Expand All @@ -14,9 +14,9 @@ class _FullScreenLayoutState extends State<FullScreenLayout> {
/// 圆形组件
Widget commonCircleWidget() {
return Container(
width: Adapt().adaptPx(70),
height: Adapt().adaptPm(70),
margin: EdgeInsets.only(top: Adapt().adaptPm(15)),
width: Adapter().adapterPx(70),
height: Adapter().adapterPm(70),
margin: EdgeInsets.only(top: Adapter().adapterPm(15)),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0x33000000),
Expand Down Expand Up @@ -66,12 +66,12 @@ class _FullScreenLayoutState extends State<FullScreenLayout> {
child: Column(
children: [
Container(
width: Adapt().adaptPx(375),
height: Adapt().adaptPm(150),
margin: EdgeInsets.all(Adapt().adaptPm(10)),
width: Adapter().adapterPx(375),
height: Adapter().adapterPm(150),
margin: EdgeInsets.all(Adapter().adapterPm(10)),
decoration: BoxDecoration(
color: Color(0x26000000),
borderRadius: BorderRadius.circular(Adapt().adaptPx(30)),
borderRadius: BorderRadius.circular(Adapter().adapterPx(30)),
),
child: Column(children: [
commonLineWidget(top: 15),
Expand All @@ -81,12 +81,12 @@ class _FullScreenLayoutState extends State<FullScreenLayout> {
]),
),
Container(
width: Adapt().adaptPx(375),
height: Adapt().adaptPm(370),
margin: EdgeInsets.all(Adapt().adaptPm(10)),
width: Adapter().adapterPx(375),
height: Adapter().adapterPm(370),
margin: EdgeInsets.all(Adapter().adapterPm(10)),
decoration: BoxDecoration(
color: Color(0x26000000),
borderRadius: BorderRadius.circular(Adapt().adaptPx(30)),
borderRadius: BorderRadius.circular(Adapter().adapterPx(30)),
),

/// 此处布局不适用GridView布局
Expand Down
16 changes: 8 additions & 8 deletions lib/main.dart
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_adapt/adapt.dart';
import 'package:flutter_adapter/adapter.dart';
import 'package:google_fonts/google_fonts.dart';

import 'flow_layout.dart';
Expand Down Expand Up @@ -38,9 +38,9 @@ class _MyHomePageState extends State<MyHomePage> {
return GestureDetector(
onTap: () => onTap(),
child: Container(
width: Adapt().adaptPx(375),
height: Adapt().adaptPx(50),
margin: EdgeInsets.only(top: Adapt().adaptPx(10)),
width: Adapter().adapterPx(375),
height: Adapter().adapterPx(50),
margin: EdgeInsets.only(top: Adapter().adapterPx(10)),
decoration: BoxDecoration(
color: Color(0x26000000),
),
Expand All @@ -58,23 +58,23 @@ class _MyHomePageState extends State<MyHomePage> {
title,
style: GoogleFonts.goldman(
color: Colors.white,
fontSize: Adapt().adaptSp(16),
fontSize: Adapter().adapterSp(16),
),
),
);
}

@override
Widget build(BuildContext context) {
/// Adapt 初始化
/// Adapter 初始化
///
/// 上下文传入进行媒体查询
Adapt.init(context);
Adapter.init(context);

return Scaffold(
appBar: AppBar(
title: Text(
'Flutter Adapt',
'Flutter Adapter',
style: GoogleFonts.goldman(),
),
elevation: 0,
Expand Down
6 changes: 3 additions & 3 deletions macos/Runner.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
/* Begin PBXFileReference section */
333000ED22D3DE5D00554162 /* Warnings.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = Warnings.xcconfig; sourceTree = "<group>"; };
335BBD1A22A9A15E00E9071D /* GeneratedPluginRegistrant.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = GeneratedPluginRegistrant.swift; sourceTree = "<group>"; };
33CC10ED2044A3C60003C045 /* flutter_adapt.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "flutter_adapt.app"; sourceTree = BUILT_PRODUCTS_DIR; };
33CC10ED2044A3C60003C045 /* flutter_adapter.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "flutter_adapter.app"; sourceTree = BUILT_PRODUCTS_DIR; };
33CC10F02044A3C60003C045 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
33CC10F22044A3C60003C045 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Assets.xcassets; path = Runner/Assets.xcassets; sourceTree = "<group>"; };
33CC10F52044A3C60003C045 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/MainMenu.xib; sourceTree = "<group>"; };
Expand Down Expand Up @@ -105,7 +105,7 @@
33CC10EE2044A3C60003C045 /* Products */ = {
isa = PBXGroup;
children = (
33CC10ED2044A3C60003C045 /* flutter_adapt.app */,
33CC10ED2044A3C60003C045 /* flutter_adapter.app */,
);
name = Products;
sourceTree = "<group>";
Expand Down Expand Up @@ -172,7 +172,7 @@
);
name = Runner;
productName = Runner;
productReference = 33CC10ED2044A3C60003C045 /* flutter_adapt.app */;
productReference = 33CC10ED2044A3C60003C045 /* flutter_adapter.app */;
productType = "com.apple.product-type.application";
};
/* End PBXNativeTarget section */
Expand Down
Loading

0 comments on commit e4cc245

Please sign in to comment.