flutter常用操作
Easul Lv6
  2023-04-10 20:24:59 2023-04-10 20:24   2026-03-10 01:04:03      881 字  3 分钟

相关资料

常用命令

BASH 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 进入项目根目录
# 列出已经连接的设备
flutter devices
# 清除缓存
flutter clean
# 拉取仓库依赖
flutter pub get
# 运行
# 如果某个位置下载比较慢可以使用一下代理
# export http_proxy=http://127.0.0.1:1080
# export https_proxy=http://127.0.0.1:1080
flutter run 
# 构建
# linux构建需要使用如下命令开启桌面
# flutter config --enable-linux-desktop
# linux 构建路径在 build/linux/x64/release/bundle/ 下
# windows 构建路径在 build/windows/runner/Release/ 下
# mac 构建路径在 build/macos/Build/Products/Release/ 下
# apk 构建路径在 build/app/outputs/apk/ 下
# 不同平台可设置构建参数为 windows linux macos apk
# 构建可以添加 --release 参数，否则默认构建 debug 包
flutter build linux --release -v

页面组件

基本代码架构

列表组件

  • ListView组件
  • GridView可以直接将屏幕的宽分为几份，然后在高上设置为宽的倍数

布局组件

  • ConstrainedBox，用于创建大小在一定范围的组件
  • UnconstrainedBox, 用于取消父组件的限制
  • SizedBox，用于创建固定大小的组件
  • Row，用于创建一行组件
  • Column，用于创建一列组件
  • Flex，用于创建占用百分比的组件
  • Wrap，流式组件，也就是一行放不下，放下一行
  • Stack，Positioned，用于创建具有上下关系的组件，后边的组件盖在前边组件的上边

容器组件

  • Container，可以设置大小，背景色，容器装饰，内边距的组件
  • Padding，设置内边距
  • Clip,用于显示圆形的组件等
  • Expanded，自动撑满未用的边界
  • Center，使组件居中
  • Align，指定组件在上下左右中还是角上的位置

UI组件

组件生命周期

DART 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class _ChewiePlayerState extends State<ChewiePlayer> {
  // 在build之前需要进行初始化操作的地方，只调用一次
  @override
  void initState() {
    super.initState();
    _chewiePlayerInit();
  }

  // 该组件销毁前调用一次，用于资源的释放等收尾操作
  @override
  void dispose() {
    super.dispose();
    chewieController.dispose();
  }

  // 用于界面的创建
  // 在初始化之后调用一次，或者每次数据更改之后调用setState调用一次
  @override
  Widget build(BuildContext context) {
  }
}

一些设计模式

一些心得

  • 基本语法与Java和JavaScript类似
  • 如果需要通过事件操作组件，可以设置一个全局变量，组件使用这个全局变量，事件里通过setState来通知组件进行更新
    • 如果遇到ListView等多子项的组件，可以设置一个全局index来保存子项的index，然后通过该项通知具体组件。
    • 如果需要在显示组件的时候二选一，那么全局变量可以设置为bool，使用的时候设置这个变量的值即可。
  • 有状态组件用于控制组件状态(有生命周期)，无状态组件用于底层最小的组件单元
  • runApp()方法要运行无状态组件
  • flutter的数据与界面控制可以使用监听器listener，控制器controller或者上下文context来操作，或者setState来修改变量来通知使用变量的地方
  • 本文标题：flutter常用操作
  • 本文作者：Easul
  • 创建时间：2023-04-10 20:24:59
  • 本文链接：https://blog.212490197.xyz/article/program/flutter/regular-operation/
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
 评论
  1. 1. 相关资料
  2. 2. 常用命令
  3. 3. 页面组件
    1. 3.1. 基本代码架构
    2. 3.2. 列表组件
    3. 3.3. 布局组件
    4. 3.4. 容器组件
    5. 3.5. UI组件
  4. 4. 组件生命周期
  5. 5. 一些设计模式
  6. 6. 一些心得