截屏2022-08-02 12.04.20.png
<1>Dart
可以网页来调试dart
1.main函数程序入口
2.print 输入输出
3.变量 静态类型检查和运行时组合检查，var int Dart中未初始化的变量是null,
var bool1= null ?? 11;
var bool2 = false ?? 11;
var bool3 = true ?? 11;
print("----");
print("$bool1");//11
print("$bool2");//false
print("$bool3");//true
?.如果左边是null,不会执行右边的方法
??如果左边是null,右边的值赋给左边。
var list1;
print(bool1?.abs());//true
print(list1?.toString());
4.const final 修饰符
const 修饰变量的时候是在编译的时候就固定的。
final 不仅有编译时候的常量，运行时第一次运行时候的初始化。
final a = new DateTime.now();
// const b = new DateTime.now();//报错
5.方法不需要用function 来声明
testFun1();
//方法
testFun1(){
print('方法1');
}
6.async 函数返回future. await是等待Future。
<2>flutter 声明式UI
命令式UI：构建全功能UI实体，然后在UI更改时使用方法对其进行变更。(Android,iOS)
声明式UI：描述当前的UI状态，并且不需要关心它是如何过渡到框架的。 (Flutter)
页面根据不同的情况展示不一样的按钮， 命令式会把之前的按钮删除掉，再绘制一个新的button.
声明式会根据状态的不一样展示不一样的button.
<3>flutter 引入文件 资源 本地化
1.引入文件
import 'package:flutter/material.dart’;系统文件
import 'package:date_format/date_format.dart'; 第三方文件
import 'package:flutter_app/route_page/register/registerFrist.dart'; 自己定义的文件
2.资源 Assets 2.0x 3.0x pubspec中配置图片资源 json资源文件的访问
assets/images/图片文件
assets/images/2.0x/图片文件
assets/images/3.0x/图片文件
assets/json/home.json 文件目录
import 'package:flutter/services.dart';
var a = await rootBundle.loadString('assets/json/home.json');
print("读文件中的内容");
print(a);
3.本地化
1.pubspec
flutter_localizations:
sdk: flutter
###下面这里是Tools-flutter_intl-initialize for the project生成的。
flutter_intl:
enabled: true
2.Tools - flutter_intl - initialize for the project
Tools - flutter_intl - add Locale
l10n - arb文件写对应的文字
{
"login_psw": "密码"
}
supportedLocales，localizationsDelegates
MaterialApp(
debugShowCheckedModeBanner: false,
supportedLocales: [
const Locale('zh', 'CH'),
const Locale('en', 'US'),
],
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
S.delegate
],
I18N/L10N 是什么？
开发人员把 internationalization简写成 I18N,中间的数字 18是前后两个字母 i和 n之间的字母个数。 L10N依据“ localization”使用同样的命名规则。 I18N/L10N方法、协议和应用结合在一起，允许用户使用他们自己所选择的语言。
<4> 组件透明度 Opacity 组件透明度，颜色透明度。
截屏2022-07-29 15.38.07.png
@override
Widget build(BuildContext context) {
return Column(
children: [
Opacity(
opacity: 0.5,
child: Container(
margin: EdgeInsets.only(
top: MediaQueryData.fromWindow(window).padding.top + 10,
left: 10),
width: 50,
height: 50,
color: Colors.red,
child: Text('haksdhkahd'),
),
),
Opacity(
opacity: 1,
child: Container(
margin: EdgeInsets.only(
top: MediaQueryData.fromWindow(window).padding.top + 10,
left: 10),
width: 50,
height: 50,
color: Color.fromRGBO(255, 0, 0, 0.5),
child: Text('haksdhkahd'),
),
),
Opacity(
opacity: 1,
child: Container(
margin: EdgeInsets.only(
top: MediaQueryData.fromWindow(window).padding.top + 10,
left: 10),
width: 50,
height: 50,
color: Colors.red,
child: Text('haksdhkahd'),
),
),
],
);
}
<5> 点击事件和其他手势的监听。
import 'package:flutter/material.dart';
class ClickEventPage extends StatefulWidget {
@override
_ClickEventPageState createState() => _ClickEventPageState();
}
class _ClickEventPageState extends State {
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
RaisedButton(
child: Text('点击'),
onPressed: () {
print('被点击了1');
}),
ZFLCustomButton(),
],
),
);
}
}
class ZFLCustomButton extends StatefulWidget {
@override
_ZFLCustomButtonState createState() => _ZFLCustomButtonState();
}
class _ZFLCustomButtonState extends State {
@override
Widget build(BuildContext context) {
return Container(
child: GestureDetector(
// onTap: () {
// print('被点击了');
// },
// onLongPress: () {
// print('长按');
// },
onTapDown: (details) {
print('按下');
},
onTapUp: (details) {
print('松开');
},
onTapCancel: () {
print('取消');
},
child: Text('我是自定义的按钮哦'),
//语音按下
//松开
//语音取消
),
);
}
}
<6> 主题和fontFamily字体
截屏2022-08-02 10.09.28.png
theme: ThemeData(primaryColor: Colors.blue),
import 'package:flutter/material.dart';
class ZFLThemeFontPage extends StatefulWidget {
@override
_ZFLThemeFontPageState createState() => _ZFLThemeFontPageState();
}
class _ZFLThemeFontPageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Theme'),),
body: Container(
margin: EdgeInsets.only(top: 100),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('张三',style:TextStyle(fontFamily: 'FZLanTing'),),
Text('张三'),
],
)
],
),
),
);
}
}
<7> RichText, TextSpan 富文本。
截屏2022-08-02 10.31.12.png
import 'package:flutter/material.dart';
class ZFLRichPage extends StatefulWidget {
@override
_ZFLRichPageState createState() => _ZFLRichPageState();
}
class _ZFLRichPageState extends State {
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: 120),
child: RichText(
text: TextSpan(
children: [
TextSpan(text: '上海',style: TextStyle(color: Colors.red)),
TextSpan(text: '上海',style: TextStyle(color: Colors.orange)),
TextSpan(text: '上海',style: TextStyle(color: Colors.green)),
]
),
),
);
}
}
<8> 一些相关flutter插件和一些学习项目。
https://www.jianshu.com/p/406672d4a0cd
https://github.com/flutter/flutter/tree/master/examples
https://github.com/flutter/samples
https://github.com/nisrulz/flutter-examples
https://github.com/iampawan/FlutterExampleApps