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']}'),
            // 可以在这里添加更多详情内容(如聊天记录)
          ],
        ),
      ),
    );
  }
}
相关推荐
用户38022585982413 分钟前
vue3源码解析:编译之解析器实现原理
前端·vue.js·源码阅读
Ygrowly14 分钟前
搭建 Mock 服务,实现前端自调
前端
火车叼位18 分钟前
threejs api速查表, 你的下一个鼠标垫图案素材
前端·api·three.js
铃铃六21 分钟前
typescript中tpye和interface的区别
前端·typescript
页面魔术23 分钟前
🔥来听听尤雨溪是怎么亲述无虚拟dom的吧
前端·vue.js·前端框架
小old弟23 分钟前
⭐ NestJS入门指南:从零开始构建高效Node.js服务端应用
前端
不爱说话郭德纲27 分钟前
为了满足产品和设计,我撸了一个校准器ElkCalibrate📏
前端·vue.js·uni-app
IDOOY33 分钟前
OSS-服务端签名Web端直传+STS获取临时凭证+POST签名v4版本开发过程中的细节
前端·oss·服务端验签直传·sts方式·java+oss-sts验签
Hilaku1 小时前
“全栈”正在淘汰“前端”吗?一个前端专家的焦虑与思考
前端·面试·程序员
前端大卫1 小时前
页面加载太慢?一文搞懂 JS 和 CSS 阻塞机制!
前端·javascript