tech
Defaultdeesfrzh

Flutter

Google 跨平台 UI 工具包 - 单一代码库、热重载、原生性能

TL;DR

是什么：Google 的 UI 工具包，用于构建原生编译应用。

为什么用：iOS/Android/Web/桌面单一代码库、热重载、美观的 UI、优秀的性能。

Quick Start

安装：按照 flutter.dev/docs/get-started/install 操作

验证：

flutter doctor

创建新应用：

flutter create my_app
cd my_app
flutter run

Cheatsheet

命令描述
flutter create name创建新项目
flutter run在设备/模拟器上运行
flutter build apk构建 Android APK
flutter build ios构建 iOS 应用
flutter pub get获取依赖
flutter pub add pkg添加包
flutter test运行测试

Gotchas

基础 Widget

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('My App')),
        body: const Center(child: Text('Hello, Flutter!')),
      ),
    );
  }
}

有状态 Widget

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_count'),
        ElevatedButton(
          onPressed: () => setState(() => _count++),
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

常用 Widget

// 布局
Column(children: [...])
Row(children: [...])
Container(padding: ..., child: ...)
ListView.builder(itemBuilder: ...)

// 输入
TextField(controller: ..., onChanged: ...)
ElevatedButton(onPressed: ..., child: ...)

// 展示
Text('Hello')
Image.network('url')
Icon(Icons.star)

导航

// 推入
Navigator.push(context, MaterialPageRoute(builder: (context) => NextPage()));

// 弹出
Navigator.pop(context);

// 命名路由
Navigator.pushNamed(context, '/details');

Next Steps