扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
Flutter是一个移动应用程序的软件开发工具包(SDK),具有以下特征:
创新互联建站自2013年创立以来,是专业互联网技术服务公司,拥有项目网站设计制作、网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元雁塔做网站,已为上家服务,为雁塔各地企业和个人服务,联系电话:18980820575
跨平台应用的框架,没有使用WebView或者系统平台自带的控件,使用自身的高性能渲染引擎自绘
简化版的浏览器,最大限度在android和ios上统一UI,包括业务逻辑和用户体验
开发语言使用dart,结合C, C++, 和Skia(2D渲染引擎)构建
支持hot reload,包含着完整的控件和工具链
一切皆控件,控件是每个Flutter应用程序的基本构建块,与分离视图、控制器、布局和其他属性的框架不同,Flutter具有一致的统一对象模型:控件。一个控件可以定义:结构元素(比如按钮或菜单)、风格元素(比如字体或颜色方案)、布局的方面(比如填充)、一些业务逻辑等
组合大于继承,控件本身通常由许多小型、单用途的控件组成,结合起来产生强大的效果,类的层次结构是扁平的,以最大化可能的组合数量
强化版的WebView,框架仅提供一个View层,大部分功能要依赖原生
目前只能够运行大部分Dart代码(不能引入dart:mirrors或dart:html库)
环境准备阶段:
android-studio 版本:android-studio-ide-191.5977832-windows.exe 3.5.2
flutter版本:stable 版本 (完成系统环境变量 path配置)
dart版本:2.12.0 (完成系统环境变量 path配置)
完成相关软件安装。
配置flutter相关SDK及andriod studio路径:
flutter config --android-sdk="C:\Users\Administrator\AppData\Local\Android\Sdk"
flutter config --android-studio-dir="D:\Program Files\Android\Android Studio"
执行flutter doctor运行成功。
夜神模拟器地址:D:\Program Files\Nox\bin (完成系统环境变量 path配置)
andriod SDK tools:C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools (完成系统环境变量 path配置)
nox_adb.exe connect 127.0.0.1:62001
dart SDK:D:\software\dartsdk-windows-x64-release\dart-sdk\bin
将C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools 下面adb.exe 复制至D:\Program Files\Nox\bin覆盖
adb.exe,此外重新复制adb.exe命名为nox_adb.exe,替换原有的nox_adb.exe。
cdm 输入nox_adb version 及adb version发现版本一致。
启动野神模拟器,输入adb devices发现虚拟设备,执行flutter devices发现 127.0.0.1:62001 设备。
修改C:\learn_flutter\first_flutter\android\gradle\wrapper\gradle-wrapper.properties
distributionUrl=
修改C:\learn_flutter\first_flutter\android\build.gradle
buildscript {
ext.kotlin_version = '1.3.50'
repositories {
// google()
// jcenter()
maven { url ' ' }
maven { url ' ' }
maven { url ' ' }
}
}
allprojects {
repositories {
// google()
// jcenter()
maven { url ' ' }
maven { url ' ' }
maven { url ' ' }
}
}
修改:C:\win-flutter\flutter\packages\flutter_tools\gradle\flutter.gradle
buildscript {
repositories {
// google()
// jcenter()
maven { url ' ' }
maven { url ' ' }
maven { url ' ' }
}
dependencies {
classpath 'com.android.tools.build:gradle:4.1.0'
}
}
//private static final String DEFAULT_MAVEN_HOST = " ";
private static final String DEFAULT_MAVEN_HOST = " ";
修改:C:\win-flutter\flutter\packages\flutter_tools\gradle\resolve_dependencies.gradle
repositories {
google()
jcenter()
maven {
//url "$storageUrl/download.flutter.io"
url " "
}
}
执行 flutter run启动成功。
环境搭建坑点在于JDK兼容问题以及网络问题。
当我们同时为手机和平板适配编写 app 针对不同屏幕尺寸进行 UI 布局或当用户偏好设置较大字号或是想要最大限度等减少动画等;此时就需要 MediaQuery 来帮我们获取所用设备的信息以及用户设置的偏好信息;
MediaQuery 一直存在于 WidgetsApp 和 MaterialApp 中, MediaQuery 继承自 InheritedWidget 是一个单独的 Widget ,但一般通过 MediaQuery.of(context) 来获取相关信息;
当相关信息发生变化,例如屏幕旋转等时,屏幕中 Widget 会重新构建,以保持最新状态;我们可以通过 MediaQuery 构造函数和提供的静态方法手动设置对应的相关信息;
MediaQueryData 包含关于媒介的相关信息;一般通过 MediaQuery.of(context) 获取;
size 为媒介的尺寸大小,以逻辑像素为单位;
devicePixelRatio 为像素密度;与设备物理像素有关,与横竖屏等无关;
orientation 为横竖屏, Orientation.landscape 为横屏, Orientation.portrait 为竖屏;
textScaleFactor 为
每个逻辑像素的字体像素数,小菜理解为字体的像素比;注意,小菜设置了默认字体像素密度为标准的 1.2 倍之后调整设备系统字号,其 1.2 倍依旧是以标准字号为基础扩大 1.2 倍;
platformBrightness 为当前设备的亮度模式;注意调整屏幕亮度并不会改变该模式,与当前系统支持的黑暗模式和明亮模式相关;
alwaysUse24HourFormat 为当前设备是否为 24 小时制;
accessibleNavigation 为是否使用 TalkBack 或 VoiceOver 之类的辅助功能与应用程序进行交互,用以辅助视力障碍人群;
invertColors 为是否使用颜色反转,主要用于 iOS 设备;
highContrast 为用户是否要求前景与背景之间的对比度高,主要用于 iOS 设备;
disableAnimations 为平台是否要求禁用或减少动画;
boldText 为平台是否要求使用粗体;
padding 为屏幕内边距,一般是刘海儿屏或异形屏中被系统遮挡部分边距;
viewInsets 为键盘弹出时等遮挡屏幕边距,其中 viewInsets.bottom 为键盘高度;
systemGestureInsets 为手势边距,如 Android Q 之后添加的向左滑动关闭页面等;
viewPadding 小菜理解为视图内边距,为屏幕被刘海儿屏或异形屏中被系统遮挡部分,从 MediaQuery 边界的边缘计算;此值是保持不变;例如,屏幕底部的软件键盘可能会覆盖并占用需要底部填充的相同区域,因此不会影响此值;
physicalDepth 为设备物理层级,小菜暂时还未想到对应的应用场景;
小菜在尝试获取其他子 Widget Size 时,有两点需要注意,首先要设置一个全局的 GlobalKey 来获取当前位置, key 需要为唯一的;第二通过 GlobalKey().currentContext 获取 BuildContext 上下文环境,从而获取对应尺寸;
MediaQuery 案例尝试
小菜对于部分 MediaQueryData 的应用和理解还不够深入;如有错误请多多指导!
在用Flutter 开发windows和linux跨平台应用的时候,如何设置默认窗口大小呢?
flutter没有提供统一的api,所以默认的窗口大小是1280x720.
如果我们想要改成自己想要的默认窗口大小呢?比如我想要设置为:512像素宽, 926像素高
我该怎么做呢?
请看我的教程。
首先你确保你已经为项目创建了windows和Linux的支持。
目前Flutter 为windows和linux提供的是托管式运行的主程序,可以理解为一个壳子,这个壳子就是用cpp写的,平台原生的window 窗口。
所以我们可以打开相应的cpp源代码,设置默认窗口大小。
这里先讲windows和linux,因为mac 平台跟windows和linux不一样,后面单独给大家讲解。
我们看图。
源代码路径位于:
windows/runner/main.cpp
找到
第一个参数是宽度,单位是px,第二个是高度,单位是px
修改后重新运行生效。
源代码路径位于:
linux/my_application.cc
找到
方法的第一个数字是宽度,第二个是高度,单位也是px像素。
修改后,重新运行生效。
现在,你已经学会了如何设置初始窗口大小了。
在项目中找到 AndroidManifest.xml 文件,其中 android:label="demo" 就是应用程序名称,修改引号中的内容即可
在项目中找到 mipmap-mdpi mipmap-hdpi mipmap-xhdpi mipmap-xxhdpi mipmap-xxxhdpi 文件夹,替换这些文件夹中的 ic_launcher.png 文件即可
注意:图标有多种尺寸的大小,是为了适配不同分辨率的手机而设计的
在项目中找到 Info.plist 文件,其中 CFBundleDisplayName 和 CFBundleName 下面的就是应用程序名称,修改内容即可
找到项目中的 AppIcon.appiconset 文件夹,其中 Contents.json 是配置文件,其它的图片文件就是图标,替换这些图片文件即可
注意:图标有多种尺寸的大小,是为了适配不同分辨率的手机而设计的
插件地址:
在项目中找到 pubspec.yaml 文件,添加内容如下
插件地址:
在项目中找到 pubspec.yaml 文件,添加内容如下
注意:准备一张 1024x1024 的 png 图片,取名为 icon.png 并把它放在 assets/icon 目录中
找到 ~/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_launcher_icons-0.9.2/lib/android.dart 文件修改内容如下
注意:如果使用了镜像地址就找到 ~flutter/.pub-cache/hosted/pub.flutter-io.cn/flutter_launcher_icons-0.9.2/lib/android.dart 文件来修改以上内容
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流