Skip to main content

3 posts tagged with "flutter"

View All Tags

· 4 min read
Alan

QA

flutter run

flutter run 卡在 Running Gradle task 'assembleDebug'...

执行flutter run -v查看卡在哪个步骤, 如果是卡在gradle环节, 尝试进入 android 目录执行 ./gradlew clean build .

Target of URI doesn't exist

Target of URI doesn't exist 'package:flutter/material.dart'

Visual Studio Code 里的dart代码导入flutter类库标红失败, 提示 Target of URI doesn't exist xxxxx, 这是因为flutter代码没有还原, 尝试在项目根目录执行 flutter pub get

flutter doctor

设置flutter检测Android sdk和Android studio的路径

flutter config --android-sdk="$HOME/Android/Sdk"
flutter config --android-studio-dir="/snap/android-studio/current/android-studio/"

Wrap 元素左对齐

Wrap 里的 children 默认是居中对齐, 可以借助使用Align设置成左对齐:

Align(
alignment: Alignment.topLeft,
child: Wrap(
// ...
)
)

来源: Flutter Wrap widget align: left inside ExpansionPanel, Align文档

组件增加点击触摸事件

给任意组件增加 onTap 事件监听, 可以使用 InkWell 或者 GestureDetector, 两者的区别在于 InkWell 是 material 组件, 会有material风格的特效, 而GestureDetector就是通用的增加手势操作的组件, 以下是示例:

// 使用 InkWell
InkWell(
child: Container(...),
onTap: () {
print("tapped on container");
},
)

// 使用 GestureDetector
GestureDetector(
onTap: () { print("Container was tapped"); },
child: Container(...),
)

GestureDetector(
onTap: () { print("Container was tapped"); },
child: Text("Hello world."),
)

来源: Flutter onTap method for Containers

笔记

Transform 的变换是应用在绘制阶段,而并不是应用在布局(layout)阶段,所以无论对子组件应用何种变化,其占用空间的大小和在屏幕上的位置都是固定不变的,因为这些是在布局阶段就确定的.

RotatedBoxTransform.rotate功能相似,它们都可以对子组件进行旋转变换,但是有一点不同: RotatedBox的变换是在layout阶段,会影响在子组件的位置和大小。

Flutter 中有两种布局模型:

  • 基于 RenderBox 的盒模型布局。
  • 基于 Sliver ( RenderSliver ) 按需加载列表布局。

Flutter 中的可滚动主要由三个角色组成: Scrollable、Viewport 和 Sliver:

  • Scrollable: 用于处理滑动手势,确定滑动偏移,滑动偏移变化时构建 Viewport 。
  • Viewport: 显示的视窗,即列表的可视区域;
  • Sliver: 视窗里显示的元素。

具体布局过程:

  • Scrollable 监听到用户滑动行为后,根据最新的滑动偏移构建 Viewport 。
  • Viewport 将当前视口信息和配置信息通过 SliverConstraints 传递给 Sliver。
  • Sliver 中对子组件(RenderBox)按需进行构建和布局,然后确认自身的位置、绘制等信息,保存在 geometry 中(一个 SliverGeometry 类型的对象)。

在可滚动组件的坐标描述中,通常将滚动方向称为主轴(main axis),非滚动方向称为纵轴(cross axis)。由于可滚动组件的默认方向一般都是沿垂直方向,所以默认情况下主轴就是指垂直方向,水平方向同理。

· One min read
Alan

Flutter远程无线调试 zAndroid App:

  1. 手机号电脑要在同一无线网络(SSID)
  2. 手机开启开发者模式(一般是连续点击Android版本号或者MIUI版本号),
  3. 进入开发者选项里, 开启 Wireless debugging 并进入
  4. 点击 Pair device with pairing code, 生成一个pair code, 然后电脑上执行 adb pair [host]:[port] [pair code] 连接设备.(adb命令位于 android sdk 的 platform-tools 文件夹)
  5. 继续执行 adb connect [host]:[port], 这里的hostportWireless debugging 设置里的 IP address & Port
  6. 然后执行 flutter devices 就可以看到连上 android 设备.

参考 Set Up Device for Development