Flutter 的一些知识点

flutter

1.intro

flutter 本质是 widget 树

Text: 格式文本
Row: 水平布局
Column: 垂直布局
Stack: 线性布局，Positioned 定位
Container: 矩阵，BoxDecoration 装饰 Container
Expanded: 填充剩余空间
Navigator: 管理 Widget 栈
Scaffold: Material 的一种布局结构
GestureDetector: 识别用户手势,onTap 回调
StatefulWidget: 有状态控件,实现 createState 返回一个继承自 State<WidgetType 的状态型控件
State: 可以通过给 action 来分层，Widget 都存在 State 里，通过 AcationWidget 修改 State 里的值，达到渲染 DisplayWdiget 的目的，一个负责渲染/发送 Action，一个负责渲染数据

2.layout

数据结构为树
所有 layout 本质都是 widget
所有布局 widget 都含有 child 和 children 属性
- child: 包含一个子 widget
- children: 含有多个子项,布局子项，直至最后布局子项包含一个可见 Widget
纵向用 Column 横向用 Row 可嵌套
- AxisAligment: 表示对齐
- Expanded:可以自适应布局高宽
  - flex: 弹性系数
Container: 可扩展 padding,margins,borders,background color 等其他装饰元素 decoration
GridView: 可以做滚动网格
ListView: 滚动列表
Stack: 栈，先进后出，也就是后面的 Widget 盖到前一个 Widget 上，形成一个 Widget 栈
Card 是 Material 中的一个组件
EdgeInsets: 间距

自适应: 根据设备发生变化。

响应式: 根据屏幕大小发生变化。

自适应应用

Single Child
- Align: 子级内部对齐
- AspectRatio: 为子级指定比例
- ConstrainedBox: 对子级施加最大最小尺寸限制
- CustomSingleChildLayout: 代理方法对子级进行定位
- Expanded,Flexble: Row,Column 填充剩余空间
- FractionallySizedBox: 基于剩余控件比例限定子级大小
- LayoutBuilder: 让子级可以基于父级的尺寸重新调整其布局
- SingleChildScrollView: 为单一子级添加滚动
Multi Child
- Column,Row,Flex
- CustomMultiChildLayout: 代理多个子级定位
- Flow: 类似 ⬆️
- ListView,GridView,CustomScrollView: 为所有子级添加滚动
- Stack: 基于 Stack 边界对多个子级定位
- Table: 表格布局
- Wrap: 将子级顺序显示在多行/多列内

视觉密度

widget 的疏密程度，紧凑程度等意思，其实就是一个动态的值来自动调整宽高/间距什么的

VisualDensity

double densityAmt = enableTouchMode ? 0.0 : -1.0;
// 水平竖直
VisualDensity density = VisualDensity(horizontal: density, vertical: density);
return MaterialApp(
// 应用到 MaterialApp 主题
theme: ThemeData(visualDensity: density),
...
);
// 使用主题的疏密度
VisualDensity density = Theme.of(context).visualDensity;
return Padding(
padding: EdgeInsets.all(Insets.large + density.vertical * 4),
child: ...
);

基于 Context 的布局

MediaQuery: 媒体查询，给了一些分界点

ScreenType getFormFactor(BuildContext context) {
// Use .shortestSide to detect device type regardless of orientation
double deviceWidth = MediaQuery.of(context).size.shortestSide;
if (deviceWidth > FormFactor.desktop) return ScreenType.Desktop;
if (deviceWidth > FormFactor.tablet) return ScreenType.Tablet;
if (deviceWidth > FormFactor.handset) return ScreenType.Handset;
return ScreenType.Watch;
}

以下是反转屏幕的一个判断，可以基于媒体查询判断是否反转，从顶传入子，使得整个 UI 做出屏幕翻转的响应

bool isHandset = MediaQuery.of(context).size.width < 600;
return Flex(
  children: [...],
  direction: isHandset ?
    Axis.vertical :
    Axis.horizontal
);

layout builder

layout builder 和之前不同的是，提供了一些对象，让你更好的做出判断和使用

Widget foo = LayoutBuilder(builder: (_, constraints, __){
 bool useVerticalLayout = constraints.maxWidth < 400.0;
 return Flex(
     children: [...],
     direction: useVerticalLayout ?
     Axis.vertical : Axis.horizontal
 );
});

设备细分

// Platform对象判断设备类型
bool get isMobileDevice => !kIsWeb && (Platform.isIOS || Platform.isAndroid);
// macos windows
bool get isDesktopDevice =>
    !kIsWeb && (Platform.isMacOS || Platform.isWindows || Platform.isLinux);
// browser
bool get isMobileDeviceOrWeb => kIsWeb || isMobileDevice;
bool get isDesktopDeviceOrWeb => kIsWeb || isDesktopDevice;

input

scrollView,ListView: 自动支持 onPointerSingal.PointerScrollEvent 滑轮输入
实现自定义滑动: Listener Widget 的 onPointerSingal.PointerScrollEvent
FocusableActionDetector: 在元素外包裹，处理焦点，悬浮，鼠标跟随
RawKeyboardListener: 监听键盘事件
Shortcuts: 直接绑定快捷键
RawKeyboard.instance.addListener(_handleKey); 全局监听键盘事件

// 单一快捷键是否按下了
static bool isKeyDown(Set keys) {
return
keys.intersection(RawKeyboard.instance.keysPressed).isNotEmpty;
}

void _handleKey(event){
if (event is RawKeyDownEvent) {
// 两个 shift 组合键
bool isShiftDown = isKeyDown({
LogicalKeyboardKey.shiftLeft,
LogicalKeyboardKey.shiftRight,
});
if (isShiftDown && event.logicalKey == LogicalKeyboardKey.keyN) {
_createNewItem();
}
}
}

鼠标

MouseRegion
return MouseRegion(
// 进入
  onEnter: (_) => setState(() => _isMouseOver = true),
// 离开
onExit: (_) => setState(() => _isMouseOver = false),
// 悬停
onHover: (PointerHoverEvent e) => print(e.localPosition),
  child: ...,
);

用户期望

ScrollBar: 根据平台切换状态

// 不同设备的输入是不同的
static bool get isMultiSelectModifierDown {
bool isDown = false;
// 使用 DeviceOS 来判断设备
if (DeviceOS.isMacOS) {
isDown = isKeyDown([LogicalKeyboardKey.metaLeft, LogicalKeyboardKey.metaRight]);
} else {
isDown = isKeyDown([LogicalKeyboardKey.controlLeft, LogicalKeyboardKey.controlRight]);
}
return isDown;
}
SelectableText: 文字是否可以被选中
SelectableText.rich(TexSpan): 富文本选中
Tooltip: 悬停

布局约束

首先，上层 widget 向下层 widget 传递约束条件。

然后，下层 widget 向上层 widget 传递大小信息。

最后，上层 widget 决定下层 widget 的位置。

长宽计算更像是子向父报备，父汇集各个子然后计算，在向父父汇报

ConstrainedBox: 从父级接收约束施加给子级
Center( child: ConstrainedBox()): 允许控制
UnconstrainedBox: 允许子级改变为任意大小
OverflowBox: 可溢出，需要在本级做出限制

限制外到内，外告知内可小于外宽松约束，外告知内必须变成某个大小严格约束

添加互动

StatefulWidget: 和 React 一样
其实就是状态管理，类似 React 的 State，这个 State 可以是自己的 State，也可以是自己的 Props，从父级 State 传入过来，只不过这里依靠构造函数显示声明
当然可以从父级传回调函数在子级改变父级状态
GestureDetector: 添加其他互动，什么是互动啊，就是用户的行为能改变数据(切换图标也算是数据变动)的地方就是有互动，理解了吧

指定资源

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png


flutter:
  assets:
    - directory/
    - directory/subdirectory/

// 直接读文件了
Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}

// 不同分辨率的图片，可FLutter可以对应不同的设备自动切换
.../my_icon.png
.../2.0x/my_icon.png
.../3.0x/my_icon.png

// 使用别的包的图像，也要声明出来
flutter:
  assets:
    - packages/fancy_backgrounds/backgrounds/background1.png

注意: 读取 android/ios 图片插件和方式不同，文件夹内有 android,ios 两个文件夹，需要添加各自的插件，图标,预加载图 也是如此

路由

安卓启动深度路由 AndroidManifest.xml

<!-- Deep linking -->
<meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="http" android:host="flutterbooksample.com" />
    <data android:scheme="https" />
</intent-filter>

配合 adb 测试

adb shell am start -a android.intent.action.VIEW \
    -c android.intent.category.BROWSABLE \
    -d "http://flutterbooksample.com/book/1"

IOS Info.plist

<key>FlutterDeepLinkingEnabled</key>
<true/>
<key>CFBundleURLTypes</key>
<array>
    <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>flutterbooksample.com</string>
    <key>CFBundleURLSchemes</key>
    <array>
    <string>customscheme</string>
    </array>
    </dict>
</array>

配合 xsrun xshell

xcrun simctl openurl booted customscheme://flutterbooksample.com/book/1

动画

pass

http

import 'package:http/http.dart' as http;

var url = Uri.parse('https://example.com/whatsit/create');
var response = await http.post(url, body: {'name': 'doodle', 'color': 'blue'});
print('Response status: ${response.statusCode}');
print('Response body: ${response.body}');

print(await http.read('https://example.com/foobar.txt'));

安卓需要在 AndroidManifest.xml 中添加需要访问的网络权限

json
class User {
  final String name;
  final String email;

  User(this.name, this.email);
// 解析json
  User.fromJson(Map<String, dynamic> json)
      : name = json['name'],
        email = json['email'];
// 转成json
  Map<String, dynamic> toJson() => {
        'name': name,
        'email': email,
      };
}

或者
dependencies:
  # Your other regular dependencies here
  json_annotation: <latest_version>

dev_dependencies:
  # Your other dev_dependencies here
  build_runner: <latest_version>
  json_serializable: <latest_version>

引入依赖，使用注解
i18n
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # Add this line
    sdk: flutter         # Add this line



return const MaterialApp(
  title: 'Localizations Sample App',
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    Locale('en', ''), // English, no country code
    Locale('es', ''), // Spanish, no country code
  ],
  home: MyHomePage(),
);

添加自定义国际化文件
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0 # Add this line



# The following section is specific to Flutter.
flutter:
  generate: true # Add this line

然后添加 arb 配置
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

arb 文件
{
    "helloWorld": "Hello World!",
    "@helloWorld": {
      "description": "The conventional newborn programmer greeting"
    }
}

导入本地配置
localizationsDelegates: [
    AppLocalizations.delegate, // Add this line
 ``   ],

代码中使用
Text(AppLocalizations.of(context)!.helloWorld);

flutter

1.intro

2.layout

自适应应用

视觉密度

基于 Context 的布局

layout builder

设备细分

input

用户期望

布局约束

添加互动

指定资源

路由

动画

http

相关帖子

Flutter KLine 实现（chart,websocket）

野生社区客户端 V1.4 手机签到、清风明月 IOS 来临

为了能让你们用上 flutter, 我准备做几期视频教程

[App] 轻舟 - 多个地点规划路线

手把手教你如何巧用 Github 的 Action 功能

flutter 修改应用图标修改应用名字

SQL 求教 - 在路径内、列表内随机索引单个任务项

欢迎来到这里！

Flutter 的一些知识点

flutter

1.intro

2.layout

自适应应用

视觉密度

基于 Context 的布局

layout builder

设备细分

input

用户期望

布局约束

添加互动

指定资源

路由

动画

http

相关帖子

Flutter KLine 实现（chart,websocket）

野生社区客户端 V1.4 手机签到、清风明月 IOS 来临

为了能让你们用上 flutter, 我准备做几期视频教程

[App] 轻舟 - 多个地点规划路线

手把手教你如何巧用 Github 的 Action 功能

flutter 修改应用图标 修改应用名字

SQL 求教 - 在路径内、列表内随机索引单个任务项

欢迎来到这里！

flutter 修改应用图标修改应用名字