flutter学习

flutter 学习

dart

const

  • const 关键词创建多个相同的实例，内存中只保留一份
  • flutter 中不会重复编译
1
print(identical(const [],const []))

flutter

常用命令

1
2
3
4
# 清理构建缓存
flutter clean
# 命令行创建指定包名
flutter create demo --org com.demo

vscode 配置保存自动热重载、格式化代码

1
2
3
4
5
6
{
  "dart.hotReloadOnSave": "all",
  "[dart]": {
    "editor.formatOnSave": true
  }
}

管理 flutter sdk 版本工具 fvm

安装

1
2
3
4
5
6
7
8
9
10
# mac
brew tap leoafarias/fvm
brew install fvm
# win
# powershell管理员身份安装choco
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

choco install fvm
#pub 方式安装 fvm
pub global activate fvm # win下git bash使用不了，powershell可以

使用

1
2
3
4
5
6
7
8
fvm install 3.22.0
fvm list
# 项目根目录
fvm use 3.22.0
# 设置全局默认sdk版本
fvm global 3.22.0
# 运行flutter命令加前缀fvm，例如
fvm flutter run

rust 安装指定版本

1
2
3
rustup toolchain list
rustup install 1.76.0
rustup default【版本名称，安装完成会显示】

遇到的问题

double.infinity、double.maxFinite

double.infinity 和 double.maxFinite 可以让当前元素的 width 或者 height 达到父元素的尺寸

Container 嵌套 Container 时，明明指定了子组件的宽高，为什么不起作用 ？

  • 在子组件外层套 Center 组件
  • 使用布局组件 Row 和 Column

详见

RenderBox was not laid out: RenderRepaintBoundary 的解决方法

  • 确保父部件提供足够的空间来容纳子部件。
  • 检查子部件的布局要求，确保它们与父部件的约束条件匹配。
  • 如果有多个子部件，确保它们之间的布局不会互相冲突。
  • 检查父部件的布局约束条件是否正确。
  • 通常，这个错误是由于布局配置不正确或约束条件不满足引起的。检查布局代码并确保布局要求和约束条件正确可以帮助解决这个问题。

详见

TextStyle

  • TextStyle 变量修改不生效
  • TextStyle 是不可变的，这意味着一旦创建，它的属性就不能更改

TextField

  • 组件有一个固定高度，没办法改变
  • 设置 isCollapsed 为 true，根据设置的字体大小来自适应高度
  • 再设置容器或者组件的 padding

Mac 下调接口 SocketException: Connection failed (OS Error: Operation not permitted, errno = 1), address = 127.0.0.1, port = 7890

  • 根据错误信息，发现是没有网络权限，申请网络权限就行
  • 在 macos/Runner/目录下，找到 DebugProfile.entitlements 和 ReleaseProfile.entitlements，加入以下配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.security.network.client</key>
	<true/>
	<key>com.apple.security.app-sandbox</key>
	<true/>
	<key>com.apple.security.cs.allow-jit</key>
	<true/>
	<key>com.apple.security.network.server</key>
	<true/>
</dict>
</plist>

Column 下由内容撑开的 Container 占满一行

解决方案：嵌套 IntrinsicWidth

1
2
3
const IntrinsicWidth(
	child: AppButton(text: "按钮"),
)

实现类似 vue 中 nextTick 功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
_scrollController.addListener(() {
	if (_scrollController.position.pixels ==
			_scrollController.position.maxScrollExtent) {
		setState(() {
			_showTips = true;
		});
		WidgetsBinding.instance.addPostFrameCallback((_) {
			_scrollController.jumpTo(_scrollController.position.maxScrollExtent);
		});
	} else {
		setState(() {
			_showTips = false;
		});
	}
});

Riverpod 修改 state 中的对象没有触发页面刷新

Riverpod 需要一个全新的 state 对象来识别状态更新。如果只是修改对象的属性而不替换整个 state，Riverpod 无法察觉到变化，因此不会触发重新构建。

setResizable 导致的问题

背景：使用 windowManager 横竖屏切换，横屏可以修改窗口大小，竖屏不允许，切换方法中调用 setResizable ，竖屏页面异常

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 修改窗口类型，每当修改类型后需要刷新自己来更新位置
changeWindowLayout(WindowLayoutType layout) async {
	state = layout;

	final isHorizontal = layout != WindowLayoutType.vertical;

	//横竖版切换时，取消最大化
	bool isMax = await windowManager.isMaximized();
	if (isMax) {
		windowManager.unmaximize();
	}
	await windowManager.setSize(layout.size);
	await windowManager.setAlignment(layout.alignment);
	// 调用位置
	await windowManager.setResizable(isHorizontal);

}