2.flutter 基础

截屏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<ClickEventPage> {
  @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<ZFLCustomButton> {
  @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<ZFLThemeFontPage> {
  @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<ZFLRichPage> {
  @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