flutter 一些理解

作者: 你飞跃俊杰 | 来源:发表于2019-08-26 16:05 被阅读0次

flutter 一些理解
flutter 基础 01
理解 Flutter
带你深入理解 Flutter 中的字体“冷”知识
flutter环境配置及Android studio下载补丁
flutter实例项目大赏
flutter从入门到精通四
Widget总结
Flutter 布局理解
Flutter ScrollPhysics理解

刷新机制
1.Widget不能改变,只能重建并且携带着State的newWidget来代替oldWidget
2.当调用setState的时候会刷新

image.png

一、Widget:
1.万物皆Widget,所有组合控件的最终容器
2.分类: StatelessWidget(不需改变的控件)和StatefulWidget 带State和不带State
3.位置: 用padding设置位置
4.动画: 设置动画要先创建controller,然后通过它的forward去调.还要记得移除
5.绘图: Canvas 、CustomPaint、CustomPainter
6.透明度 Opacity
7.组合（composing)多个小的 widgets 来构建一个自定义的 widget（而不是扩展它）
8.页面跳转 Navigator 和 Routes,调到其他平台url_launcher
9.线程: Dart 是单线程执行模型，提供异步工具async / await
10.网络请求导入http的库
dependencies:
...
http: ^0.11.3+16

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
[...]
  loadData() async {
    String dataURL = "https://jsonplaceholder.typicode.com/posts";
    http.Response response = await http.get(dataURL);
    setState(() {
      widgets = json.decode(response.body);
    });
  }
}

11.刷新UI setState

  void _updateText() {
    setState(() {
      // update the text
      textToShow = "Flutter is Awesome!";
    });
  }

12.后台线程 Isolate

13.语音包
dependencies:

...

flutter_localizations:
sdk: flutter
intl: "^0.15.6"

import 'package:flutter_localizations/flutter_localizations.dart';
MaterialApp(
 localizationsDelegates: [
   // Add app-specific localization delegate[s] here
   GlobalMaterialLocalizations.delegate,
   GlobalWidgetsLocalizations.delegate,
 ],
 supportedLocales: [
    const Locale('en', 'US'), // English
    const Locale('he', 'IL'), // Hebrew
    // ... other locales the app supports
  ],
  // ...
)

14.生命周期
以通过 hook WidgetsBinding 观察者来监听生命周期事件，并监听 didChangeAppLifecycleState() 的变化事件。

可观察的生命周期事件有：
*   `inactive` - 应用处于不活跃的状态，并且不会接受用户的输入。这个事件仅工作在 iOS 平台，在 Android 上没有等价的事件。
*   `paused` - 应用暂时对用户不可见，虽然不接受用户输入，但是是在后台运行的。
*   `resumed` - 应用可见，也响应用户的输入。
*   `suspending` - 应用暂时被挂起，在 iOS 上没有这一事件。

更多关于这些状态的细节和含义，请参见 AppLifecycleStatus documentation 。

15.tableview相当于listView

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: ListView.builder(
        itemCount: widgets.length,
        itemBuilder: (BuildContext context, int position) {
          return getRow(position);
        },
      ),
    );
  }

  Widget getRow(int i) {
    return GestureDetector(
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Text("Row $i"),
      ),
      onTap: () {
        setState(() {
          widgets.add(getRow(widgets.length + 1));
          print('row $i');
        });
      },
    );
  }

16.scrollView
Widget build(BuildContext context) {
  return ListView(
    children: <Widget>[
      Text('Row One'),
      Text('Row Two'),
      Text('Row Three'),
      Text('Row Four'),
    ],
  );
}

17.增加事件
如果widget包含事件,直接加onTap事件
如果不包含,在外包裹GestureDetector

Tapping
onTapDown — 在特定位置轻触手势接触了屏幕。
onTapUp — 在特定位置产生了一个轻触手势，并停止接触屏幕。
onTap — 产生了一个轻触手势。
onTapCancel — 触发了 onTapDown 但没能触发 tap。
Double tapping
onDoubleTap — 用户在同一个位置快速点击了两下屏幕。
Long pressing
onLongPress — 用户在同一个位置长时间接触屏幕。
Vertical dragging
onVerticalDragStart — 接触了屏幕，并且可能会垂直移动。
onVerticalDragUpdate — 接触了屏幕，并继续在垂直方向移动。
onVerticalDragEnd — 之前接触了屏幕并垂直移动，并在停止接触屏幕前以某个垂直的速度移动。
Horizontal dragging
onHorizontalDragStart — 接触了屏幕，并且可能会水平移动。
onHorizontalDragUpdate — 接触了屏幕，并继续在水平方向移动。
onHorizontalDragEnd — 之前接触屏幕并水平移动的触摸点与屏幕分离。

18.主题

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        textSelectionColor: Colors.red
      ),
      home: SampleAppPage(),
    );
  }
}

19.字体库

fonts:
   - family: MyCustomFont
     fonts:
       - asset: fonts/MyCustomFont.ttf
       - style: italic

Text widget 设置样式

color
decoration
decorationColor
decorationStyle
fontFamily
fontSize
fontStyle
fontWeight
hashCode
height
inherit
letterSpacing
textBaseline
wordSpacing

21.表单输入
输入框:TextField 或是 TextFormField
默认提示: decoration: InputDecoration(hintText: "hintText",errorText: _getErrorText());
通过 TextEditingController 来获得用户输入

22.硬件
:platform channels, plugins

GPS 传感器:location
摄像头:image_picker
FaceBook:flutter_facebook_login

大多数 Firebase 特性被 first party plugins 包含了。这些第一方插件由 Flutter 团队维护：