SOB
Hello·World
鱼塘
问答
学院
目录
写完这些案例，就掌握flutter开发了。

太好了，我们现在进入 第3个案例：输入框 + 实时显示。

🎯 目标：

  • 输入文字
  • 实时把输入的内容展示在界面上

✅ 案例：TextField + Controller 实时显示输入内容

dart
复制代码 
import 'package:flutter/material.dart';

void main() => runApp(InputDemoApp());

class InputDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '输入框案例',
      home: InputPage(),
    );
  }
}

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  // 创建一个 TextEditingController 来监听输入框内容
  final TextEditingController _controller = TextEditingController();

  // 记录当前输入的文字
  String _text = '';

  @override
  void initState() {
    super.initState();
    // 添加监听器，每次输入框内容变化时更新 _text 变量
    _controller.addListener(() {
      setState(() {
        _text = _controller.text;
      });
    });
  }

  @override
  void dispose() {
    // 页面销毁时要释放 controller，避免内存泄漏
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('输入实时显示')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 文本输入框
            TextField(
              controller: _controller, // 绑定 controller
              decoration: InputDecoration(
                labelText: '请输入内容',
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 20),
            // 实时显示用户输入的内容
            Text(
              '你输入了: $_text',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

📌 说明：

  • TextEditingController：用于获取和监听输入框内容
  • addListener：当输入框内容发生变化时自动调用 setState 更新 UI
  • dispose()：手动销毁 controller 释放资源

✅ 写完后运行看看，输入的文字会在下方实时显示。如果你理解这个了，我们可以继续下一个案例：页面跳转 + 数据传递，练习 Navigator 使用。是否继续？

好，我们现在进行 第4个案例：页面跳转 + 数据传递。

🎯 目标：

  • 实现从首页跳转到第二个页面
  • 从首页传递数据给第二个页面显示

✅ 案例：Navigator.push + 传参

dart
复制代码 
import 'package:flutter/material.dart';

void main() => runApp(NavigatorDemoApp());

class NavigatorDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '页面跳转案例',
      home: FirstPage(),
    );
  }
}

// 首页
class FirstPage extends StatelessWidget {
  final String messageToSend = '你好，这是从首页传来的信息';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('首页')),
      body: Center(
        child: ElevatedButton(
          child: Text('跳转到第二页'),
          onPressed: () {
            // 使用 Navigator.push 进行页面跳转，并传递参数
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondPage(message: messageToSend),
              ),
            );
          },
        ),
      ),
    );
  }
}

// 第二页，接收来自首页的数据
class SecondPage extends StatelessWidget {
  final String message;

  // 构造函数中接收 message 参数
  const SecondPage({Key? key, required this.message}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('第二页')),
      body: Center(
        child: Text(
          '接收到的信息: $message',
          style: TextStyle(fontSize: 22),
        ),
      ),
    );
  }
}

📌 说明：

  • Navigator.push(...)：用于从当前页面跳转到新页面
  • MaterialPageRoute(...)：创建跳转动画和新页面
  • SecondPage 构造函数接收参数并展示

你可以尝试自己修改传递的参数，甚至让用户在输入框里输入要传的文字，下一个练习我们就来做 输入框 + 跳转 + 传递用户输入的数据。

要进入这个扩展版练习吗？还是先继续往下学列表展示 ListView？

很好！现在我们进入 第5个案例：动态列表展示 ListView.builder。

🎯 目标：

  • 展示一个动态列表（比如商品列表、任务列表）
  • 使用 ListView.builder 渲染
  • 每个列表项可以点击，跳转并展示详情

✅ 案例：动态任务列表 + 跳转详情页

dart
复制代码 
import 'package:flutter/material.dart';

void main() => runApp(TaskListApp());

class TaskListApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '任务列表',
      home: TaskListPage(),
    );
  }
}

// 模拟任务数据
final List<String> tasks = [
  '写周报',
  '整理文档',
  '学习 Flutter',
  '提交代码',
  '开会讨论',
];

class TaskListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('任务列表')),
      body: ListView.builder(
        itemCount: tasks.length, // 列表长度
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(tasks[index]),
            leading: Icon(Icons.task),
            trailing: Icon(Icons.chevron_right),
            onTap: () {
              // 点击某项跳转到详情页，传递任务内容
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => TaskDetailPage(task: tasks[index]),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

// 任务详情页
class TaskDetailPage extends StatelessWidget {
  final String task;

  const TaskDetailPage({Key? key, required this.task}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('任务详情')),
      body: Center(
        child: Text(
          '任务内容: $task',
          style: TextStyle(fontSize: 22),
        ),
      ),
    );
  }
}

📌 说明：

  • ListView.builder：根据数据动态生成列表项，性能好
  • ListTile：标准的 Flutter 列表项，有图标、文字、点击事件
  • 支持点击后跳转，传递参数

这个案例非常实用，是很多 App 的核心结构（如：聊天列表、商品列表、用户列表等）。

✅ 下一步我们将进入：

  • 第6个案例：网络请求 + 列表展示（使用 http 包从网络加载数据）

是否继续进入这个实战？这个案例会带你从远程 API 获取数据，然后动态显示出来。

很好！我们现在进入 第6个案例：网络请求 + 列表展示，通过从网络获取数据并在列表中展示，进一步提升你的 Flutter 开发技能。

🎯 目标：

  • 使用 http 包从网络获取 JSON 数据
  • 将 JSON 数据解析为 Dart 对象
  • 使用 ListView.builder 展示数据列表

✅ 案例：从网络获取照片列表并展示

我们将使用 JSONPlaceholder 提供的免费 API，获取照片数据并展示。

1. 添加依赖

在 pubspec.yaml 文件中添加 http 依赖：

yaml
复制代码 
dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.5

然后运行 flutter pub get 获取依赖。

2. 创建数据模型

dart
复制代码 
// photo.dart
class Photo {
  final int id;
  final String title;
  final String thumbnailUrl;

  Photo({required this.id, required this.title, required this.thumbnailUrl});

  factory Photo.fromJson(Map<String, dynamic> json) {
    return Photo(
      id: json['id'],
      title: json['title'],
      thumbnailUrl: json['thumbnailUrl'],
    );
  }
}

3. 实现网络请求和列表展示

dart
复制代码 
// main.dart
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'photo.dart'; // 导入数据模型

void main() => runApp(PhotoListApp());

class PhotoListApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '照片列表',
      home: PhotoListPage(),
    );
  }
}

class PhotoListPage extends StatefulWidget {
  @override
  _PhotoListPageState createState() => _PhotoListPageState();
}

class _PhotoListPageState extends State<PhotoListPage> {
  late Future<List<Photo>> _photos;

  @override
  void initState() {
    super.initState();
    _photos = fetchPhotos();
  }

  // 从网络获取照片数据
  Future<List<Photo>> fetchPhotos() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1/photos'));

    if (response.statusCode == 200) {
      List jsonResponse = json.decode(response.body);
      return jsonResponse.map((photo) => Photo.fromJson(photo)).toList();
    } else {
      throw Exception('加载照片失败');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('照片列表'),
      ),
      body: FutureBuilder<List<Photo>>(
        future: _photos,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            List<Photo> photos = snapshot.data!;
            return ListView.builder(
              itemCount: photos.length,
              itemBuilder: (context, index) {
                return ListTile(
                  leading: Image.network(photos[index].thumbnailUrl),
                  title: Text(photos[index].title),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('加载失败: ${snapshot.error}'));
          }

          // 默认显示加载中
          return Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

📌 说明：

  • 使用 http.get 方法从网络获取数据
  • 使用 json.decode 将 JSON 字符串解析为 Dart 对象
  • 使用 FutureBuilder 异步构建界面，展示加载中的状态或数据列表

✅ 运行应用后，你将看到从网络获取的照片列表，每项包含缩略图和标题。

接下来，我们可以继续学习：

  • 第7个案例：本地存储（SharedPreferences）
  • 第8个案例：状态管理（Provider）
  • 第9个案例：调用摄像头/相册（ImagePicker）
  • 第10个案例：登录页面 + 表单验证

你想继续学习哪个案例？

"我视别人的钱财如粪土，但你的就不一样啦！"
本文由 程序员拉大锯 原创发布于 阳光沙滩 ， 未经作者授权，禁止转载
评论
0 / 1024
推荐文章
Flutter开发网路库封装示例
本教程详细介绍了如何在 Flutter 项目中通过 Dio 库封装网络请求，提供了一套完整的封装类及使用示例，适用于构建中大型项目。内容覆盖依赖引入、封装方法实现、使用场景演示以及扩展功能建议，帮助开发者快速提升代码复用性和可维护性。无论是初学者还是有经验的开发者，都能从中受益。
拉大锯围观点赞
写完这些案例，就掌握flutter开发了。
学习如何在Flutter中实现输入框的实时显示、页面跳转与数据传递，以及动态列表的展示和网络请求数据的解析与展示。通过这些基础案例，掌握Flutter的核心功能，为构建复杂应用打下坚实基础。
拉大锯围观点赞
Flutter学习路线
想要掌握Flutter开发？这篇详细的学习路线图将帮助你从零开始，逐步成长为Flutter开发者。覆盖基础入门、核心概念、进阶开发以及发布优化四个阶段，结合理论与实践，让你轻松掌握Flutter技能。无论是想开发手机应用还是探索跨平台开发，这份指南都能满足你的需求。立即行动，开启你的Flutter之旅吧！
拉大锯围观点赞
什么是MCP? Monte Carlo Planning（蒙特卡洛规划）
MCP（Monte Carlo Planning，蒙特卡洛规划）是强化学习和决策系统中的重要方法，广泛应用于复杂环境下的行动策略规划。无论是博弈中的AI，还是机器人路径规划，MCP都能通过随机模拟预测未来策略的效果。其中，蒙特卡洛树搜索（MCTS）是其典型实现，具有强大的全局最优性和适应高维复杂策略的能力。文章详细解析了MCP的基本概念、与强化学习的关系、典型算法以及实际应用场景，展示了其在AlphaGo、自动驾驶、游戏AI等领域的卓越表现。
拉大锯围观点赞
智能体相关的概念介绍一下，并且给出学习路线！
智能体是人工智能领域的重要概念，广泛应用于强化学习、多智能体系统和机器人学等方向。本文从智能体的基本概念出发，介绍了其核心组成和分类，并提供了涵盖基础知识、模型理解、实践项目及前沿研究的系统学习路线。无论是初学者还是希望深入探索的研究者，都能从中找到有价值的信息和资源。
拉大锯围观点赞
基于 Spring Boot 实现 MQTT 通信
本文详细介绍了如何利用Spring Boot实现MQTT通信，包括环境准备、依赖配置、消息发布与订阅的完整流程。通过此指南，开发者能快速搭建高效稳定的MQTT服务，适用于物联网场景。无论是初学者还是资深开发者，都能从中受益。快来动手实践吧！
拉大锯围观点赞
Spring boot 实现Websocket通讯
本文档提供了一个基于Spring Boot的WebSocket简单示例，涵盖服务端与客户端的搭建及基本消息通信功能。通过本教程，开发者可快速掌握WebSocket在Spring Boot中的应用，适用于实时数据传输、在线聊天等场景。立即跟随步骤，轻松构建属于你的WebSocket应用！
拉大锯围观点赞
弱智吧经典语录，快看看看吧！
这些有趣的表达方式源自网络文化的独特风格，通过夸张、讽刺和离谱的情境，带来轻松幽默的体验。无论是‘装傻式开头’还是‘典中典’的调侃，都展现了年轻人在虚拟世界中创造的另类交流方式。快来一起感受这种独特的网络语言魅力吧！
黄大锤围观点赞
Java各个版本的发布时间，主要特性有哪些呢？
探索Java自1996年问世以来的发展历程，从早期版本的基础功能到现代化特性如Lambda表达式和虚拟线程，深入了解每个主要版本的核心更新。本文详细整理了各个版本的发布时间与关键特性，帮助开发者选择最适合自己项目的Java版本。无论你是初学者还是资深开发者，都能从中获取宝贵的参考信息，助你更高效地运用这一强大的编程工具。
黄大锤围观点赞
发个文章，看看能不能在动态里发出来呢？
分享了自己在编程学习中的有趣小故事，从儿时课堂上忘记保存代码的经历中寻找成长的乐趣，鼓励大家保持对编程的热情，同时也能引发读者对过去校园时光的共鸣。
拉大锯围观点赞
苏格拉底介绍一下吧
本文详细介绍了古希腊哲学奠基人苏格拉底的核心思想及其对西方哲学的巨大影响。从‘无知之知’到‘德性即知识’，再到批判精神，苏格拉底通过独特的问答法启发人们对真理的追求。他的思想通过柏拉图的记录得以传承，并深刻塑造了西方哲学传统。此外，本文还回顾了苏格拉底的重要人生经历，包括其著名的审判与死亡，以及他对后世哲学家和伦理学发展的深远影响。无论你是哲学爱好者还是追求智慧的人，这篇文章都将为你提供深刻的启示。
拉大锯围观点赞
文章写得多，牛就吹得越好！
拉大锯围观点赞
我多写一篇文章吧，把文章写成列表好了！
拉大锯围观点赞
这是文章的标题，这篇文章有代码！
拉大锯围观点赞
本网站由程序猿(媛)用爱驱动 Copyright©阳光沙滩(0x07DE-0x07E9)
Design by ZengXue in Guangzhou and code by great TrillGates in Shenzhen
1039
39
10