Flutter基础教程：从页面布局到网络通信完整指南

## 简介

**Flutter** 是一个由 Google 开发的开源 UI 工具包，旨在为多平台（如 Android、iOS、Web、桌面等）创建精美的原生应用。作为一名 Flutter 新手，你可能会觉得它的学习曲线有些陡峭，但通过本文的教学，你将能够掌握 Flutter 的基本开发技巧，包括页面布局、组件使用、网络请求、状态管理、路由跳转等。让我们一步步来了解这些基础知识。

<!-- more -->

## 1. Flutter 项目结构

在 Flutter 中，所有的应用逻辑通常位于 `lib/` 目录下，其中 `main.dart` 是应用的入口文件。你可以通过该文件定义应用的主题、路由、首页等。一个典型的 Flutter 项目结构如下：

```bash
lib/
  main.dart        # 应用入口文件
  pages/           # 页面文件夹
  widgets/         # 自定义组件文件夹
  models/          # 数据模型文件夹
  services/        # 后端接口、WebSocket 服务等文件夹
```

## 2. 页面布局

在 Flutter 中，页面的布局通过 `Widget` 实现。Flutter 提供了多种常用的布局组件，最常用的包括 `Column`、`Row`、`Stack`、`Container` 和 `Scaffold`。

### 示例：基础页面布局

```java
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter 页面布局示例"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("欢迎使用 Flutter!"),
          ElevatedButton(
            onPressed: () {},
            child: Text("点击按钮"),
          ),
        ],
      ),
    );
  }
}
```

### 关键组件：

- **Scaffold**：一个提供常见布局结构的容器，通常用于应用的基础布局。
- **Column**：用于垂直排列子组件。
- **Row**：用于水平排列子组件。
- **Container**：用于包裹其他组件，可以设置大小、颜色、边距等。

## 3. 基本组件使用

### 常用组件：

- **Text**：用于显示文本。
- **ElevatedButton**：常用的按钮组件。
- **Icon**：用于显示图标。
- **Image**：用于显示图片。
- **TextField**：用于文本输入。

### 示例：使用 `TextField` 和按钮

```java
import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("登录页面"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(labelText: "请输入用户名"),
            ),
            ElevatedButton(
              onPressed: () {
                print("用户名: ${_controller.text}");
              },
              child: Text("登录"),
            ),
          ],
        ),
      ),
    );
  }
}
```

## 4. HTTP 接口调用

Flutter 提供了 `http` 包来处理网络请求。你可以使用 `http.get()`、`http.post()` 等方法进行接口调用。

### 示例：使用 HTTP 请求获取数据

首先，在 `pubspec.yaml` 中添加 `http` 依赖：

```yaml
dependencies:
  http: ^0.13.3
```

然后，在代码中进行 HTTP 请求：

```java
import 'package:http/http.dart' as http;
import 'dart:convert';

Future<void> fetchData() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));

  if (response.statusCode == 200) {
    // 解析 JSON 数据
    List data = jsonDecode(response.body);
    print(data);
  } else {
    throw Exception('Failed to load data');
  }
}
```

## 5. 登录状态存储

Flutter 提供了 `shared_preferences` 包来存储简单的键值对数据，如登录状态。

### 示例：存储登录信息

首先，在 `pubspec.yaml` 中添加 `shared_preferences` 依赖：

```yaml
dependencies:
  shared_preferences: ^2.0.15
```

然后，使用它存储和获取登录信息：

```java
import 'package:shared_preferences/shared_preferences.dart';

Future<void> saveLoginStatus(bool isLoggedIn) async {
  final prefs = await SharedPreferences.getInstance();
  prefs.setBool('is_logged_in', isLoggedIn);
}

Future<bool> getLoginStatus() async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getBool('is_logged_in') ?? false;
}
```

## 6. WebSocket 通信

WebSocket 是一种持久连接，适用于实时数据传输。你可以使用 `web_socket_channel` 包来实现 WebSocket 通信。

### 示例：使用 WebSocket 连接

首先，在 `pubspec.yaml` 中添加 `web_socket_channel` 依赖：

```yaml
dependencies:
  web_socket_channel: ^2.1.0
```

然后，使用 WebSocket 进行连接：

```java
import 'package:web_socket_channel/web_socket_channel.dart';

class WebSocketExample extends StatelessWidget {
  final WebSocketChannel channel = WebSocketChannel.connect(
    Uri.parse('ws://echo.websocket.org'),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("WebSocket 示例")),
      body: Column(
        children: <Widget>[
          StreamBuilder(
            stream: channel.stream,
            builder: (context, snapshot) {
              return Text(snapshot.hasData ? snapshot.data.toString() : '');
            },
          ),
          TextField(
            onSubmitted: (message) {
              channel.sink.add(message); // 发送消息
            },
          ),
        ],
      ),
    );
  }
}
```

## 7. 页面路由跳转

Flutter 提供了 `Navigator` 来进行页面跳转。你可以使用 `Navigator.push` 或 `Navigator.pushNamed` 来跳转到新的页面。

### 示例：使用命名路由跳转页面

在 `MaterialApp` 中设置路由：

```java
MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/login': (context) => LoginPage(),
  },
)
```

然后，使用 `Navigator.pushNamed` 跳转页面：

```java
Navigator.pushNamed(context, '/login');
```

## 8. 本地应用唤起

在 Flutter 中，你可以使用 `url_launcher` 包来打开外部链接或本地应用。

### 示例：打开外部浏览器或应用

首先，在 `pubspec.yaml` 中添加 `url_launcher` 依赖：

```yaml
dependencies:
  url_launcher: ^6.0.3
```

然后，使用 `launch` 打开应用或 URL：

```java
import 'package:url_launcher/url_launcher.dart';

Future<void> _launchURL() async {
  const url = 'https://flutter.dev';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw '无法打开链接 $url';
  }
}
```

## 总结

通过这篇文章，你已经学习了 Flutter 的一些基础知识：

- **页面布局**：使用 `Column`、`Row`、`Scaffold` 等组件来构建页面。
- **基本组件**：了解了 `Text`、`Button`、`TextField` 等常用组件。
- **HTTP 请求**：使用 `http` 包进行网络请求。
- **登录状态存储**：使用 `shared_preferences` 存储本地数据。
- **WebSocket 通信**：实现实时数据传输。
- **页面路由跳转**：使用 `Navigator` 进行页面跳转。
- **本地应用唤起**：使用 `url_launcher` 打开 URL 或外部应用。

希望这篇文章对你入门 Flutter 开发有所帮助！通过实践这些基础知识，你将能够创建功能丰富的 Flutter 应用。