Flutter基础(前端教程③-跳转)

在 Flutter 中,点击卡片列表跳转到详情页,核心是使用 Navigator 组件管理页面跳转。

完整代码(含跳转功能)

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),
      // 配置路由(管理页面跳转)
      initialRoute: '/', // 初始页面
      routes: {
        '/': (context) => const ChatListPage(), // 列表页
        '/detail': (context) => const ChatDetailPage(), // 详情页
      },
    );
  }
}

// 1. 聊天列表页
class ChatListPage extends StatelessWidget {
  const ChatListPage({Key? key}) : super(key: key);

  // 模拟聊天数据
  List<Map<String, dynamic>> getChats() {
    return [
      {
        'id': 1,
        'name': '张三',
        'avatar': 'https://picsum.photos/100/100?random=1',
        'message': '下午一起吃饭吗?',
        'time': DateTime.now().subtract(const Duration(minutes: 5)),
      },
      {
        'id': 2,
        'name': '李四',
        'avatar': 'https://picsum.photos/100/100?random=2',
        'message': '好的,我稍后回复你',
        'time': DateTime.now().subtract(const Duration(hours: 1)),
      },
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('微信')),
      body: ListView.builder(
        itemCount: getChats().length,
        itemBuilder: (context, index) {
          final chat = getChats()[index];
          return ListTile(
            leading: CircleAvatar(
              backgroundImage: NetworkImage(chat['avatar']),
            ),
            title: Text(chat['name']),
            subtitle: Text(chat['message']),
            trailing: Text(DateFormat('HH:mm').format(chat['time'])),
            // 点击事件:跳转到详情页
            onTap: () {
              // 传递数据到详情页(通过路由参数)
              Navigator.pushNamed(
                context,
                '/detail',
                arguments: chat, // 把当前聊天数据传过去
              );
            },
          );
        },
      ),
    );
  }
}

// 2. 聊天详情页
class ChatDetailPage extends StatelessWidget {
  const ChatDetailPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 获取从列表页传递过来的数据
    final Map<String, dynamic> chat =
        ModalRoute.of(context)?.settings.arguments as Map<String, dynamic>;

    return Scaffold(
      appBar: AppBar(
        title: Text(chat['name']), // 显示聊天对象名称
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('与 ${chat['name']} 的聊天详情'),
            const SizedBox(height: 20),
            Text('最后一条消息:${chat['message']}'),
            // 可以在这里添加更多详情内容(如聊天记录)
          ],
        ),
      ),
    );
  }
}
相关推荐
姑苏洛言25 分钟前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手1 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言1 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友2 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手3 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿3 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜053 小时前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau3 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123454 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js