Flutter 开发之旅(1)
Flutter 在专业知识上的简单认知：Flutter 就是一个UI的开发框架
先看一款应用的组件和开发，在开始原理和调优
介绍两个启动Splash的页面做法，虽然以前我也写过，但是都是demo级别，不够具体，无法形成知识体系，在开发之旅一系列之后，会更加有条理，成体系的实战总结的方式出现。订阅更新吧。
关于Splash 在Flutter上的做法
- 闪屏页面
https://pub.dev/packages/flutter_splash_screen/install
- Lottie 闪屏页面
https://medium.com/swlh/native-splash-screen-in-flutter-using-lottie-121ce2b9b0a4
这两种推荐做法，感觉都还不错。如果你在Android优化过闪屏界面，对这块算是非常熟悉。
第一种方式的使用，第二种后期实战项目尝试
按照官网引入方式，我整理下特殊的部分。
我用的方式是命令方式创建的项目
flutter create --org 包名 项目名
「新」在MainActivity 中的代码修改，我用的是Kotlin
package top.zcwfeng.zcw_eyepetizer
import android.os.Bundle
import io.flutter.embedding.android.FlutterActivity
import org.devio.flutter.splashscreen.SplashScreen;
class MainActivity: FlutterActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
SplashScreen.show(this, true);// here
super.onCreate(savedInstanceState)
}
「旧」但是老版本可能用Java这么写
+ import org.devio.flutter.splashscreen.SplashScreen;
import io.flutter.app.FlutterActivity;
import io.flutter.plugins.GeneratedPluginRegistrant;
public class MainActivity extends FlutterActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
+ SplashScreen.show(this, true);// here
super.onCreate(savedInstanceState);
GeneratedPluginRegistrant.registerWith(this);
}
}
GeneratedPluginRegistrant.registerWith(this);这句话似乎可以不用加了。
「辅助资源文件修改」
主题文件，在values/styles.xml values-night 最好也修改
<!--添加-->
<!--设置透明背景-->
<item name="android:windowIsTranslucent">true</item>
添加资源文件layout/launch_screen.xml 至于为啥这么干，等分析原理继续回顾
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/launch_screen" />
</RelativeLayout>
「Flutter 端」AppInit
import 'package:flutter_splash_screen/flutter_splash_screen.dart';
import 'http/Url.dart';
class AppInit {
AppInit._();
static Future<void> init() async {
Url.baseUrl = 'http://baobab.kaiyanapp.com/api/';
Future.delayed(const Duration(milliseconds: 2000), () {
FlutterSplashScreen.hide();
});
}
}
沉浸式做法-设置沉浸式状态栏
「Flutter 端」
//Flutter沉浸式状态栏，Platform.isAndroid 判断是否是Android手机
if (Platform.isAndroid) {
// setSystemUIOverlayStyle:用来设置状态栏顶部和底部样式
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(statusBarColor: Colors.transparent));
}
异步UI更新--FutureBuilder
看一个Demo
const FutureBuilder({
Key? key,
this.future, // 获取数据的方法
this.initialData, // 初始的默认数据
required this.builder,
}) : assert(builder != null),
super(key: key);
//FutureBuilder控件
new FutureBuilder<String>(
future: _calculation, // 用户定义的需要异步执行的代码，类型为Future<String>或者null的变量或函数
//snapshot就是_calculation在时间轴上执行过程的状态快照
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
switch (snapshot.connectionState) {
//如果_calculation未执行则提示：请点击开始
case ConnectionState.none: return new Text('Press button to start');
//如果_calculation正在执行则提示：加载中
case ConnectionState.waiting: return new Text('Awaiting result...');
default: //如果_calculation执行完毕
if (snapshot.hasError) //若_calculation执行出现异常
return new Text('Error: ${snapshot.error}');
else //若_calculation执行正常完成
return new Text('Result: ${snapshot.data}');
}
},
)
导航返回拦截--WillPopScope
为了避免用户误触返回按钮而导致APP退出，当用户在某一个时间段内点击两次时，才会认为用户是要退出（而非误触）。Flutter中可以通过WillPopScope来实现返回按钮拦截。
const WillPopScope({
Key? key,
required this.child,
required this.onWillPop,
})
onWillPop是一个回调函数，当用户点击返回按钮时被调用（包括导航返回按钮及Android物理返回按钮）。该回调需要返回一个Future对象，如果返回的Future最终值为false时，则当前路由不出栈(不会返回)；最终值为true时，当前路由出栈退出。我们需要提供这个回调来决定是否退出。
demo
import 'package:flutter/material.dart';
class WillPopScopeTestRoute extends StatefulWidget {
@override
WillPopScopeTestRouteState createState() {
return new WillPopScopeTestRouteState();
}
}
class WillPopScopeTestRouteState extends State<WillPopScopeTestRoute> {
DateTime _lastPressedAt; //上次点击时间
@override
Widget build(BuildContext context) {
return new WillPopScope(
onWillPop: () async {
if (_lastPressedAt == null ||
DateTime.now().difference(_lastPressedAt) > Duration(seconds: 1)) {
//两次点击间隔超过1秒则重新计时
_lastPressedAt = DateTime.now();
return false;
}
return true;
},
child: Container(
alignment: Alignment.center,
child: Text("1秒内连续按两次返回键退出"),
)
);
}
}
至于更多的细节，config，http，导航和代码关联，移步关注↓
