编程马·菜鸟教程

Appearance

附录：Flutter 核心知识点汇总 ​

1. 核心组件速记（按使用频率排序，附示例） ​

基础组件 ​

Text（文本组件） ​

dart
Text(
  'Hello Flutter',
  style: TextStyle(
    fontSize: 18,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
  ),
  textAlign: TextAlign.center,
)

Image（图片组件） ​

dart
// 网络图片
Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

// 本地图片
Image.asset('assets/images/logo.png')

ElevatedButton（悬浮按钮） ​

dart
ElevatedButton(
  onPressed: () {
    // 按钮点击事件
  },
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
  ),
  child: Text('Click Me'),
)

TextField（输入框） ​

dart
TextField(
  decoration: InputDecoration(
    labelText: 'Username',
    hintText: 'Enter your username',
    border: OutlineInputBorder(),
  ),
  onChanged: (value) {
    // 输入变化回调
  },
)

Container（容器组件） ​

dart
Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 4,
        offset: Offset(2, 2),
      ),
    ],
  ),
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.all(8),
  child: Text('Container Example'),
)

布局组件 ​

Row（水平布局） ​

dart
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('Left'),
    Text('Center'),
    Text('Right'),
  ],
)

Column（垂直布局） ​

dart
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Top'),
    Text('Middle'),
    Text('Bottom'),
  ],
)

Stack（层叠布局） ​

dart
Stack(
  alignment: Alignment.center,
  children: [
    Container(width: 200, height: 200, color: Colors.red),
    Container(width: 150, height: 150, color: Colors.green),
    Container(width: 100, height: 100, color: Colors.blue),
  ],
)

ListView.builder（动态列表） ​

dart
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index].title),
      subtitle: Text(items[index].subtitle),
      onTap: () {
        // 点击事件
      },
    );
  },
)

GridView（网格布局） ​

dart
GridView.count(
  crossAxisCount: 2,
  padding: EdgeInsets.all(10),
  children: List.generate(6, (index) {
    return Container(
      color: Colors.blue,
      margin: EdgeInsets.all(5),
      child: Center(child: Text('Item $index')),
    );
  }),
)

2. 布局组件使用场景汇总（Row、Column、Stack等） ​

Row（水平布局） ​

  • 使用场景：水平排列多个组件，如导航栏、工具栏、表单行
  • 特点：子组件沿水平方向排列
  • 常用属性：
    • mainAxisAlignment：主轴对齐方式
    • crossAxisAlignment：交叉轴对齐方式
    • children：子组件列表

Column（垂直布局） ​

  • 使用场景：垂直排列多个组件，如页面主体内容、表单
  • 特点：子组件沿垂直方向排列
  • 常用属性：
    • mainAxisAlignment：主轴对齐方式
    • crossAxisAlignment：交叉轴对齐方式
    • children：子组件列表

Stack（层叠布局） ​

  • 使用场景：组件叠加显示，如图片上叠加文字、浮层效果
  • 特点：子组件按顺序叠加，后添加的组件在上面
  • 常用属性：
    • alignment：子组件对齐方式
    • fit：子组件适配方式
    • children：子组件列表

Flex（弹性布局） ​

  • 使用场景：需要灵活控制子组件占比的布局
  • 特点：结合Expanded使用，实现子组件弹性布局
  • 常用属性：
    • direction：布局方向（水平或垂直）
    • children：子组件列表

Wrap（流式布局） ​

  • 使用场景：子组件可能超出屏幕宽度，需要自动换行的场景
  • 特点：子组件超出父容器宽度时自动换行
  • 常用属性：
    • spacing：子组件水平间距
    • runSpacing：子组件垂直间距
    • children：子组件列表

SingleChildScrollView（滚动组件） ​

  • 使用场景：内容超出屏幕高度，需要滚动查看的场景
  • 特点：提供单 child 的滚动功能
  • 常用属性：
    • scrollDirection：滚动方向
    • child：子组件

3. 状态管理方法汇总（setState、Provider、GetX） ​

setState（基础状态管理） ​

  • 适用场景：简单组件的状态管理，状态只在单个组件内使用
  • 使用方式：
    dart
    setState(() {
  _count++;
});
  • 优点：使用简单，适合小型组件
  • 缺点：状态管理分散，难以在组件间共享

Provider（官方推荐） ​

  • 适用场景：中大型应用，需要在多个组件间共享状态
  • 使用方式：
    1. 创建数据模型
    2. 使用 ChangeNotifier 管理状态
    3. 使用 Provider 提供状态
    4. 使用 Consumer 或 Provider.of 访问状态
  • 优点：状态管理集中，支持依赖注入
  • 缺点：需要了解 InheritedWidget 原理

GetX（轻量级状态管理） ​

  • 适用场景：各种规模的应用，需要快速开发
  • 使用方式：
    1. 创建 Controller 管理状态
    2. 使用 Get.put() 注册 Controller
    3. 使用 Get.find() 访问 Controller
  • 优点：使用简单，代码量少，集成了路由管理和依赖注入
  • 缺点：功能过于集成，可能导致代码耦合

Bloc（基于流的状态管理） ​

  • 适用场景：大型应用，需要严格的状态管理
  • 使用方式：
    1. 定义 Event 和 State
    2. 创建 Bloc 处理事件
    3. 使用 BlocBuilder 或 BlocListener 监听状态变化
  • 优点：状态管理清晰，测试友好
  • 缺点：代码量较大，学习曲线较陡

4. 网络请求与JSON解析模板（复制即用） ​

Dio 网络请求模板 ​

dart
import 'package:dio/dio.dart';

class ApiService {
  static final Dio _dio = Dio(
    BaseOptions(
      baseUrl: 'https://api.example.com',
      connectTimeout: 10000,
      receiveTimeout: 10000,
      headers: {
        'Content-Type': 'application/json',
      },
    ),
  );

  // GET 请求
  static Future<Response> get(String path, {Map<String, dynamic>? queryParameters}) async {
    try {
      return await _dio.get(path, queryParameters: queryParameters);
    } catch (e) {
      print('GET request error: $e');
      rethrow;
    }
  }

  // POST 请求
  static Future<Response> post(String path, {dynamic data}) async {
    try {
      return await _dio.post(path, data: data);
    } catch (e) {
      print('POST request error: $e');
      rethrow;
    }
  }
}

JSON 解析模板 ​

手动解析 ​

dart
class User {
  final String name;
  final int age;
  final String email;

  User({
    required this.name,
    required this.age,
    required this.email,
  });

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      name: json['name'],
      age: json['age'],
      email: json['email'],
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'name': name,
      'age': age,
      'email': email,
    };
  }
}

// 使用
final user = User.fromJson(jsonData);
final jsonString = jsonEncode(user.toJson());

使用 json_serializable ​

dart
// pubspec.yaml 添加依赖
// dev_dependencies:
//   build_runner: ^2.1.7
//   json_serializable: ^6.1.5

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User {
  final String name;
  final int age;
  final String email;

  User({
    required this.name,
    required this.age,
    required this.email,
  });

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

// 运行命令生成代码
// flutter pub run build_runner build

5. 打包配置模板（Android/iOS，复制即用） ​

Android 打包配置 ​

生成签名文件 ​

bash
# 生成签名文件
keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-key-alias

配置签名信息 ​

yaml
# android/app/build.gradle
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file('my-release-key.jks')
            storePassword 'your-store-password'
            keyAlias 'my-key-alias'
            keyPassword 'your-key-password'
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
            ...
        }
    }
}

打包命令 ​

bash
# 打包 APK
flutter build apk --release

# 打包 AAB
flutter build appbundle --release

iOS 打包配置 ​

Xcode 配置 ​

  1. 打开 iOS 项目：open ios/Runner.xcworkspace
  2. 在 Xcode 中配置：
    • 应用名称：General → Display Name
    • 版本号：General → Version
    • 构建号：General → Build
    • 证书：Signing & Capabilities

打包命令 ​

bash
# 打包 IPA
flutter build ios --release
# 然后在 Xcode 中归档并导出 IPA

6. 新手易错点对照表（快速排查问题） ​

布局相关 ​

错误现象可能原因解决方案
布局溢出组件尺寸超过屏幕边界使用 SingleChildScrollView 包裹内容
子组件不显示没有设置宽度或高度为容器设置宽高，或使用 Expanded
对齐方式不正确mainAxisAlignment 或 crossAxisAlignment 设置错误调整对齐方式参数
组件重叠Stack 布局使用不当调整 Stack 的 alignment 属性或使用 Positioned

状态管理相关 ​

错误现象可能原因解决方案
状态不更新在 StatelessWidget 中使用 setState使用 StatefulWidget
异步回调中 setState 报错Widget 已销毁使用 mounted 检查
状态共享失败状态管理方案选择不当选择合适的状态管理库（如 Provider）

网络请求相关 ​

错误现象可能原因解决方案
请求失败网络连接问题或 URL 错误检查网络连接和 URL
JSON 解析失败实体类与 JSON 格式不匹配检查实体类定义和 JSON 格式
数据不显示没有处理异步加载状态添加加载状态和错误处理

打包相关 ​

错误现象可能原因解决方案
签名错误签名文件配置错误检查签名文件路径和密码
权限错误缺少必要权限在 AndroidManifest.xml 或 Info.plist 中添加权限
图标不显示图标文件配置错误检查 pubspec.yaml 中的图标配置

7. 常用第三方插件推荐（按场景分类） ​

开发效率 ​

UI 增强 ​

功能扩展 ​

平台集成 ​

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建